자바스크립트와 비동기 처리

자바스크립트는 단일 스레드기반으로 동작한다. 이 뜻은 한번에 한가지 작업밖에 처리하지 못한다는 뜻이다. 하지만 우리는 서버에 AJAX로 데이터를 불러오면서 이벤트를 처리하기도 한다. 이는 이벤트 루프와 태스트큐가 있기 때문에 가능한 일이다.

 

이벤트 루프와 태스트큐가 동작하는 과정을 알기 위해선 자바스크립트 엔진에 대한 이해가 필요하다. 자바스크립트 엔진은 크게 힙영역, 호출스택, 이벤트 루프, 태스트큐로 이루어져 있다.

힙 영역은 동적으로 생성된 객체를 저장하는 공간이고 호출 스택은 메소드가 실행되었을 때 스택 프레임이 생성되는 공간이다.

function first(){
    console.log('first');
    second();
}

function second(){
    console.log('second');
}

first()

위와 같은 코드의 호출 스택의 변화과정은 다음과 같다.

task queue는 콜백 함수가 들어가는 영역이다.

 

이제 자바스크립트가 비동기처리를 하는 과정을 살펴보자.

function second(){
    console.log('second')
}

console.log('first')
setTimeout(second, 0)
console.log('third')

위 코드의 결과부터 이야기 하자면

first

third

second

순서이다.

그 이유는 자바스크립트가 비동기처리를 하는 과정에 있다. 자바스크립트는 비동기 함수를 처리하는 과정은 다음과 같다.

그림이 복잡하게 그려지긴 했지만 작동 과정은 간단하다.

1. 호출스택에 first가 push된다.

2. 호출스택에 first가 pop되고 setTimeout이 push된다.

3. 백그라운드에 second함수와 함께 0초 타이머가 전달된다.

4. 0초 후에 태스트큐에 second함수가 전달된다.

4. 호출스택에 setTimeout이 pop되고 third가 push된다.

5. third가 pop되고 호출스택이 비워지면 이벤트루프가 태스트큐에 있는 함수를 호출스택에 함수를 하나씩 push한다.

이 과정으로 가장 마지막에 second함수가 실행되기 때문에 second가 가장 마지막에 출력이 되는 것이다.

 

* 이벤트 루프는 호출스택이 비워지면 태스트큐의 함수를 하나씩 Push한다.

 

참고한 블로그: https://www.zerocho.com/category/JavaScript/post/597f34bbb428530018e8e6e2