일단 자바스크립트 엔진에 대해 알아가기전에 실행 컨텍스트(Execution Context)에 대해 먼저 알아야 한다. 그 이유는 자바스크립트는 기본적으로 실행 컨텍스트를 만들고 변수, 함수, 코드들을 실행 컨텍스트에 저장하여 코드를 실행하기 때문이다.
실행 컨텍스트를 먼저 알아보자 !
❓ 실행 컨텍스트(Execution Context)
- js엔진이 javascript코드를 실행할때 컴퓨터로부터 할당받은 메모리 공간에 필요한 정보(코드, 변수, 함수 등)를 저장해 두는 공간이다.
자바스크립트는 Execution Context를 만들어 저장한다.
📗 실행 컨택스트의 종류
1) Global Excution Context
- js코드를 실행시키게 되면 기본적으로 생성하는 Context이다.
- 현재 실행되는 코드에서 함수안에 있지 않은 모든 정보를 담는다.
- js 프로그램마다 단 하나의 GEC(Global Execution Context)만 존재 가능하다.
- js 코드 실행이 마무리 될 때 까지 존재한다.
2) Function Execution Context
- js 코드를 실행 중 함수가 실행될 때 마다 생성되는 Context → 여러개 생성 가능
- 현재 실행되는 함수의 인자값과 그 안에서 선언된 모든 정보를 담는다.
Garbage Collection과 Memory 해제
- 참조 횟수(Reference count)가 0이 된 개체(변수, 함수)는 주기적으로 메모리에서 지운다.
- Mark and sweep 알고리즘 사용
📗 실행 컨텍스트의 단계
1. 생성 단계(Creation Phase)
- 해당 execution context에서 사용할 코드, 변수, 함수들을 준비해두는 단계이다.
2. 실행 단계(Execution Phase)
- 코드를 한줄한줄 실행하면서 이미 준비해둔 변수, 함수에 계산완료된 값을을 할당하는 단계이다.
❓ JS엔진 실행순서
JS엔진 실행순서를 알아보기 전에 각 영역들에 대해 알아가고 어떻게 돌아가는지 알아보자.
❓ call stack
call stack을 알기 전에 stack에 대해 알아보자.
📗 stack
- 여러 개 데이터를 저장할 수 있는 자료구조이다.
- LIFO의 규칙으로 데이터를 추가 제거한다.
- Stack에 담을 수 있는 요소의 개수에는 제한이 있다.
- 이를 초과하게 되면 Stack Overflow 오류 발생한다.
📗 call stack
- js엔진이 Execution Context(FEC)를 관리하기 위해 필요하다.
- 새로운 Excution Context를 생성해야할 때 Push한다.
- 실행이 끝난 Execution Context를 제거할 때 Pop한다.
function add(a, b){
return a + b;
}
function average(a, b){
return add(a, b)
}
let x = average(10, 20);위 예제 코드로 call stack에 쌓이고 빠지는 과정을 알아보자.
- 자바스크립트가 시작되면 main함수는 기본적으로 시작된 상태이다.
- x라는 변수에 average함수가 실행이 되어 average함수가 call stack에 들어온다.
- 그 다음 callback 함수로 add함수가 실행되어 add 함수가 call stack에 쌓인다.
- add함수 실행이 끝나고 결과를 return 해주면서 add함수가 call stack에서 빠진다.
- average함수에 결과를 return 해주면서 average함수가 call stack에서 빠진다.
- 함수들을 다 실행했기 때문에 main함수도 call stack에서 빠진다.
이렇게 뒤에서부터 빠지는 이유는 LIFO 구조이기 때문에 나중에 들어온 것 부터 stack에서 빠지게 된다.
❓ event loop
event loop를 알아가기 전 쓰레드에 대해 알아보자.
📗 쓰레드(Thread)
- 프로세스가 작업을 실행하는 코드 묶음의 최소 단위이다.
📗 다중 쓰레드(Multi-thread)
- 프로세스가 여러개의 쓰레드를 만들어서 동시에 작업을 처리하는 것이다.
- 작업 스케줄러에 의해 쓰레드가 동적으로 생성, 재활용, 소멸 된다.
- 쓰레드 간 자원 공유가 가능하다.
📗 JavaScript 런타임의 코드 실행 방식
- js 엔진은 single-threaded 모델을 사용한다.
- 한 시점에 하나의 코드만을 실행할 수 있다.
- Non-blocking 방식으로 작업을 실행하여 동시성을 얻을 수 있다.
📗 Non-blocking 작업 예제
- setTimeOut()를 사용하여 함수 호출
- ajax를 이용한 http request를 호출했을 경우 응답 처리
- 유저의 웹페이지 Event 발생(클릭, 드래그 등)으로 인한 함수 호출
- DB 서버로 요청을 날리는 작업(Node.js)
❓ Web API
- javascript에서 사용할 수 있도록 웹 브라우저가 제공하는 API이다. ex) setTimeout()
❓ Callback Queue
- javascript runtime에서 순차적으로 실행되어야 할 작업들을 Function Execution Context의 형태로 임시 보관해둘 수 있는 Queue이다.
Runtime Environment : 코드의 실행환경
Non-blocking : A함수에서 B함수를 호출했을 때, B함수는 제어권을 곧바로 A로 되돌려주고 A는 다음 작업을 이어가는 것
동시성(Concurrency) : 여러 작업을 동시에 처리하는 성질
API(Application Programming Interface) : 소프트웨어를 개발할 때 활용할 수 있는 코딩 인터페이스와 명세
Callback Function : 나중에 실행될 함수
Queue : 선형 자료구조이며 요소추가, 제거 시 FIFO 규칙을 가진다.
이제 각 영역들에 대해 알아보았으니 어떤 흐름으로 동작하는지 알아보자 !
JS엔진 동작하는 사진이 너무 위에 있어서 다시 가지고 왔다. 일단 코드를 먼저 보면
console.log("Go")
setTimeout(() => {
task();
}, 1000)
console.log("DONE");1 . console.log("Go")가 실행되면서 call stack에 쌓이고 실행됐기 때문에 바로 빠져나간다.
2 그 다음 setTimeout 함수가 실행이 되는데 setTimeout 함수는 Web API이기 때문에 call stack에 쌓이고 바로 Web API에 task 함수가 1초뒤에 실행해달라고 요청을 한다. call stack처럼 쌓인다.
3. 그러면서 callback queue에 task함수가 들어오고
4. console.log("DONE")이 call stack에 들어오고 실행이 되면서 call stack에서 빠지게 되고
6. 그 다음 task함수가 call stack에 들어와 실행하게 되고 그 다음 call stack에서 빠지게 된다.
처음에는 무슨소리인가 싶었지만 js엔진의 각 영역들에 먼저 파악하고 동작하는 방법을 보게 된다면 더욱 쉽게 이해할 수 있을 것이다.
