실행 컨텍스트란?

scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다.

실행 컨텍스트는 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념 이라고 정의한다.
풀어서 설명하면 실행 가능한 코드가 실행되기 위해 필요한 환경 이라고 말할 수 있다고 한다.

(실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓는데 함수를 실행할 때마다, 그 함수에 대한 새로운 실행 컨텍스트를 생성하여 자신만의 고유한 컨텍스트(환경) 에서 실행된다고 한다.)

그렇다면 이 실행가능한 코드란 뭐냐면?

✅실행 가능한 코드

• 전역 코드 : 전역 영역에 존재하는 코드, 콜스택에 전역 컨텍스트는 하나뿐, 실행 하자마자 전역부터 활성화 됨.
• eval 코드 : eval 함수로 실행되는 코드 (요즘엔 거의 안쓰인다고 한다. [참고]절대 쓰지 말 것)
• 함수 코드 : 함수 내에 존재하는 코드, 함수가 호출이 되어야 실행 컨텍스트가 만들어진다.

이렇게 된다.

일반적으로 실행 가능한 코드는 전역 코드와 함수 내 코드 라고 한다.

자바스크립트 엔진은 코드를 실행하기 위하여 실행에 필요한 여러가지 정보를 알고 있어야 한다. 실행에 필요한 여러가지 정보란 아래와 같은 것들이 있다.

✅실행에 필요한 정보

• 변수 : 전역변수, 지역변수, 매개변수, 객체의 프로퍼티
• 함수 선언
• 변수의 유효범위(Scope)
• this

✅실행 스택

console.log("전역 컨텍스트입니다.");

function func1(){
	console.log("func1 입니다.");
}

function func2(){
    func1();
    console.log("func2 입니다.");
}
func2();

• 결과

  전역 컨텍스트입니다.
  fun1 입니다.
  fun2 입니다.

위 코드를 실행하면 아래와 같이 실행 컨텍스트 스택(Stack)이 생성하고 소멸한다. 현재 실행 중인 컨텍스트에서 이 컨텍스트와 관련없는 코드(예를 들어 다른 함수)가 실행되면 새로운 컨텍스트가 생성된다. 이 컨텍스트는 스택에 쌓이게 되고 컨트롤(제어권)이 이동한다.

1. 컨트롤이 실행 가능한 코드로 이동하면 논리적 스택 구조를 가지는 새로운 실행 컨텍스트 스택이 생성된다. 스택은 LIFO(Last In First Out, 후입 선출)의 구조를 가지는 나열 구조이다.

2. 전역 코드(Global code)로 컨트롤이 진입하면 전역 실행 컨텍스트가 생성되고 실행 컨텍스트 스택에 쌓인다. 전역 실행 컨텍스트는 애플리케이션이 종료될 때(웹 페이지에서 나가거나 브라우저를 닫을 때)까지 유지된다.

3. 함수를 호출하면 해당 함수의 실행 컨텍스트가 생성되며 직전에 실행된 코드 블록의 실행 컨텍스트 위에 쌓인다.

4. 함수 실행이 끝나면 해당 함수의 실행 컨텍스트를 파기하고 직전의 실행 컨텍스트에 컨트롤을 반환한다

이렇게 자바스크립트는 실행 컨텍스트의 순서를 스택으로 관리한다.

---

실행 컨텍스트 (Execution Context)의 종류

- Global Context(전역 컨텍스트)

함수 안에서 실행되는 코드가 아니라면 모든 스크립트는 Global Context에서 실행된다.
스택 구조를 가지는 형태로 Execution Context가 생성이 된 후 global object로 window가 this로 할당되고 스택에 쌓이게 된다.
Global Context 안에 포함되는 모든 코드들의 실행 가능한 코드들은 순서대로 스택에 쌓이게 되며
LIFO(Last In First Out)으로 함수를 실행하게 된다.

- Functional Context(함수 컨텍스트)

Functional Context는 선언된 함수가 호출이 될 때를 기점으로 생성이 되고,
함수의 모든 동작이 종료되면 Functional Context는 소멸된다.
(closure를 사용한다면 스코프가 소멸하지 않고 이용을 할 수가 있다.)
각각의 함수들은 각각의 Functional Context를 가지지만 함수가 호출이 되어야만 생성이된다.

실행 컨텍스트의 객체

실행 컨텍스트는 물리적으로는 생성할 때 변수 객체, 스코프 체인, this 프로퍼티 등의 속성을 가지게 된다.

1. 변수 객체

• 실행 컨텍스트가 생성될 때는, 자바스크립트 엔진이 해당 컨텍스트에 필요한 정보들(객체에서 사용할 매개변수, 사용자가 정의한 변수, 객체)을 저장할 변수 객체를 만든다.
  즉, 코드들이 실행될 때 필요한 각종 정보들을 담아 두는 곳 이다.

2. 스코프 체인

• 변수 객체에는 [[scope]] 프로퍼티에 추가되는 연결리스트 형태의 스코프 정보가 만들어집니다. 이것을 스코프 체인이라고 합니다. 스코프는 현재 실행 중인 컨텍스트의 유효한 범위를 나타내는 것입니다.

3. 현재 실행 컨텍스트 내부에서 사용하는 지역 변수 생성

• 함수 안에 정의된 변수들이나, 내부 함수들이 변수 객체에 생성됩니다. 그런데 이 때는 변수나 함수 표현식으로 만들어진 함수들은 생성만 되고 초기화는 이루어지지 않습니다. 각각의 것들이 실행되기 전까지는 초기화가 이루어지 않습니다. 그래서 아직 이들의 값은 undefined 인 채로 변수 객체에 생성됩니다.

4. this 프로퍼티에 this 가리키는 객체 저장하기

• 이 변수 객체의 this에 바인딩할 객체를 저장합니다.

---

정리

아래와 같은 코드를 작성했을 때, foo() 함수 실행 컨텍스트 내의 변수 객체는 어떻게 생성될까?

function foo(p1, p2, p3){
	var a;
	function bar(){
		return a*a;
	}
    return p1 + p2 + p3 + a + bar();
}

foo(3, 4, 5);

이처럼 foo() 실행 컨텍스트의 변수 객체에는 arguments 부터 시작하여 스코프 체인, 함수 인자에 대한 값, 지역 변수, 내부 함수, this 바인딩까지 모든 정보들이 들어가게 됩니다.

• arguments는 foo함수의 인자들이다.
• p1, p2, p3은 3, 4, 5가 할당 된다.
• 변수 a는 undefined로 초기화 된다.
• 스코프 체인은... 다음에 알아봐야겠다.
• this는 전역 객체에 바인딩된다. (JS의 this는 기본적으로 전역 객체에 바인딩된다.)

참고 블로그

• ChanBlog