[JS] 실행 컨텍스트(Execute context)에 대해 알아보자

실행 컨텍스트란 무엇인가?

실행할 코드에 제공할 환경 정보들을 모아놓은 객체
= 코드가 실행될 때의 모든 정보를 담아놓은 곳

출처: https://frontj.com/entry/7-Javascript%EC%9D%98-this%EC%99%80-execution-context

Global Execute context(전역 컨텍스트) : 전역 코드로 실행된다

Function Execute context(함수 컨텍스트) : 함수 코드로 실행된다

 

실행 컨텍스트를 이해 하는데 필요한 지식

📌 콜 스택(Call Stack)

LIFO (Last in First out)의 방법을 사용한다
=> 마지막에 들어온 요소가 제일 먼저 나간다 

실행 컨텍스트 단위로 콜 스택에 순서대로 쌓인다

해당 실행 컨텍스트가 끝나면 콜 스택에서 제거된다

 

쉽게 프링글스로 생각해도 좋다

통 안에 차곡차곡 쌓여있는 감자칩들이 스택이다

 

 

📌 Scope

Execute context가 접근할 수 있는 범위 (= 변수가 영향을 끼칠 수 있는 범위)

 

 

📌 Scope Chain

Global Scope, Script Scope, Local Scope가 서로 연결되어 있는 상태

why 연결? 외부 환경의 변수 등의 정보를 참조하기 위해

 

 

📌 해당 context마다 코드를 실행할 때 벌어지는 과정

Javascript에서 변수를 가져올 때, Scope에서 찾는다

 

🌟 Global Execute context(전역 컨텍스트)에서 실행한다면,

✦ 변수 앞에 아무 것도 붙어 있지 않거나 var이 붙으면 => Global Scope으로 들어간다

-> 어디에서나 접근할 수 있다

-> Javascript는 이를 window 객체로 저장한다

 

✦ 변수 앞에 let, const가 붙으면 => Script Scope으로 들어간다 (예외)

why? 수많은 함수와 변수가 이미 존재하는 Global Scope에 들어가게 된다면, 서로 변수 이름을 바꾸거나 지우는 문제가 발생할 수 있기 때문이다

 

🌟 Function Execute context(함수 컨텍스트)에서 실행한다면,

✦ 변수 앞에 var이 붙으면 => Local Scope으로 들어간다

✦ 변수 앞에 let, const가 붙으면 => Local Scope으로 들어간다

 

 

실행 컨텍스트에 담기는 정보

실행 컨텍스트를 생성할 때 VariableEnvironment에 정보를 먼저 담고,

이를 그대로 복사해서 LexicalEnvironment를 만든다

이후에는 주로 LexicalEnvironment를 활용한다

 

그렇다면 VariableEnvironment, LexicalEnvironment는 무엇일까?

VariableEnvironment

선언된 변수들을 포함한 환경을 나타내는 객체

- 현재 컨텍스트 내의 식별자 정보(=environmentRecord)를 갖고 있다

- 외부 환경 정보(=outerEnvironmentReference)를 갖고 있다

- 스냅샷을 유지한다 (= 실시간으로 바뀌지 않는다)

 

📌 식별자 정보란?

var a = 1에서 var a를 뜻함

 

LexicalEnvironment

번수, 함수 등의 정보를 담은 환경을 나타내는 객체

- 현재 컨텍스트 내의 식별자 정보(=environmentRecord)를 갖고 있다

- 외부 환경 정보(=outerEnvironmentReference)를 갖고 있다

- 스냅샵을 유지하지 않는다 (= 실시간으로 변경사항을 저장한다)

 

📌 VE vs LE

두개는 완전히 같은 것이라고 봐도 된다

다만 하나의 차이점이 존재한다

VE와 다르게 LE는 실시간으로 변경사항을 저장한다

 

📌 environmentRecord

현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장(수집)된다

수집 대상 정보 : 함수에 지정된 매개변수 식별자, 함수 자체, var로 선언된 변수 식별자

컨텍스트 내부를 처음부터 끝까지 순서대로 훑어가며 수집한다

 

📌 호이스팅(Hoisting)

식별자를 수집하는 과정

hoist = '끌어 올리다'

'호이스팅한다'라는 것은 '식별자를 맨 위로 끌어 올린다'를 의미한다

 

호이스팅 규칙 1) 매개변수 및 변수는 선언부를 호이스팅한다

기존 코드

예상 출력값 : 1, undefined, 2

// 기존 코드
function a () {
	var x = 1;
	console.log(x); 
	var x;
	console.log(x);
	var x = 2;
	console.log(x);
}
a(1);

 

호이스팅이 적용된 코드

실제 출력값 : 1, 1, 2

// 호이스팅이 적용된 코드
function a () {
	var x;
    var x;
    var x;
    x = 1;
	console.log(x); 
	console.log(x);
	x = 2;
	console.log(x);
}
a(1);

 

호이스팅이라는 개념을 모르는 상태로 코드를 봤을 때는

1, undefined, 2이 출력된다고 예상할 수 있었다

