실행 컨텍스트란?

Stack(스택)

• 출입구가 하나뿐인 깊은 우물 같은 데이터 구조
• 스택에 순서대로 데이터 A-B-C-D를 저장
  ⇒ 꺼낼 때는 반대로 D-C-B-A 순서로 꺼냄

Queue(큐)

• 양쪽이 모두 열려있는 파이프 같은 데이터 구조
• 보통 한쪽은 입력만, 다른 한쪽은 출력만 담당하는 구조
  (종류에 따라 양쪽 모두 입력과 출력이 가능한 큐도 존재)
• 큐에 순서대로 데이터 A-B-C-D를 저장
  ⇒ 꺼낼 때도 A-B-C-D 순서로 꺼냄

그림 2-2) 스택과 큐의 구조

실행 컨텍스트

• 실행할 코드에 제공할 환경 정보들을 모아놓은 객체

• 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성
  ⇒ 이를 call stack(콜 스택)에 쌓아 올림
  ⇒ 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 방식으로 전체 코드의 환경과 순서를 보장

• 여기서 '동일한 환경', 즉 하나의 실행 컨텍스트를 구성할 수 있는 방법

  • 전역공간
  • eval() 함수
  • 함수

  등이 있다.
  자동으로 생성되는 전역공간, eval을 제외
  흔히 실행 컨텍스트를 구성하는 방법 : 함수 실행

  ES6에서는 블록{}에 의해서도 새로운 실행 컨텍스트가 생성된다.

eval()

• 문자로 표현된 JavaScript 코드를 실행하는 함수
• 전역 객체의 함수 속성
• eval()을 사용하면 악성 코드가 허가 없이 응용 프로그램 내에서 실행될 수 있으므로 보안이 위험하다.
• 그러므로 eval()을 절대 사용하지 말 것!

예제 2-1) 실행 컨텍스트와 콜 스택

// -------------------- (1)
var a = 1;

function outer () {
    function inner () {
        console.log(a); // undefined
        var a = 3;
    }
    
    inner(); // ------- (2)
    console.log(a); // 1
}

outer(); // ----------- (3)
console.log(a); // 1

예제를 통해 콜 스택에 실행 컨텍스트가 어떤 순서로 쌓이고, 어떤 순서로 코드 실행에 관여하는지 확인하기

1. 처음 자바스크립트 코드를 실행하는 순간(1) 전역 컨텍스트가 콜 스택에 담긴다.
   ⇒ 전역 컨텍스트와 관련된 코드들을 순차적으로 진행

• 전역 컨텍스트
  • 최상단의 공간은 코드 내부에서 별도의 실행 명령이 없어도 브라우저에서 자동으로 실행
    ⇒ 자바스크립트 파일이 열리는 순간 전역 컨텍스트 활성화

2. (3)에서 outer 함수 호출
   ⇒ 자바스크립트 엔진은 outer에 대한 환경 정보를 수집해서 outer 실행 컨텍스트를 생성 후 콜 스택에 담는다.
   ⇒ 콜 스택의 맨 위에 outer 실행 컨텍스트가 놓인 상태, 전역 컨텍스트와 관련된 코드의 실행을 일시중단 하고 outer 실행 컨텍스트와 관련된 코드인 outer 함수 내부의 코드들을 순차적으로 실행

3. (2)에서 inner 함수의 실행 컨텍스트가 콜 스택의 맨 위에 담기면 outer 컨텍스트와 관련된 코드의 실행을 중단하고 inner 함수 내부의 코드를 순서대로 진행

그림 2-3) 실행 컨텍스트와 콜 스택

4. inner 함수 내부에서 a 변수에 값 3을 할당 후 inner 함수의 실행이 종료되고, inner 실행 컨텍스트가 콜 스택에서 제거

5. outer 컨텍스트가 콜 스택의 맨 위로 존재하게 되면서 (2)의 다음 줄부터 이어서 실행. a 변수의 값을 출력 후 outer 함수의 실행이 종료되고, outer 실행 컨텍스트가 콜 스택에서 제거

6. 콜 스택에 전역 컨텍스트만 남아 실행을 중단했던 (3)의 다음 줄부터 이어서 실행. a 변수의 값을 출력 후 전역 공간에 실행할 코드가 남아있지 않아 전역 컨텍스트도 제거

7. 콜 스택에 아무것도 남지 않은 상태로 종료

