인터뷰에서 나온 질문이 싱글 스레드인 자바스크립트에서 어떻게 비동기 처리가 가능한가? 였는데
해당 내용에 대해 어렴풋이 본 기억만 있어 정확히 설명하지 못해 내용을 정리해야겠다.

Javascript는 원래 웹 브라우저에서 실행되는 스크립트 언어로 개발되었기 때문에 단일 쓰레드 모델로 설계 되었다.
웹 페이지에서 Javascript 코드가 실행될 때 브라우저는 해당 페이지의 GUI 쓰레드에서 Javascript 코드를 실행시킨다.

이 때 js는 어떻게 비동기 처리를 하는걸까?

동작 순서

---

1. 파싱 과정을 거쳐 문법적인 에러를 체크한다.
2. 실코드 실행을 위해 함수, 전역 코드, Eval 코드등 실행 컨텍스트(Execution Context)를 생성한다.
3. 현재 실행 컨텍스트의 변수와 상위 스코프의 변수를 연결하여 스코프 체인(Scope Chain)을 생성한다.
4. 변수와 함수의 선언문을 미리 처리한다. 이 때 선언문은 코드의 상단으로 이동하여 처리된다.
5. this는 함수 호출 패턴에 따라 바인딩된다.
6. 실행 순서를 스택(Stack)에 저장하고 실행한다. 비동기적인 코드는 이벤트 큐(Event Queue)에 등록되어 나중에 실행된다.

js는 싱글 스레드이기 때문에 하나의 스택(stack)만을 가지고 있다.
초반에 읽어들인 함수, 상수, 변수 등을 스택에 정리해두고, addEventListener, setTimeout, promise, postMessage 같은 함수들은 이벤트 큐(Event Queue)에 등록되어 사용된다.

스택(Stack)에 저장되어 있는 모든 함수를 실행하면 이벤트 큐(Event Queue)를 실행하게 된다.

예제

case 1.

console.log("one");
console.log("two");
console.log("three");

결과

one
two
three

순서대로 출력된다.

case 2.

console.log("one");

setTimeOut(() => {
	console.log("two");
}, 0);

console.log("three");

결과

one
three
two

setTimeout은 스택이 아닌 이벤트 큐에 등록되기 때문에 스택을 먼저 처리한 후 실행된다.

case 3.

console.log("one");

setTimeOut(() => {
	console.log("two");
}, 0);

console.log("three");

for(let i = 0; i < 5; i++){
	console.log("for: ", i);
}

결과

one
three
for: 0
for: 1
for: 2
for: 3
for: 4
two

스택에 정리된 리스트를 먼저 없애고 나서 setTimeOut이 동작한다.

정리

---

js에서는 일반적으로 비동기적인 처리를 많이 사용하고, 이벤트 큐를 통해 처리되는 함수들은 우리가 직접 호출하지 않기에 함수의 동작 순서를 완벽하게 제어할 수 는 없다. 함수의 실행 순서를 완벽하게 제어할 수는 없지만 적절한 방법으로 콜백 함수나 Promise, async/await 등을 사용하여 비동기적인 처리를 수행하고, 이벤트 큐(Event Queue)를 효율적으로 활용하여 원하는 동작을 구현할 수 있다.