[JS/기초] 자바스크립트의 실행컨텍스트(Execution contexts)와 콜스택(Call Stack)

오늘은 자바스크립트의 실행컨텍스트(Execution contexts)와 콜스택(Call Stack)에 대해서 알아볼 것이다.

 

[Keyword]

#전역컨텍스트 #함수컨텍스트 #함수호이스팅 #클로저 #스코프 #콜스택 #이벤트루프

컨텍스트의 순서

전역 컨텍스트 → 변수객체, scope chain, this

컨텍스트 원칙 4가지

1. 먼저 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트가 생긴다
2. 컨텍스트 생성시 컨텍스트 안에 변수객체(argument, variable), scope chain, this 가 생성된다.
3. 컨텍스트 생성 후 함수가 실행되는데, 사용되는 변수들은 변수 객체 안에서 값을 찾고, 없다면 스코프체인을 따라서 올라가며 찾는다.
4. 함수 실행이 마무리되면 해당 컨텍스트는 사라진다(단, 클로저 제외). 페이지가 종료되면 전역컨텍스트가 사라진다.

1. 전역컨텍스트(Global Execution Context)

자바스크립트 엔진이 코드를 실행할 때 처음으로 생성되는 실행 컨텍스트(★생성시점)

 

[구성요소]

: 아무런 코드가 없어도 두 가지 요소를 가진다.

• global object
• this ( 브라우저: Window, Node: global )

브라우저(크롬)에서의 this

 

[실행 컨텍스트의 2가지 단계 — 생성, 실행]

1–1 생성단계

• global object 생성
• this변수 object 생성
• 변수와 함수를 위한 메모리공간 확보
• 변수 선언 부분에 undefined(기본값)로 초기화, 선언식 함수를 메모리 공간에 올림

1–2 실행단계
: 실질적으로 자바스크립트 엔진이 코드를 한 줄씩 읽고 실행하는 단계

• 엔진이 코드를 한 줄씩 실행
• 실제 값을 메모리 공간에 저장

실행단계 전 후로 담긴 값이 달라지는 모습 (getUser는 선언식 함수이므로 함수 전체가 메모리에 올라감)

 

2. 함수 실행컨텍스트

함수가 호출될 때마다 생성되는 컨텍스트(★생성시점)

 

1–1 생성단계

• argument object 생성(★글로벌 실행컨텍스트와의 차이점, global object 아님!)
• this 변수 object 생성
• 변수와 함수를 위한 메모리 공간 확보
• 변수 선언 부분에 undefined로 초기화, 선언식 함수를 메모리 공간에 올림

➡️ 함수 실행컨텍스트는 함수가 호출되면 실행 스택에 쌓였다가, 실행을 마치면 콜스택에서 제거된다.

함수호출 ➡ 새로운 함수 실행 컨텍스트가 콜스택에 쌓임 ➡ 생성단계 ➡ 실행단계 ➡ 콜스택에서 제거

function foo() {
var bar = "Declared in foo"
}

foo()

console.log(bar) //VM191:7 Unaught ReferenceError: bar is not defined at <anonymous> 제거된 이후이기 때문

- 힙 : 객체가 저장되는 곳 (여기서는 선언한 함수 func1, func2, func3 가 저장됨)

 

- Web API: Web API는 브라우저에서 제공하는 API들이다. 위의 그림에서는 자바스크립트의 런타임환경을 설명하고 있기 때문에 web API가 등장했다. 만약 node js 런타임 환경을 설명했다면 다른 API로 표시했을 것이다. 대표적인 예시로는 setTimeout 함수가 있다.

 

- 콜백 큐: Callback Queue는 함수를 저장하는 자료구조이다. Call stack과 다르게 가장 먼저 들어온 함수를 가장 먼저 처리한다. 특정 이벤트에 따른 콜백 함수를 정의하면, 콜백 함수는 Callback Que에 저장된다.

 

- Event Loop: Event Loop는 call stack이 다 비워지면 callback que에 존재하는 함수를 하나씩 호출 스택으로 옮기는 역할을 한다.

 

- Event Loop: Event Loop는 call stack이 다 비워지면 callback que에 존재하는 함수를 하나씩 호출 스택으로 옮기는 역할을 한다.

var func1 = () => {
func2();
console.log('Call Func1');
}
var func2 = () => {
func3();
console.log('Call Func2');
}
var func3 = () => {
console.log('Call Func3');
}
func1();//결과
//Call Func3
//Call Func2
//Call Func1

함수 호이스팅(hoisting)

hoisting 의 뜻은 “끌어올리다” 이지만, 의미그대로 상단에 선언이 된다고 생각하면 NO

생성단계에서 변수가 undefined로 값이 초기화되는 것을 의미한다.

작성자: Caffè mocha (Yasmin) ☕️

참고링크 1, 참고링크 2, 참고링크 3, 참고링크 4

 

 

By. Team Coffee Study (medium)

web developers, knowledge sharing, javascript