한 실행 컨텍스트가 콜 스택의 맨 위에 쌓이는 순간 === 현재 실행할 코드에 관여하게 되는 시점
⇒ 기존의 컨텍스트는 새로 쌓인 컨텍스트보다 아래에 위치할 수밖에 없다.

어떤 실행 컨텍스트가 활성화될 때 자바스크립트 엔진은 해당 컨텍스트에 관련된 코드들을 실행하는 데 필요한 환경 정보들을 수집에서 실행 컨텍스트 객체에 저장

• VariableEnvironment
  • 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보.
  • 선언 시점의 LexicalEnvironment의 스냅샷(snapshot), 변경사항은 반영되지 않음.
• LexicalEnvironment : 처음에는 VariableEnvironment와 같지만 변경 사항이 실시간으로 반영됨.
• ThisBinding : this 식별자가 바라봐야 할 대상 객체.

VariableEnvironment

• LexicalEnvironment와 같지만 최초 실행 시의 스냅샷을 유지
• 실행 컨텍스트 생성 시 VariableEnvironment에 정보를 담는다.
• 이 정보를 그대로 복사해서 LexicalEnvironment를 생성, 이후에는 LexicalEnvironment를 주로 활용
• VariableEnvironment와 LexicalEnvironment의 내부는 environmentRecord와 outerEnvironmentReference로 구성

LexicalEnvironment

environmentRecord

• 현재 컨텍스트와 관련된 코드의 식별자 정보 저장
• 컨텍스트 내부 전체를 처음부터 끝까지 쭉 훑어나가며 순서대로 수집

식별자 : 컨텍스트를 구성하는 함수에 지정된 매개변수 식별자, 선언한 함수가 있을 경우 그 함수 자체, var로 선언된 변수의 식별자 등- 변수 정보를 수집하는 과정을 마쳤더라도 아직 실행 컨텍스트가 관여할 코드들은 실행되지 전 상태

Hoisting(호이스팅)

• 변수 정보 수집 과정을 마쳤더라도 아직 실행 컨텍스트가 관여할 코드들이 실행되기 전 상태
• 코드가 실행되기 전이지만 자바스크립트 엔진은 이미 해당 환경 속의 변수명을 모두 알고 있는 상태
  ⇒ 자바스크립트 엔진은 식별자들을 최상단으로 끌어올려놓은 다음 실제 코드를 실행한다. 라고 생각
• 호이스팅 : 변수 정보를 수집하는 과정을 이해하기 쉬운 방법으로 대체한 가상의 개념, 자바스크립트 엔진이 실제로 끌어올리지는 않지만 편의상 끌어올린 것으로 간주하자는 것

호이스팅에 대해 예제를 통해 이해하기

주의 : 자바스크립트 엔진의 구동 방식을 사람의 입장에서 이해하기 위한 예제 코드입니다. 실제 엔진은 이러한 변관 과정을 거치지 않습니다.

매개변수와 변수에 대한 호이스팅

예제 2-2) 매개변수와 변수에 대한 호이스팅(1) - 원본 코드

• (1), (2), (3)에서 어떤 값들이 출력될 지 예상해보기
  • (1) 함수 호출 시 전달한 1이 출력
  • (2) 선언된 변수 x에 할당한 값이 없으므로 undefined 출력
  • (3) 2 출력

function a (x) {  // 수집 대상 1(매개변수)
    console.log(x); // (1)
    var x;  // 수집 대상 2(변수 선언)
    console.log(x); // (2)
    var = 2; // 수집 대상 3(변수 선언)
    console.log(x); // (3)
}

a(1);

예제 2-3) 매개변수와 변수에 대한 호이스팅(2) - 매개변수를 변수 선언/할당과 같다고 간주해서 변환한 상태
⇒ 인자들과 함께 함수를 호출한 경우의 동작으로 인자를 함수 내부의 다른 코드보다 먼저 선언 및 할당이 이뤄진 것으로 간주

arguments : 실행 컨텍스트 생성 시점에 함께 만드는 정보 중 하나. 지정한 매개변수의 개수와 무관하게 호출 시 전달한 인자가 모두 arguments 정보에 담김.

function a () {
    var x = 1; // 수집 대상 1(매개변수 선언)
    console.log(x); // (1)
    var x;  // 수집 대상 2(변수 선언)
    console.log(x); // (2)
    var x = 2; // 수집 대상 3(변수 선언)
    console.log(x); // (3)
}

a();

