- 자바스크립트의 제어 흐름 방식
- 자바스크립트의 동기적 처리방식
- 자바스크립트의 비동기적 처리방식
- 용어 정리
1. 자바스크립트의 제어 흐름 방식
자바스크립트 엔진은 하나의 메인 스레드로 구성되어 있으며(=싱글스레드) 메인 스레드는 코드를 한 줄씩 읽어 실행한다.
이와 달리 JAVA, C++은 멀티 스레드로 구성되어 비동기 작업을 수행하는데 자바스크립트는 이것과 다른 방식으로 비동기 작업을 수행한다.
즉, 자바스크립트는 동기 처리 와 비동기 처리 두 가지 방식을 가지고 있다.
2. 자바스크립트의 함수 처리 방식 - 동기적 처리 ver
우선 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖기 때문에 함수를 실행할 수 있는 창구는 하나이며 동시에 2개 이상의 함수를 실행할 수 없다. * synchronous이를 싱글 스레드 방식 동작이라고 하며 한 번에 하나의 태스크만 실행할 수 있어 처리에 시간이 오래 걸리는 테스크를 실행하면 블로킹(작업중단)이 발생한다.
동작 방식의 예시를 살펴보자
function sleep(func, delay) {
const dealyUntil = Date.now() + delay; //1. 현재 시간 + 경과 시간
while( Date.now() < DealyUntil ); // 2. 현재 시간보다 1에서의 시간이 작으면 계속 반복
func(); // 3. 일정 시간 경과 후 콜백 함수 호출
}
function greeting(){
console.log("Hello");
}
function closing(){
console.log("See you");
}
sleep(greeting, 3 * 1000); // 4. greeting 함수를 3초 이상 실행
closing(); // 5. 3초 경과 후 closing 함수 호출
// * sleep 함수는 일정 시간이 지난 후 콜백 함수를 호출한다.^ 위 코드와 같이 현재 실행 중인 태스크가 종료할 때 까지 다음 실행될 태스크는 대기하게 된다. 그러므로 동기 처리 방식은 태스크를 순차적으로 처리하며 실행 순서가 보장된다.
3. 자바스크립트의 함수 처리 방식 - 비동기적 처리 ver
자바스크립트 엔진은 비동기 처리를 제공하지 않지만 정해진 함수를 통해 비동기적 처리를 할 수 있다.이 함수들을 비동기 API 라고 한다.(node.js의 경우 파일처리 API, 암호화 API 등을 제공) * asynchronous
1. setTimeout
2. setInterval
3. HTTP 요청
4. event handler
동기적 처리에서 사용했던 sleep 함수 대신 setTimeout을 사용하여 코드를 수정해보자
function greeting(){
console.log("Hello");
}
function closing(){
console.log("See you");
}
setTimeout(greeting, 3 * 1000); // 2. 3초 뒤 greeting 함수 실행
closing(); // 1. 블로킹 당하지 않으므로 먼저 closing 함수가 실행됨
^ 위 코드와 같이 비동기 API를 사용했을 때는 함수를 어떤 큐에 저장하고 자바스크립트 엔진이 아닌 별도의 큐에서 콜백 함수를 실행한다. 그래서 자바스크립트의 메인 스레드는 그 태스크 큐를 확인한 뒤 코드를 가져와서 실행한다.
* 스레드 : 프로세스 내에 실행되는 작업의 단위
* 실행 컨텍스트 : 자바스크립트의 동작 원리를 담고 있는 개념
* 스택 : 마지막에 입력된 데이터가 먼저 취득 됨 (LIFO, Last In First Out)
* 큐 : 먼저 입력된 데이터부터 순차적으로 취득됨 (FIFO, First In First Out)
두 줄 소개