🐰 동기 처리 vs 비동기 처리
동기 처리 방식 은 실행 순서를 보장하지만, 블로킹으로 인한 단점이 존재한다.
비동기 처리 방식 은 현재 실행 중인 태스크가 종료 되지 않아도 다음 태스크를 바로 실행하는 방식이다. 블로킹이 발생하지 않지만 태스크의 실행 순서가 보장되지 않는다.
비동기 함수는 전통적으로 콜백 패턴을 사용한다. 콜백 패턴은 콜백 헬, 예외 처리의 어려움, 한 번에 여러 비동기 처리 불가능 같은 단점 들이 있다.
타이머 함수인 setTimeout, setInterval, HTTP 요청, 이벤트 핸들러 는 비동기 처리 방식으로 동작한다.
🐰 이벤트 루프와 태스크 큐
이벤트 루프(Event Loop) 는 자바스크립트의 동시성(concurrency)을 지원하는 역할을 하는 매커니즘이다. 브라우저 동작을 보면 태스크가 동시에 처리되는 것 처럼 보이는데, 이벤트 루프를 통해 이를 가능하게 한다
대부분의 자바스크립트 엔진은 2개의 영역으로 구분된다.
• 콜 스택(Call stack) : 실행 컨텍스트 스택을 말하며, 실행 중인 실행 컨텍스트가 제거 되기 전까진 다른 태스크는 실행되지 않는다.
• 힙(Heap) : 힙(heap)은 객체가 저장되는 메모리 공간이며, 값을 저장할 메모리 공간의 크기는 런타임에 동적으로 할당한다.
🐰 비동기 함수 실행 과정
-
전역 코드가 평가되어 전역 실행 컨텍스트가 생성되고 콜 스택에 푸시
-
전역 코드 실행 단계에서 setTimeOut 함수 호출문을 만나면, 함수 실행 컨텍스트가 생성되고, 현재 실행 중인 실행 컨텍스트가 된다. (여기서 setTimeout은 호스트 객체인 Web API의 함수)
-
setTimeout 함수가 실행되면 브라우저(Node.js)에 의해 콜백 함수를 스케줄링(setTimeout() 3초뒤에 실행을 하겠다.)한 후, 실행 콘텍스트는 콜 스택에서 팝된다.
4-1. 브라우저는 타이머를 설정 한 후, 타이머의 만료를 기다린 후 콜백함수 fisrt 가 태스크 큐에 Push된다.(4-1는 브라우저에 의해, 4-2는 자바스크립트 엔진에 의해 병행 처리된다.)
4-2. second 함수가 호출되어 함수 실행 컨텍스트가 생성되고, 콜 스택에 푸시되어 현재 실행 중인 실행 컨텍스트가 된다. 이 때, 아직 타이머로 설정한 시간이 지나지 않았으면, first 함수는 태스크 큐에서 대기 -
전역 코드 실행이 종료되고, 전역 실행 콘텍스트가 콜 스택에서 팝된다.
-
이벤트 루프에 의해 콜 스택이 비어 있음이 감지되고, 태스크 큐에 대기 중인 콜백 함수 first의 실행 컨텍스트가 생성되고 콜 스택에 푸시되어 실행되고 종료 후 콜 스택에서 팝된다.
function first() {
console.log("first");
}
function second() {
console.log("second");
}
// 비동기 방식
setTimeout(first, 3000);
second();