[4주차] 자바스크립트 제어 흐름

2월 9일 자 학습 내용 정리입니다.

 

 

✅ 자바스크립트의 제어 흐름

자바스크립트는 다른 멀티 스레드 프로그래밍 언어(ex. JAVA, c++)와는 다른 방식으로 비동기 동작을 처리한다.

자바스크립트 엔진은 하나의 메인 스레드로 구성되어 있는데 메인 스레드는 코드를 읽어 한줄씩 실행한다.

그리고 브라우저 환경에서 유저 이벤트를 처리하고 화면에 그리는 역할을 담당한다.

 

setTimeout(() => {
    console.log("Hello World");
}, 1000);

 

동일한 setTimeout 구문에 대해서 자바와 자바스크립트를 비교해보자면 다음과 같다.

 

자바스크립트의 경우 setTimeout 구문을 만나면 비동기 API가 작동해 함수를 큐에 저장한다.

이 큐는 자바스크립트 엔진 위가 아닌 별도의 환경에서 동작하며 1000ms이 지났을 때 console.log 구문을 task queue에 넘기고 실행한다.

 

자바의 경우 setTimeout 구문을 만났을 때 새로운 멀티 스레드를 생성하고 1000ms이 지날 때까지 아무 동작도 하지 않고 기다린다.

 

 

✅ 동기적 제어 흐름

동기적 제어 흐름은 현재 실행 중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는 것을 의미한다.

위에서 살펴 보았듯이 멀티 스레드 프로그래밍 언어가 setTimeout과 같은 비동기 처리를 동기적으로 처리하여 해당 시간동안 다음 줄의 코드를 실행하지 않는다.

 

분기문, 반복문, 함수 호출 등이 동기적으로 실행되며 코드의 흐름과 실제 제어 흐름이 동일하다.

싱글 스레드 환경에서는 메인 스레드를 긴 시간동안 점유하면 프로그램이 멈춘다.

 

동기식 제어 흐름

 

 

✅ 비동기적 제어 흐름

비동기적 제어 흐름은 현재 실행 중인 코드가 종료되기 전에 다음 라인의 코드를 실행하는 것을 의미한다.
Promise, 콜백함수를 호출하는 함수 등은 비동기적으로 실행된다.
코드 흐름과 실제 제어 흐름이 다르며 비동기 작업을 기다리는 동안 메인 스레드는 다른 작업을 처리한다.

 

비동기식 제어 흐름

 

 

✅ 비동기 처리 모델과 이벤트 루프

자바스크립트 엔진은 비동기 처리를 제공하지 않는 대신 API를 통해 비동기 처리가 가능하게 한다.

비동기 API에는 setTimeout, XMLHttpRequest, fetch 등의 Web API가 존재하며 node.js의 경우에는 파일 처리 API, 암호화 API 등을 제공한다.

 

비동기 처리 모델의 진행 과정은 다음과 같다.

 

비동기 처리 모델

 

자바스크립트 코드 실행 시 메인 스레드의 Call Stack에는 함수들의 실행 컨텍스트가 쌓이게 된다.

이때 비동기 코드가 호출되었다면 자바스크립트 엔진 외부에 존재하는 비동기 환경에서 task queue와 job queue를 사용할 수 있다.

 

API 모듈은 비동기 요청을 처리 후 정해진 시간이 지난 뒤 task queue에 callback 함수를 넣는다.

그동안 자바스크립트 엔진은 Call Stack에 쌓인 것들을 처리하는데 Call Stack에 남아있는 것이 없다면 이벤트 루프를 통해 task queue를 확인하고 task queue 안에 쌓인 것들을 Call Stack으로 가져와 실행한다.