예제 2-4) 매개변수와 변수에 대한 호이스팅(3) - 호이스팅(변수 정보 수집 과정)을 마친 상태

• environmentRecord는 현재 실행될 컨텍스트의 대상 코드 내에 어떤 식별자들이 있는지에만 관심이 있고, 각 식별자에 할당된 값에는 관심이 없다.
  ⇒ 변수를 호이스팅할 때 변수명만 끌어올리고 할당 과정은 원래 자리에 위치 (매개변수도 동일)

function a () {
    var x; // 수집 대상 1의 변수 선언 부분 - [1]
    var x; // 수집 대상 2의 변수 선언 부분 - [2]
    var x; // 수집 대상 3의 변수 선언 부분 - [3]
    
    x = 1; // 수집 대상 1의 할당 부분 - [4]
    console.log(x); // (1) - [5]
    console.log(x); //(2) - [6]
    x = 2; // 수집 대상 3의 할당 부분 - [7]
    console.log(x); // (3) - [8]
}

a(1);

실제 코드 실행 과정

[1] : 변수 x 선언

• 이 때 메모리에서는 저장할 공간을 미리 확보하고, 확보한 공간의 주솟값을 변수 x에 연결

[2], [3] : 다시 변수 x 선언. 이미 선언된 변수 x가 있으므로 무시

[4] : x에 1을 할당

• 숫자 1을 별도의 메모리에 담고, x와 연결된 메모리 공간에 숫자 1을 가리키는 주솟값 입력

[5], [6] : (1), (2)에서 모두 1을 출력

[7] : x에 2를 할당

• 숫자 2를 별도의 메모리에 담고, 그 주솟값을 든 채로 x와 연결된 메모리 공간으로 간다.
• 숫자 1을 가리키는 주솟값이 있는 것을 2의 주솟값으로 대치하여 변수 x는 2를 가리킴

[8] : (3)에서 2를 출력

• 함수 내부의 모든 코드가 실행되었으므로 실행 컨텍스트가 콜 스택에서 제거

	예상 출력 값	실제 출력 값
(1)	1	1
(2)	undefined	1
(3)	2	2

함수 선언문(function declaration)과 함수 표현식(function expression)

함수를 새롭게 정의할 때 쓰이는 방식

함수 선언문

• function 정의부만 존재하고, 별도의 할당 명령이 없는 것을 의미
• 반드시 함수명이 정의되어 있어야 한다.

함수 표현식

• 정의한 function을 별도의 변수에 할당하는 것을 의미
• 함수명이 없어도 된다.
  • 함수명을 정의한 표현식 : 기명 함수 표현식
  • 함수명을 정의하지 않은 표현식 : 익명 함수 표현식
    ⇒ 일반적으로 함수 표현식은 익명 함수 표현식을 의미

예제 2-8) 함수를 정의하는 세 가지 방식

function a () { /* ... */ } // 함수 선언문. 함수명 a 가 곧 변수명.

a(); // 실행 OK

var b = function () { /* ... */ } // (익명) 함수 표현식. 변수명 b가 곧 함수명.

b(); // 실행 OK

var c = function d() { /* ... */ } // 기명 함수 표현식. 변수명은 c, 함수명은 d.

c(); // 실행 OK
d(); // Error, func is not defined

기명 함수 표현식의 주의할 점

• 외부에서는 함수명으로 함수를 호출할 수 없다.
• 함수명은 오직 함수 내부에서만 접근할 수 있다.

예제를 통한 함수 선언문과 함수 표현식의 실질적인 차이

예제 2-9) 함수 선언문과 함수 표현식(1) - 원본 코드

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;
}

예제 2-10) 함수 선언문과 함수 표현식(2) - 호이스팅을 마친 상태

• 실행 컨텍스트의 LexicalEnvironment는 두 가지 정보를 수집하는데, 그 중 enritonmentRecord의 정보 수집 과정 중 발생하는 호이스팅 과정에 대한 코드
  ⇒ 함수 선언문은 전체를 호이스팅, 반면 함수 표현식은 변수 선언부만 호이스팅
  ⇒ 함수도 하나의 값으로 취급할 수 있다는 것을 보여주는 코드
  ⇒ 함수 표현식 : 함수를 다른 변수에 값으로써 할당하는 것

// 함수 선언문은 전체를 호이스팅 한다.
var sum = function sum (a, b) { // [1]
    return a + b;
}

// 변수는 선언부만 호이스팅
var multiply; // [2]

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

