Callback 비교 - 1

js는 동기적이다. ⇒ 호이스팅 이후로는 차례대로 실행이 된다. ⇒ 호이스팅은 var, function 선언한 것이 최상단으로 올라 가는 것. ⇒ let, const는 호이스팅 안되나? ⇒ 된다, 하지만 tdz에 의해 referenceError를 발생한다. ⇒ 변수는 어휘적 환겨에 포함될 때 생성되지만, 실행되기 전까지는 엑세스 할 수 없는 현상을 tdz라고 한다.

 

콜백함수란 ⇒ 우리가 전달해준 함수를 나중에 불러줘라는 뜻.

콜백함수는 동기, 비동기으로 사용할 수 있다.

 

 

Callback Hell

 

콜백 지옥의 문제점

1. 가독성이 너무 떨어진다. 비즈니스 로직을 한눈에 이해하기 어렵다. 무슨일이 일어나는지 파악하기 어렵다.
2. 에러가 발생하거나 디버깅 시 굉장히 어렵다.

Promise

callback을 대체해서 깔끔하게 작성하는 것을 알아보자. ⇒ Promise란 약속이란 뜻으다. js에서 제공하는 비동기를 간편하게 처리하기 위해 도와주는 Object이다. ⇒ 정해진 장시간의 기능을 수행하고 나서 정상적으로 기능이 수행되었다면 성공 메시지와 함께 처리된 결과같을 전달해주고, 실패시 에러를 전달해준다.

비동기적으로 사용할 때 콜백 대신 사용할 수 있따.

promise는 2가지 포인트가 있는데

1. state ⇒ process가 무거운 operation를 수행하고 있는 중인지, 완료되었는지, 실패했는지, 상태에 대해 이해하는 것이 중요하다. ⇒ pending:수행중, fulfiled: 완료 or rejected: 파일을 찾을 수 없거나 네트워크 문제
2. Consumer, Producer의 차이점을 아는 것이 중요하다. 원하는 데이터를 제공하는 사람과, 소비하는 사람의 차이를 잘 이해해야 한다.

위의 Callback Hell을 Promise로 변경해보면

Async, Await

기존의 promise를 조금 더 간결하고 간편하고 동기적으로 실행되어 보이기 위해 나온 것. promise chaining이 계속 된다면 코드가 난잡해질 수 있기에 async, await를 사용하여 동기적으로 보이도록 사용한다.

promise보다 async,await가 나은 것은 아니고 적재 적소에서 사용할 필요가 있다.

 

위의 callback을 promise로 바꾸고 이를 async,await 로 바꿈.