동기식 및 비동기식 JavaScript 배우기

Source: Dev.to

동기식

동기식 프로그래밍에서는 작업이 순차적으로 하나씩 실행됩니다. 각 코드 라인은 이전 라인이 끝날 때까지 기다린 뒤 다음 라인으로 넘어가므로 흐름이 명확하고 예측 가능합니다.

console.log("Start");
console.log("Task 1");
console.log("Task 2");
console.log("End");

Output

Start
Task 1
Task 2
End

각 문장은 앞선 문장이 완료된 후에만 실행되므로 코드가 고정된 단계‑별 순서대로 수행됩니다.

비동기식

비동기식 프로그래밍에서는 이전 작업이 끝날 때까지 기다리지 않고 작업이 독립적으로 실행될 수 있습니다. 한 작업이 진행되는 동안 다른 코드도 계속 실행되므로 성능과 응답성이 향상됩니다.

console.log("Start");

setTimeout(function() {
  console.log("Task 1");
}, 2000);

console.log("End");

Output

Start
End
Task 1

setTimeout은 비동기적으로 동작하므로 인터프리터가 타이머가 끝날 때까지 기다리지 않고 다음 라인으로 넘어갑니다.

비동기 JavaScript 작동 방식

호출 스택

호출 스택은 JavaScript가 함수를 실행하는 장소이며, LIFO(후입선출) 방식으로 코드를 처리합니다.

웹 API (브라우저)

브라우저가 제공하는 웹 API는 setTimeout, 네트워크 요청, 이벤트 리스너와 같은 작업을 담당합니다. 이러한 API를 호출하면 요청이 브라우저에 전달되어 JavaScript 엔진은 다른 코드를 계속 실행할 수 있습니다.

콜백 큐

웹 API가 작업을 마치면(예: 타이머가 만료되면) 해당 콜백 함수를 콜백 큐에 넣습니다.

이벤트 루프

이벤트 루프는 호출 스택을 지속적으로 확인합니다. 스택이 비어 있으면 콜백 큐에 있는 함수를 호출 스택으로 옮겨 실행합니다. 이 메커니즘을 통해 지연되거나 비동기적인 작업은 메인 동기 코드가 모두 끝난 뒤에 실행됩니다.