하지만 호이스팅으로 인해 실제 출력되는 값은 1, 1, 2이다

 

호이스팅 규칙 2) 함수 선언은 함수 전체를 호이스팅한다

기존 코드

예상 출력값 : 오류, 'bbb', 함수 b

// 기존 코드
function a () {
	console.log(b);
	var b = 'bbb';
	console.log(b);
	function b() { }
	console.log(b);
}
a();

 

호이스팅이 적용된 코드

실제 출력값 : 함수 b, 'bbb', 'bbb'

// 호이스팅이 적용된 코드
function a () {
	var b;
    function b() { };
	console.log(b);
	b = 'bbb';
	console.log(b);
	console.log(b);
}
a();

🚨 주의사항

함수 선언문이 호이스팅 되는 경우를 주의해야된다

why? 함수 선언문이 호이스팅 될 때에는 함수 자체가 호이스팅 되기 때문이다

=> 함수 이전에 써놓은 코드들에 영향을 끼칠 수 있다

So, 함수 선언문보다 함수 표현식을 사용하는 것이 좋다

 

함수 선언문과 함수 표현식이 호이스팅 되는 방식이 다르다

함수 선언문일 경우, 함수 자체가 호이스팅된다

함수 표현식일 경우, 식별자 부분만 호이스팅된다

 

기존 코드

console.log(sum(1, 2));
console.log(multiply(3, 4));

// 함수 선언문 sum
function sum (a, b) {
	return a + b;
}

// 함수 표현식 multiply
var multiply = function (a, b) {
	return a + b;
}

 

호이스팅이 적용된 코드

// 함수 선언문 sum
// 함수 자체가 호이스팅됨
function sum (a, b) {
	return a + b;
}

// 식별자만 호이스팅됨
var multiply;

console.log(sum(1, 2));
console.log(multiply(3, 4));

// 함수 표현식 multiply
multiply = function (a, b) {
	return a + b;
}

 

📌 outerEnvironmentReference

 외부 환경의 참조 정보

outer은 스코프 체인이 가능하도록 한다

 

this binding

this가 특정 값을 참조하도록 설정하는 과정

 

this binding은 호출 방식에 따라 동적으로 결정된다

ex) 함수를 호출하는가, 객체의 메소드를 호출하는가에 따라 달라진다

 

명시적 this binding

this가 가리키는 대상을 명확하게 설정한다

call, apply, bind

 

📌 call

call을 통해 this가 가리키는 것을 명확하게 설정해줄 수 있다

var func = function (a, b, c) {
  console.log(this, a, b, c);
};

// no 명시적 binding
func(1, 2, 3); // 출력: Window{ ... } 1 2 3

// 명시적 binding
// func 안에 this에는 {x: 1}이 binding됨
func.call({ x: 1 }, 4, 5, 6); // 출력: { x: 1 } 4 5 6

 

📌 apply

call과 작동하는 방식이 동일하다

다만, 뒤에 오는 인자들을 []로 묶어줘야 한다

var func = function (a, b, c) {
  console.log(this, a, b, c);
};

// 명시적 binding
// func 안에 this에는 {x: 1}이 binding됨
func.apply({ x: 1 }, [ 4, 5, 6 ]); // 출력: { x: 1 } 4 5 6

 

📌 bind

기능 1) this를 미리 적용한다

var func = function (a, b, c, d) {
  console.log(this, a, b, c, d);
};

// noBind
func(1, 2, 3, 4) // 출력: global 1 2 3 4

// Bind
// 함수에 this를 미리 적용함
var bindFun01 = func.bind({ x: 1 });
bindFun01(5, 6, 7, 8); // 출력: { x: 1 } 5 6 7 8

 

기능 2) 미리 인자를 넣어놓을 수 있다 (= 부분 적용 함수)

var func = function (a, b, c, d) {
  console.log(this, a, b, c, d); // this === global
};


// 부분 적용 함수
var bindFun02 = func.bind({ x: 1 }, 9, 10);
bindFun02(11, 12); // 출력: { x: 1 } 9 10 11 12

 

 

실행 컨텍스트가 필요한 이유

자바스크립트 엔진이 코드를 평가하고 실행할 때 중요한 역할을 한다

 

(1) 코드 실행 환경 관리

어떤 코드가 실행되고 있는지, 해당 코드에서 사용 가능한 변수와 함수는 무엇인지 관리한다

 

(2) 스코프와 변수 관리

스코프 체인을 통해 특정 변수나 함수가 어디에서 선언되었는지 확인한다

 

(3) Hoisting 처리

코드가 실행되기 전에 변수와 함수 선언을 메모리에 미리 저장하여 Hoisting을 처리한다

 

(4) this 바인딩 결정

코드 실행 시점에 this 키워드가 가리키는 객체를 결정한다

 

---

[참고 자료]

https://youtu.be/QkCNba92Vqo?si=b9JHhpcvMt8o9gIk

https://youtu.be/QtOF0uMBy7k?si=k40651zn8DwFCpHD

https://www.omin.dev/posts/execution-context#%EC%8B%A4%ED%96%89-%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%8A%A4%ED%83%9D