// 변수의 할단부는 원래 자리에 위치
multiply = function (a, b) { // [5]
    return a * b;
}

실제 코드 실행 과정

[1] : 메모리 공간을 확보, 확보된 공간의 주솟값을 변수 sum에 연결

[2] : 또 다른 메모리 공간을 확보, 그 공간의 주솟값을 변수 multiply에 연결

(다시)[1] : sum 함수를 또 다른 메모리 공간에 저장, 그 주솟값을 앞서 선언한 변수 sum의 공간에 할당

• 변수 sum은 함수 sum을 바라보는 상태

[3] : sum을 실행. 정상적으로 실행되어 3 출력

[4] : 현재 multiply에는 값이 할당되어 있지 않아 비어있는 대상을 함수로 여겨 실행 명령을 한 것

• 'multiply is not a function'이라는 에러 메시지 출력

[5] : 이 후의 코드는 [4]의 에러로 인해 실행되지 않은 채 런타임 종료

함수 선언문의 위험성

• 함수 선언문의 경우 선언 전에 호출해도 아무런 문제 없이 실행
• 동명의 함수가 여러 개일 경우, 문제가 발생하고 디버깅 하기 어렵다.
• 동명의 함수를 함수 표현식으로 정의 한다면 나중에 작성된 함수 표현식에서 에러가 검출되어 디버깅이 쉬워진다. (Uncaught Type Error: 함수 이름 is not a function)
  ⇒ 상대적으로 함수 표현식이 안전

원활한 협업을 위해

• 전역공간에 함수를 선언한다.
• 동명의 함수를 중복 선언하지 않도록 한다.
• 함수 표현식을 사용한다.

스코프(scope)

• 식별자에 대한 유효범위
• 어떤 경계 A의 외부에서 선언한 변수
  • A의 외부뿐 아니라 A의 내부에서도 접근이 가능
  • A의 내부에서 선언한 변수는 오직 A의 내부에서만 접근 가능

ES5까지는 전역공간을 제외하면 오직 함수에 의해서만 스코프가 생성
ES6에서는 블록에 의해서도 스코프 경계가 발생하게 하여 다른 언어와 훨씬 비슷해짐

• 블록은 var로 선언한 변수에 대해 작용하지 않음
• 새로 생긴 let, const, strict mode의 함수 선언 등에 대해서만 범위로서의 역할을 수행
  ⇒ 이 둘을 구분하기 위해 함수 스코프, 블록 스코프 라는 용어 사용

스코프 체인(scope chain)

• '식별자의 유효범위'를 안에서 바깥으로 차례로 검색해나가는 것
• 스코프 체인을 가능하는 하는 것 ⇒ LexicalEnvironment 의 두 번째 수집 자료인 outerEnvironmentReference

outerEnvironmentReference

• outerEnvironmentReference는 현재 호출된 함수가 선언될 당시의 LexicalEnvironment를 참조

과거 시점인 '선언될 당시'에 주목

• '선언하다'라는 행위가 실제로 일어날 수 있는 시점 = 콜 스택 상에서 어떤 실행 컨텍스트가 활성화된 상태일 때
  ⇒ 어떤 함수를 선언(정의)하는 행위 자체도 하나의 코드이고, 모든 코드는 실행 컨텍스트가 활성화 상태일 때 실행되기 때문

예시) A 함수 내부에 B 함수 선언, B 함수 내부에 C 함수 선언

• 함수 C의 outerEnvironmentReference는 함수 B의 LexicalEnvironment를 참조
• 함수 B의 LexicalEnvironment에 있는 outerEnvironmentReference는 함수는 함수 B가 선언되던 때 A의 LexicalEnvironment를 참조
  ⇒ outerEnvironmentReference는 연결리스트(linked-list)형태

• '선언 시점의 LexicalEnvironment'를 계속 찾아 올라가면 마지막엔 전역 컨텍스트의 LexicalEnvironment가 있을 것이다.
• 각 outerEnvironmentReference는 오직 자신이 선언된 시점의 LexicalEnvironment만 참조하므로, 가장 가까운 요소로부터 차례대로만 접근할 수 있고 다른 순서로 접근하는 것은 불가능
  ⇒ 이런 구조적 특성으로 인해 여러 스코프에서 동일한 식별자를 선언한 경우, 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에만 접근 가능하다.

예제 2-13) 스코프 체인

var a = 1; // [1]

