자바스크립트는 싱글 스레드로 동작한다.
🔍 싱글 스레드란?
싱글 스레드란 한번에 하나의 일만 처리하는 것이다.
그렇기때문에 자바스크립트는 원칙적으로 동기적(한번에 하나의 일만 처리) 하지만 브라우저가 동작하는것을 살펴보면 한번에 여러가지의 일이 처리되는 것처럼 느껴진다.
어떻게 이런게 가능한 것일까??
위는 브라우저 환경을 그림으로 표현한 것이다.
🔍 자바스크립트 엔진이란?
자바스크립트 엔진은 자바스크립트를 실행하는 환경을 말한다. 크롬의 V8, 파이어폭스의 Spider Monkey, Edge의 Chakra 등이 있다.
🔍 자바스크립트 엔진의 힙, 콜스택 영역
- Heap
힙영역은 객체가 저장되는 메모리의 공간이다. 콜 스택의 요소인 실행 컨텍스트는 힙에 저장된 객체를 참조한다.
원시값은 크기가 정해져있지만 객체는 크기가 정해져있지않다가 할당해야할 메모리를 런타임에 동적할당을 하기때문에, 힙은 구조화가 되어있지 않다.
- Call stack
콜 스택은 자바스크립트가 실행되며, 생성되는 실행 컨텍스트가 추가/제거 되면서 저장하는 자료구조를 일컫는다.
함수가 호출되면 함수 실행 컨텍스트가 콜 스택에 푸시되어 순차적으로 실행된다.
자바스크립트 엔진은 단 하나의 콜스택을 사용하기 때문에 최상위 실행 컨텍스트(실행중인 실행 컨텍스트)가 종료되어 제거되기 전까지는 다른 어떤 태스크도 실행되지 않는다.
console.log('1번째');
setTimeout(() => {
console.log('2번째');
}, 1000);
console.log('3번째')
//1번째 3번째 2번째 순으로 출력 위의 코드처럼 코드는 순차적으로 실행되지만 결과값은 예상과는 다르게 1번째 3번째 2번째 순으로 출력이 된다.
위에서 썼듯이 자바스크립트는 싱글 스레드이기때문에 한번에 하나의 태스크만 처리할 수있는데, setTimeout같이 1초후에 실행되는 함수는 콜백 큐(대기실)로 잠시 보낸후에, 밑에 바로바로 실행되는 함수들을 처리한다.
- Callback Queue (대기실)
setTimeout 이나 setInterval 같은 비동기 함수의 콜백함수 또는 이벤트리스너가 일시적으로 보관되는 영역이다.
- Microtask Queue
프로미스의 후속 처리 메서드의 콜백 함수가 일시적으로 보관되는 대기실이다.
- Animation Frames
requestAnimaionFrame 의 콜백 함수가 일시적으로 보관되는 대기실이다.
- Event loop (주기적으로 체크해서 콜백큐에 있는 함수를 콜스택으로 이동시켜주는 역할)
이벤트 루프는 콜 스택에 현재 실행중인 실행 컨텍스트가 있는지, 그리고 콜백 큐에 대기중인 함수(콜백 함수, 이벤트 핸들러 등)이 있는지 반복해서 확인하는 역할을 한다.
만약 콜스택이 비어있고, 콜백큐에 대기중인 함수가 있다면 이벤트 루프는 순차적으로 콜백큐에 대기중인 함수를 콜스택으로 이동시킨다.
이처럼 콜백큐 ( 비동기 함수들이 대기하는 대기실)와 이벤트 루프( 콜백큐에 있는 함수들을 콜스택으로 옮겨줌)가 존재함으로써 자바스크립트가 싱글스레드인데도 불구하고 동시에 여러가지일들을 하는것처럼 보이는 것이다.
