먼저, 자바스크립트 엔진에 대해 알아야 합니다.
Memory Heap
과 Call Stack
로 나뉘어 있습니다. Memory Heap
Call Stack
운영체제 위에서 연속적으로 실행되고 있는 프로그램
독립적으로 메모리에서 실행 합니다.
각각의 프로세스는 자원(리소스)들이 정해져 있습니다.
프로세스 안에는
code
: 프로그램을 실행하기 위한 코드stack
: 프로세스 안에서 함수들이 어떤 순서로 실행되어야 하는지, 함수가 끝나면 어디로 다시 돌아가는지에 대한 정보Heap
: 오브젝트를 생성하거나 데이터를 만들 때, 데이터들이 저장되는 공간 [ 동적으로 할당된 변수가 저장 ]Data
: 전역 변수나 스태틱 변수들이 할당한 프로세스 안에서 여러 개 동작할 수 있는데 각각 저마다 해야 되는 임무를 받습니다.
즉, 한 프로세스 안에서 동시에 기능을 수행하는 여러 개의 Thread가 생성
예시 ) 프로그램에서 음악을 들으면서 사진을 편집할 수 있는 어플리케이션이 있다면,
각각 스레드는 음악을 재생하는 스레드와 사진을 편집하는 스레드가 있습니다.
기본적으로 싱글 스레드 기반 언어 입니다.
즉, 호출 스택이 하나. 따라서 한 번에 하나의 작업만 처리가 가능 합니다.
하지만, 자바스크립트가 동작하고 있는 브라우저 위에는 즉, 브라우저라는 프로그램 안에서는 여러 가지의 스레드가 들어있습니다.
web API's 와 Event Loop 등을 사용하여 멀티 스레딩이 가능하다.
Call Stack 과 Task Queue의 상태를 체크 보면서 Call Stack이 실행 중이면 기다렸다가
Call Stack의 함수가 모두 실행되고 완전히 비워지면
Task Queue의 첫 번째 callback 함수를 Call Stack에 하나씩 추가하여
자바스크립트 엔진이 차례대로 수행할 수 있도록 해줍니다.
자바스크립트 런타임 환경에서 비동기적으로 실행되는 callback 함수를 보관하는 공간
Call Stack 이 빈 상태가 되면, Event Loop
에 의해 Task Queue에 저장된 순서대로 하나씩 Call Stack으로 이동 합니다.
function first(){
console.log('first')
}
function second(){
console.log('second')
}
function thrid(){
console.log('thrid')
}
first()
setTimeout(()=> second(),2000)
thrid()