var outer = function () { // [2]
    var inner = function () { // [4]
        consolt.log(a); // [6]
        var a = 3; // [7]
    }; // [8]
    
    inner(); // [5]
    console.log(a); // [9]
} // [10]

outer(); // [3]
console.log(a); // [11]

• 시작

  • 전역 컨텍스트 활성화 : 전역 컨텍스트의 environmentRecord에 {a, outer} 식별자 저장
  • 전역 컨텍스트는 선언 시점이 없으므로 전역 컨텍스트의 outerEnvironmentReference에는 아무것도 담기지 않는다. (this: 전역 객체)

• [1], [2] : 전역 스코프에 있는 변수 a에 1을 outer에 함수를 할당

• [3] : outer 함수 호출

  • 전역 컨텍스트의 코드는 [3]에서 임시 중단
  • outer 실행 컨텍스트가 활성화되어 [2]로 이동

• [2]

  • outer 컨텍스트의 environmentRecord에 {inner} 식별자 저장
  • outerEnvironmentReference에는 outer 함수가 선언될 당시의 LexicalEnvironment가 담긴다.
  • outer 함수는 전역 공간에서 선언됐으므로 전역 컨텍스트의 LexicalEnvironment를 참조복사
    ⇒ 이를 [GLOBAL, {a, outer}]라고 표기 (this: 전역 객체)
    - GLOBAL : 실행 컨텍스트의 이름
    - {a, outer} : environmentRecord의 객체

• [4] : outer 스코프에 있는 변수 inner에 함수를 할당

• [5] : inner 함수 호출

  • outer 컨텍스트의 코드는 [5]에서 임시 중단
  • inner 실행 컨텍스트가 활성화되어 [4]로 이동

• [4]

  • inner 컨텍스트의 environmentRecord에 {a} 식별자 저장
  • outerEnvironmentReference에는 inner 함수가 선언될 당시의 LexicalEnvironment가 담긴다.
  • inner 함수는 outer 함수 내부에서 선언됐으므로 outer 함수의 LexicalEnvironment를 참조복사
    ⇒ [outer, {a}] (this: 전역 객체)

• [6] : 식별자 a 에 접근

  • 현재 활성화 상태인 inner 컨텍스트의 environmentRecord에서 a를 검색
  • a가 발견됐는데 여기에는 아직 할당된 값이 없음
    ⇒ undefined 출력

• [7] : inner 스코프에 있는 변수 a에 3을 할당

• [8] : inner 함수 실행 종료

  • inner 실행 컨텍스트가 콜 스택에서 제거
  • 바로 아래의 outer 실행 컨텍스트가 다시 활성화
  • 중단했던 [5]의 다음으로 이동

• [9] : 식별자 a 에 접근

  • 이 때 자바스크립트 엔진은 활성화된 실행 컨텍스트의 LexicalEnvironment에 접근
  • 첫 요소의 environmentRecord에서 a 가 있는지 찾아보고, 없으면 outerEnvironmentReference에 있는 environmentRecord로 넘어가는 방식으로 검색 진행
  • 전역 LexicalEnvironment에 a가 있으니 그 a에 저장된 값 1을 반환
    ⇒ 1 출력

• [10] : outer 함수 실행 종료

  • outer 실행 컨텍스트가 콜 스택에서 제거
  • 바로 아래의 전역 컨텍스트가 다시 활성화
  • 중단했던 [3]의 다음으로 이동

• [11] : 식별자 a 에 접근

  • 현재 활성화 상태인 전역 컨텍스트의 environmentRecord에서 a를 검색하여 a를 찾음
    ⇒ 1 출력
  • 모든 코드의 실행이 완료되어 전역 컨텍스트가 콜 스택에서 제거되고 종료

예제 2-13) 스코프 체인 내용 정리

• '전역 컨텍스트 ‣ outer 컨텍스트 ‣ inner 컨텍스트' 순으로 점차 규모가 작아진다
• 반면 스코프 체인을 타고 접근 가능한 변수의 수는 늘어난다.
  • 전역 공간에서 전역 스코프에서 생성된 변수에만 접근 가능
  • outer 함수 내부에서는 outer, 전역 스코프에서 생성된 변수에 접근 가능
  • inner 함수 내부에서는 inner, outer, 전역 스코프 모두에 접근 가능

변수 은닉화(variable shadowing)

