[JS] 비동기 프로그래밍

❓pending
아직 결과를 반환하지 않은 상태라고 볼 수 있다. 아직 '비동기' 작업이 진행중이고 성공할지 실패할지 모르는 단계이다. 
만약 어떤 x 에 A라는 코드가 작업된 결과값을 받는다고 할 때 x에 아직 결과 값이 반환되지 않았다고 하더라도 pending 상태인지 알 수 있다면 x 의 존재는 의미가 있는 것이라고 볼 수 있다는 것이다. 

 

동기 vs 비동기

보통 다른 언어들은 비동기 프로그래밍을 실행할 때 thread를 이용한다. (멀티 스레드 환경- 실행 컨텍스트 스택이 여러개 라는 뜻)

하지만 js 는 싱글 스레드 환경이다. (콜 스택이 한개 뿐이다)

동기 (Synchronous)

한번에 하나의 함수만 실행된다. (나머지는 blocking 된다)

싱글 프로세스 내의 싱글 스레드이다. 

비동기 (Asynchronous)

한번에 하나의 함수만 실행된다. (I/O를 수행하는 비동기 함수는 background에 넘긴다 -> non-block i/o)

js 는 다른 언어와 다르게 싱글 스레드 방식인데 어떻게 비동기를 수행하는가? -> Muti Process 방식

 

❓Non-Block I/O
입/출력 작업이 완료되길 기다리지 않고 다음 작업을 즉시 실행하는 방식이다. 

❓ i/o를 수행하는 비동기함수는 background 에 넘긴다 ???
JavaScript는 자체적으로 멀티프로세스를 만들지 않고,
OS가 제공하는 프로세스나 스레드 자원(libuv, child_process 등)에 의존하여 백그라운드에서 작업을 비동기로 처리한다.
이를 cluster 방식 이라고 한다. 여러 개의 프로세스를 생성해, 싱글 스레드의 한계를 극복하고 병렬 처리를 가능하게 한다.

 

Flow

여기서의 webapi 는 브라우저 기준의 background 라고 보면된다. 

✅ 1. 자바스크립트 파일 실행

• node a.js 혹은 <script src="./a.js">로 실행되면
  → Global Execution Context가 생성되고 Call Stack에 쌓인다.

✅ 2. console.log('START')

• Call Stack에 console.log('START')가 올라가고 즉시 실행된다 → START 출력됨
• 실행 후 스택에서 제거된다.

✅ 3. setTimeout(cb, 1000)

• setTimeout은 WebAPI 또는 Node API Container에 의해 처리된다.
• 콜백 함수 cb()는 1000ms 동안 Background + Scheduler에 등록되고
• JS 엔진은 기다리지 않고 바로 다음 줄로 이동한다.

 

⏱ 이때 JS는 cb()를 실행하지 않고 “예약”만 해둡니다.

 

✅ 4. console.log('END!')

• Call Stack에 올라가서 바로 실행됨 → END! 출력된다. -> 실행 후 Call Stack 비워진다.

✅ 5. 비동기 콜백 큐로 이동

• 1000ms가 지나면 cb() 콜백 함수는 Callback Queue(Task Queue) 로 들어갑니다.
• 하지만 바로 실행되지 않음!

✅ 6. Event Loop 동작

• Call Stack이 비어 있는지 Event Loop가 계속 감시한다.
• 스택이 비어 있으면 → Queue에 있던 cb()를 꺼내 Call Stack에 올린다.

✅ 7. cb() 실행

• 콜백 함수 cb()가 Call Stack에서 실행됨 → Callback! 이 출력된다.
• 실행 후 스택에서 제거됨 → 전체 실행 종료