1. 동기 VS 비동기

동기와 비동기는 작업을 처리하는 방식을 의미합니다. 즉, 우리가 작성한 코드가 어떤 순서로 처리되는지를 나타냅니다. 동기는 한 작업이 완료될 때까지 다음 작업을 기다리는 순차적 실행 방식을 의미하고, 비동기는 작업이 완료되기를 기다리지 않고 다음 작업을 수행하는 방식을 의미합니다.

1.1. 일상에서 마주치는 동기와 비동기

카페에서 커피를 주문하는 상황을 생각해봅시다. 만약 카페에 직원이 한 명 뿐이고, 직접 커피를 내려야 한다면 어떨까요? 손님의 주문을 받아 커피를 내리는 동안 주문을 받지 못합니다. 이와 같이 한 작업이 완료될 때까지 기다리는 것을 동기적 처리라고 합니다.

하지만 커피 머신이 있어 커피를 자동으로 내린다면 어떻게 될까요? 손님이 커피를 주문하는 동안 다른 손님의 주문을 받을 수 있습니다. 이와 같이 한 작업이 완료되기를 기다리지 않고 다음 작업을 수행하는 것을 비동기적 처리라고 합니다.

1.2. 코드로 살펴보는 동기와 비동기

자바스크립트 코드는 기본적으로 동기적으로 실행됩니다. 다음 코드를 실행하면 1부터 3까지 차례대로 콘솔에 출력됩니다.

console.log(1);
console.log(2);
console.log(3);

console.log(1);
console.log(2);
console.log(3);

하지만 아래 코드를 실행하면 1, 3이 출력되고 시간이 흘러 2가 콘솔에 출력됩니다. setTimeout을 이용하면 일정 시간이 지난 후 콜백함수가 실행되도록 코드를 작성할 수 있습니다. 이 때, 코드가 비동기적으로 실행됩니다. setInterval, addEventListener와 같은 함수들도 비동기적으로 실행됩니다.

console.log(1)
setTimeout(() => {
  console.log(2);
}, 1000);
console.log(3);

console.log(1)
setTimeout(() => {
  console.log(2);
}, 1000);
console.log(3);

위니북스에서는 setTimeout 내부에서 작성된 console은 출력되지 않으므로 주의해주세요.

2. 자바스크립트 엔진의 동작

동기적인 코드와 비동기적인 코드가 섞여 있을 때, 자바스크립트 엔진은 어떻게 동작할까요? 자바스크립트의 코드는 브라우저에 내장되어 있는 자바스크립트 엔진에 의해 실행됩니다. 자바스크립트 엔진은 코드를 읽고 해석하여 실행하는 역할을 합니다.

이 때, 힙 메모리는 객체를 저장하는 공간이고, 콜 스택은 함수의 실행 컨텍스트를 저장하는 공간입니다. 자바스크립트 엔진은 콜 스택에서 함수를 호출하고, 힙 메모리에서 객체를 생성합니다. 자바스크립트 엔진은 콜 스택과 힙 메모리를 사용하여 코드를 실행합니다.

함수의 실행 순서는 콜 스택에 쌓이고, 함수가 종료되면 스택에서 제거됩니다. 콜 스택은 LIFO(Last In First Out) 방식으로 동작합니다. 즉, 가장 나중에 들어온 함수가 가장 먼저 실행됩니다.

function func1() {
  console.log('func1');
  func1();
}
 
function func2() {
  console.log('func2');
  func3();
}
 
function func3() {
  console.log('func3');
}
 
func1();

function func1() {
  console.log('func1');
  func1();
}
 
function func2() {
  console.log('func2');
  func3();
}
 
function func3() {
  console.log('func3');
}
 
func1();

여기서 중요한 점은 콜 스택이 한 개 있는 자바스크립트 엔진은 싱글 스레드로 동작한다는 것입니다. 즉, 한 번에 하나의 작업만 처리할 수 있습니다.

JavaScript 에센셜

동기와 비동기