• 스코프 체인 상에 있는 변수라고 해서 무조건 접근 가능한 것은 아니다.
• 예제 2-13에서 식별자 a는 전역 공간, inner 함수 내부에서 선언
  • inner 함수 내부에서 a에 접근하려고 하면 스코프 체인 상의 첫 번째 인자인 inner 스코프의 LexicalEnvironment부터 검색하고, a 식별자가 존재하면 스코프 체인 검색을 멈추고 inner LexicalEnvironment 상의 a를 반환
    ⇒ 즉, inner 함수 내부에서 a 변수를 선언했기 때문에 전역 공간에서 선언한 a 변수에 접근할 수 없고 이를 변수 은닉화라고 한다.

전역변수와 지역변수

• 전역변수 : 전역 스코프에서 선언한 변수
• 지역변수 : 함수 내부에서 선언한 변수
  ⇒ 코드의 안전성을 위해 가급적 전역변수 사용을 최소화하는 것이 좋다.

this

• 실행 컨텍스트의 ThisBinding에는 this로 지정된 객체가 저장
• 실행 컨텍스트 활성화 당시 this가 지정되지 않은 경우, this는 전역 객체가 저장
• 그 밖에는 함수를 호출하는 방법에 따라 this에 저장되는 대상이 달라진다.

this에 대한 자세한 내용은 What is 'this' in JavaScript?에 정리했습니다.

정리

• 실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체

  • 전역 컨텍스트 : 전역 공간에서 자동으로 생성
  • eval 및 함수 실행에 의한 컨텍스트 등

• 실행 컨텍스트 객체는 활성화되는 시점에 VariableEnvironment, LexicalEnvironment, ThisBinding의 세 가지 정보를 수집

  • 실행 컨텍스트를 생성할 때 VariableEnvironment와 LexicalEnvironment는 동일한 내용으로 구성되지만
  • LexicalEnvironment : 함수 실행 도중에 변경되는 사항이 즉시 반영
    • environmentRecord와 outerEnvironmentReference로 구성
    • environmentRecord : 선언한 함수의 함수명 등을 수집
    • outerEnvironmentReference : LexicalEnvironment 정보를 참조
  • VariableEnvironment : 초기 상태 유지

• 호이스팅

  • 코드 해석을 좀 더 수월하게 하기 위해 environmentRecord의 수집 과정을 추상화한 개념
  • 실행 컨텍스트가 관여하는 코드 집단의 최상단으로 이들을 '끌어올린다'고 해석하는 것
  • 변수 선언과 값 할당이 동시에 이뤄진 문장 : '선언부'만 호이스팅
    (할당 과정은 원래 자리에 위치)
  • 여기서 함수 선언문과 함수 표현식의 차이가 발생

• 스코프 : 변수의 유효범위

  • outerEnvironmentReference는 해당 함수가 선언된 위치의 LexicalEnvironment를 참조
  • 코드 상에서 어떤 변수에 접근할 때, 현재 컨텍스트의 LexicalEnvironment를 탐색하여 발견되면 그 값을 반환하고, 발견하지 못할 경우 다시 outerEnvironmentReference에 담긴 LexicalEnvironment를 탐색하는 과정이 반복
  • 전역 컨텍스트의 LexicalEnvironment까지 탐색해도 해당 변수를 찾지 못한 경우 undefined를 반환

• 전역변수와 지역변수

  • 전역변수 : 전역 컨텍스트의 LexicalEnvironment에 담긴 변수
  • 지역변수 : 그 밖의 함수에 의해 생성된 실행 컨텍스트의 변수
    ⇒ 안전한 코드 구성을 위해 가급적 전역변수의 사용 최소화

• this

  • 실행 컨텍스트를 활성화하는 당시에 지정된 this가 저장
  • 함수를 호출하는 방법에 따라 값이 달라짐
  • 지정되지 않은 경우 전역 객체가 저장

참고

• 코어 자바스크립트 - 02_실행 컨텍스트
• JavaScript Internals: Execution Context

---

마무리

• 이 글만 보고도 책의 내용처럼 잘 이해할 수 있도록 정리하려다보니 책을 그냥 옮기는 수준으로 정리한 것이 아닌가 하는 생각이 든다.
  ⇒ 그럼에도 불구하고 책이 더 자세하게 설명되어 있습니다. 하하
• 콜백 함수를 시작으로 연관된 부분을 이어서 정리하려고 하다보니 다음 코어자바스크립트 정리 내용은 클로저가 되겠습니다.