Promise

자바스크립트 ES6이후에 등장하게 된 promise객체는 비동기 처리 작업 할 때 콜백함수가 쌓이게되는 콜백지옥을 해결하기 위해 처음 등장이 되었다.

같은 원리이지만, promise객체를 통해 더 가독성이 쉽게 표시할 수 있어서 이용하게 되었고,

promise 또한 많은 promise변수를 사용하여 리턴하게 되면 promise지옥을 경험 할 수 있다.

콜백함수, promise, async/await의 응답속도

콜백함수나 promise의 응답속도는 거의 같다.

처음 호이스팅 환경에서 차례로 읽기 때문에 비동기 처리 되는 영역은 처리 완료 되지 않은 상태에서 다음을 읽는다. 따라서, setTimeout함수와 같이 딜레이를 주게 되어도 응답속도는 딜레이를 무시하고 먼저 처리한다.

웹브라우저의 구성 요소

• Call Stack : 자바스크립트에서 수행해야 할 함수들을 순차적으로 스택에 담아 처리
• Web API : 웹 브라우저에서 제공하는 API로 AJAX나 TimeOut등의 비동기 작업 수행
• Task Queue : Callback Queue 라고도 하며, Web API에서 넘겨받은 Callback함수를 저장.
• Event Loop : Call Stack이 비워져있다면, Task Queue의 작업을 Call Stack으로 옮김.

setTimeout(() => console.log("Async Hi hun"));
console.log("Hello! World");
// Hello! World
// Async Hi hun

비동기 코드는 먼저 실행됨에도 불구하고, 나중에 출력되는걸 볼 수 있다.