비동기 프로그래밍

자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 이는 함수를 실행할 수 있는 창구가 단 하나이며, 동시에 2개 이상의 함수를 동시에 실행할 수 없음을 의미한다. 실행 컨텍스트 스택의 최상위 요소인 실행 중인 실행 컨텍스트를 제외한 모든 실행 컨텍스트는 모두 실행 대기 중인 태스크들이다. 현재 실행 중인 컨텍스트가 pop 되어 실행 컨텍스트 스택에서 제거되면 실행된다.

 

이처럼 자바스크립트 엔진은 한번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. 그러기 때문에 시간이 걸리는 태스크를 실행하는 경우 블로킹이 발생한다.

 

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

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

// 일정 시간이 경과한 후에 콜백함수 foo를 호출한다
// setTimeout은 bar 함수를 블로킹하지 않는다.
setTimeout(foo, 3000)
bar()

// bar 호출 -> 3초경과후 foo호출

 

setTimeout 함수는 이후의 함수를 블로킹하지 않고 곧바로 실행한다. 이처럼 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기처리 라고 한다.

 

동기처리는 실행 순서가 보장은 되지만 앞선 태스크로 인해 이후 태스크들이 블로킹 되는 단점이 있다. 비동기 처리 방식은 블로킹이 발생하지 않는다는 장점이 있지만 태스크의 실행 순서가 보장되지 않는다. 비동기 처리를 수행하는 함수는 주로 콜백 패턴을 사용한다. 하지만 이는 콜백 지옥을 발생시켜 가독성을 나쁘게 하고, 비동기 처리중 발생한 에러의 예외 처리가 곤란하다.