스코프는 크게 **전역 스코프**와 **지역 스코프** 이 2가지로 나뉜다.

### 전역 스코프

**전역 스코프**(global scope)는 코드의 가장 바깥 부분을 이야기하는데, 이 스코프에 변수를 선언하면 **전역 변수**(global variable)가 되어 **코드 어디서든지 참조**할 수 있다.

### 지역 스코프

**지역**(local)은 함수 몸체 내부를 의미하고, 

이 지역은 **지역 스코프**(local scope)를 만든다.

이 스코프에 변수를 선언하면 **지역 변수**(local variable)가 되어 **자신의 스코프와** 

**하위 지역 스코프에서만 참조**가 가능하다.

### 스코프 체인

함수는 전역에 선언될 수 있고, 지역에 선언될 수도 있다. 

그리고 지역에 함수가 정의된 것을 **함수의 중첩**이라 하고, 

지역에 선언된 함수를 중첩 함수(nested function), 

중첩 함수를 포함한 함수를 외부 함수(outer function) 라고 한다. 

이처럼 함수가 중첩될 수 있다는 것은, 스코프 또한 중첩될 수 있다는 이야기이다. 

이는 **스코프가 함수의 중첩에 의해 계층적 구조를 가진다**고 할 수 있고,

이처럼 스코프가 계층적으로 연결되어 있는 것을 **스코프 체인**(scope chain) 이라고 한다. 

자바스크립트 엔진에서 변수를 참조할 때, 코드가 실행되는 스코프에서 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다. 

이를 통해서 상위 스코프에 선언된 변수를 하위 스코프에서도 참조할 수 있게 되는 것이다.

스코프는 크게 전역 스코프와 지역 스코프 이 2가지로 나뉜다.

스코프 체인

### 렉시컬 환경

 자바스크립트 엔진은 코드를 실행하기 전에 **렉시컬 환경**이라는 자료구조를 생성한다. 
 
 변수가 선언될 때 변수 식별자는 렉시컬 환경에 키로 등록되고, 
 
 변수에 값이 할당될 때 렉시컬 환경의 변수 식별자의 해당하는 값이 변경된다. 
 
 변수의 검색도 이 렉시컬 환경에서 이루어진다. 
 
 렉시컬 환경은 2가지로 나뉜다. 
 
 - 환경 레코드 **Environment Record**
 - 모든 지역 변수들을 Property로 가지는 객체
 - 위에서 언급한 변수 식별자를 등록하는 곳이다.
 - 외부 코드와 외부 렉시컬 환경에 대한 참조 **OuterLexicalEnvironmentReference**
 
 ### 렉시컬 환경의 작동 방식
 
 위에서 말한 것처럼 렉시컬 환경은 변수를 환경 레코드에 등록하는데,
 
 저장하는 방식은 변수 또는 함수 선언 방식에 따라 달라진다. 
 
 - **변수**
 - **var** 로 선언된 경우
 - var 로 선언된 변수는 변수명을 키(key)로, **`undefined`** 를 값(value)으로 초기화한다. 
 이로 인해 **호이스팅**이라 불리는 변수 선언이 끌어 올려진 것처럼 보이는 것이 가능하다. 
 변수가 선언되기 전에 참조되었음에도 불구하고 **`Reference Error`** 가 발생하지 않고,
 **`undefined`** 값을 얻을 수 있기 때문이다.
 - **let** 이나 **const** 로 선언된 경우
 - let이나 const 로 선언된 변수는 변수명을 키(key)로, **`<uninitialized>`** 라는 상태를 값(value)으로 초기화한다. 
 **`undefined`** 와 다르게 이 값은 참조를 할 수 없기 때문에 선언하기 전에 참조를 하려 하면 **`Reference Error`** 가 발생하는 것이다. 
 이처럼 변수가 선언되기 전에 참조할 수 없는 경우를 **`TDZ (Temporary Dead Zone)`** 이라 하기도 한다.
 - **함수**
 - 함수 **선언식**
 - 함수가 선언식으로 선언되면 함수명을 키(key)로 함수 자체를 값(value)로 저장하기 때문에 **완전히 초기화**되고, 
 이 덕분에 스코프 최하단에 선언되어 있어도 선언되는 줄 이전에 접근이 가능하다.
 - 함수 **표현식**
 - 함수가 표현식으로 선언된 경우 익명 함수를 저장하는 변수의 선언자에 따라간다.
 
 
 ### 외부 렉시컬 환경
 
 코드를 실행할 때 참조할 변수를 현재 스코프와 연결되어 있는 환경 스코프를 먼저 찾아서, 그 안에 참조할 변수가 있는지 확인한다. 
 
 만약 참조할 변수가 존재하지 않는 경우 상위 스코프로 올라가서 해당 상위 스코프와 연결된 환경 스코프를 찾아 참조할 변수를 찾는다. 
 
 이 작업을 계속 반복하여 전역 스코프까지 올라가면서 참조할 변수를 찾는데, 
 전역 변수에도 참조하고자 하는 변수가 존재하지 않는다면, **`Reference Error`** 가 발생한다.

렉시컬 환경은 식별자와 식별자에 바인딩된 값, 그리고 상위 스코프에 대한 참조를 기록하는 자료구조이다.

렉시컬 환경

```tsx
var x = 1;
const y = 2;

function foo(a: number) {
 var x = 3;
 const y = 4;
 
 function bar(b: number) {
 const z = 5;

 console.log(a + b + x + y + z);
 }

 bar(10);
}

foo(20); // 42
```

```tsx
ExecutionContextStack [
 GlobalExecutionContext is RunningExcutionContext
]

GlobalExecutionContext {
 LexicalEnvironment: GlobalLexicalEnvironment
}

GlobalLexicalEnvironment {
 GlobalEnvironmentRecord: {
 GlobalObjectEnvironmentRecord,
 GlobalDeclarativeEnvironmentRecord
 }
 // 전역 객체 this 바인딩
 [[GlobalThisValue]]: Window,
 OuterLexicalEnvironmentReference: null
}

GlobalDeclarativeEnvironmentRecord {
 y: <uninitialized>
}

GlobalObjectEnvironmentRecord {
 BindingObject: Window
}

Window {
 x: undefined
 foo: <function object>
 ...window
}
```

어제(전역 코드 평가)까지 정리된 내용을 요약한 코드이다.

## 전역 코드 실행

이제 본격적으로 코드가 실행되는 부분이다.

변수 할당문이 실행되어 x, y 에 값이 할당된다.

그리고 foo 함수가 호출된다. 

현재까지 레코드들이 어떻게 구성되어 있는지 간단히 나타내보자면

```tsx
ExecutionContextStack [
 GlobalExecutionContext is RunningExcutionContext
]

GlobalExecutionContext {
 LexicalEnvironment: GlobalLexicalEnvironment
}

GlobalLexicalEnvironment {
 GlobalEnvironmentRecord: {
 GlobalObjectEnvironmentRecord,
 GlobalDeclarativeEnvironmentRecord
 }
 [[GlobalThisValue]]: Window,
 OuterLexicalEnvironmentReference: null
}

GlobalDeclarativeEnvironmentRecord {
 // 값 할당
 y: 2
}

GlobalObjectEnvironmentRecord {
 BindingObject: Window
}

Window {
 // 값 할당
 x: 1
 foo: <function object>
 ...window
}
```

위와 같을 것 같다.

## foo 함수 코드 평가

전역 코드 실행 단계에서 foo 함수를 호출했으니, foo 함수 코드 역시 전역 코드와 같이

코드 평가 과정, 코드 실행 과정이 순차적으로 진행된다. 

전역 코드 평가와 같이 아래 순서대로 진행된다.

- 함수 실행 컨텍스트 생성
- 함수 렉시컬 환경 생성
 - 함수 환경 레코드 생성
 - this 바인딩
 - 외부 렉시컬 환경에 대한 참조

 

현재까지 레코드들이 어떻게 구성되어 있는지 간단히 나타내보자면

```tsx
ExecutionContextStack [
 GlobalExecutionContext,
 FooExecutionContext is RunningExcutionContext
]

// foo 함수 실행 컨텍스트 생성
FooExecutionContext {
 LexicalEnvironment: FooLexicalEnvironment
}

// foo 함수 렉시컬 환경 생성
FooLexicalEnvironment {
 FooEnvironmentRecord: {
 // foo 함수 환경 레코드 생성
 FooFunctionEnvironmentRecord
 }
 // Window 로 this 바인딩
 [[ThisValue]]: Window
 // 외부 렉시컬 환경에 대한 참조
 OuterLexicalEnvironmentReference: GlobalLexicalEnvironment
}

FooFunctionEnvironmentRecord {
 // 매개변수
 a: undefined,
 // arguments 객체
 arguments : {
 0: 20,
 length: 1,
 callee: foo
 },
 // 함수 내부 스코프에 선언된 식별자
 x: undefined,
 y: <uninitialized>
 bar: <function object>
}

// 나머지 생략
...
```

위와 같을 것 같다.

### 1 함수 실행 콘텍스트 생성

foo 함수 실행 컨텍스트가 생성된다.

이 때 foo 함수 실행 컨텍스트는 foo 함수 렉시컬 환경이 생성되고 난 후 실행 컨텍스트 스택에 Push 된다.

즉 foo 함수 실행 컨텍스트가 실행 중인 실행 컨텍스트가 된다.

### 2 함수 렉시컬 환경 생성

foo 함수 렉시컬 환경을 생성하고 foo 함수 실행 컨텍스트에 바인딩 한다.

### 2-a 함수 환경 레코드 생성

함수 코드는 지역 변수, 매개 변수, **`arguments`** 객체를 관리한다.

### 2-b this 바인딩

foo 함수는 함수 선언식으로 선언 되었기 때문에 **this** 로 **전역 객체**가 바인딩된다.

### 2-c 외부 렉시컬 환경에 대한 참조

foo 함수 코드는 전역 코드에서 평가되기 때문에 외부 렉시컬 환경으로 전역 렉시컬 환경을

참조한다.

## foo 함수 코드 실행

매개 변수에 arguments 객체가 할당되고,

변수 할당문이 실행되어 foo 함수 지역 스코프에 선언된 x, y 에 값이 할당된다. 

이 때, 지역 스코프에 x, y 가 없었다면 외부 렉시컬 환경에서 식별자를 검색한다.

외부 렉시컬 환경에도 존재하지 않는다면 **`Refernce Error`** 를 발생시킬 것이다.

다행히 foo 함수 지역 스코프에 x,y 식별자가 존재하므로 값을 할당시킬 것이다. 

그리고 bar 함수가 호출된다. 

현재까지 레코드들이 어떻게 구성되어 있는지 간단히 나타내보자면

```tsx
ExecutionContextStack [
 GlobalExecutionContext,
 FooExecutionContext is RunningExcutionContext
]

FooExecutionContext {
 LexicalEnvironment: FooLexicalEnvironment
}

FooLexicalEnvironment {
 FooEnvironmentRecord: {
 FooFunctionEnvironmentRecord
 }
 [[ThisValue]]: Window,
 // 외부 렉시컬 환경에 대한 참조
 OuterLexicalEnvironmentReference: GlobalLexicalEnvironment
}

FooFunctionEnvironmentRecord {
 // 매개변수 할당
 a: 20,
 arguments : {
 0: 20,
 length: 1,
 callee: foo
 },
 // 변수 값 할당
 x: 3,
 y: 4,
 bar: <function object>
}

// 나머지 생략
...
```

위와 같을 것 같다.

## bar 함수 코드 평가

bar 함수 코드 또한 foo 함수 코드와 동일하게

- 함수 실행 컨텍스트 생성
- 함수 렉시컬 환경 생성
 - 함수 환경 레코드 생성
 - this 바인딩
 - 외부 렉시컬 환경에 대한 참조

위 순서를 걸친다. 

현재까지 레코드들이 어떻게 구성되어 있는지 간단히 나타내보자면

```tsx
ExecutionContextStack [
 GlobalExecutionContext,
 FooExecutionContext,
 BarExecutionContext is RunningExcutionContext
]

// bar 함수 실행 컨텍스트 생성
BarExecutionContext {
 LexicalEnvironment: BarLexicalEnvironment
}

// bar 함수 렉시컬 환경 생성
BarLexicalEnvironment {
 BarEnvironmentRecord: {
 // bar 함수 환경 레코드 생성
 BarFunctionEnvironmentRecord
 }
 // this 바인딩
 [[ThisValue]]: Window,
 // 외부 렉시컬 환경에 대한 참조
 OuterLexicalEnvironmentReference: FooLexicalEnvironment
}

BarFunctionEnvironmentRecord {
 b: undefined,
 arguments: {
 0: 10,
 length: 1,
 callee: bar
 },
 z: <uninitialized>
}

// 나머지 생략
...
```

위와 같을 것 같다.

## bar 함수 코드 실행

매개 변수에 **`arguments`** 객체가 할당되고,

변수 할당문이 실행되어 **bar** 함수 지역 스코프에 선언된 z 에 값이 할당된다.

그리고 **`console.log(a + b + x + y + z);`** 를 실행한다.

위 **`console.log`** 메소드는 아래와 같은 순서를 통해 실행된다.

- console 식별자 검색
- log 메소드 검색
- 표현식 (a + b + x + y + z) 에 대한 평가
- console.log 메소드 실행

### 1 console 식별자 검색

현재 실행되고 있는 컨텍스트의 렉시컬 환경에서 **`console`** 식별자를 검색한다.

**bar** 함수 렉시컬 환경에서는 **`console`** 식별자가 존재하지 않으므로

**bar** 함수 지역 스코프의 상위 스코프(외부 스코프에 대한 참조)인 

**bar** 함수 렉시컬 환경에서 **`console`** 식별자를 검색한다.

**bar** 함수 렉시컬 환경에서도 **`console`** 식별자가 존재하지 않으므로

**bar** 함수 지역 스코프의 상위 스코프인 전역 렉시컬 환경에서 **`console`** 식별자를 검색한다.

전역 렉시컬 환경은 객체 환경 레코드와 선언적 환경 레코드가 존재한다.

**`console`** 식별자는 객체 환경 레코드의 **`BindingObject`** 를 통해 검색할 수 있다.

### 2 log 메소드 검색

**`console`** 식별자에 바인딩 된 **`console`** 객체에서 **`log`** 메소드를 검색한다.

이 때 **`log`** 메소드는 프로토타입 체인을 통해 검색한다.

**`log`** 메소드는 **상속받은** 프로퍼티가 아니라 **`console`** 객체가 **직접** 가지고 있는 프로퍼티이다.

```tsx
console.hasOwnProperty('log'); // true
```

### 3 표현식 (a + b + x + y + z) 에 대한 평가

console.log 메소드에 전달할 인수인 **`a + b + x + y + z`** 를 평가한다.

이 때 모든 식별자는 스코프 체인을 통해 현재 실행 중인 실행 컨텍스트부터 상위 스코프로 이동하며

검색한다.

- a: foo 함수 렉시컬 환경 → 20
- b: bar 함수 렉시컬 환경 → 10
- x: foo 함수 렉시컬 환경 → 3
- y: foo 함수 렉시컬 환경 → 4
- z: bar 함수 렉시컬 환경 → 5

### 4 console.log 메소드 실행

a + b + x + y + z 를 평가하여 만들어진 42 라는 값을 console.log 의 인수로 전달하여 실행한다.

## bar 함수 코드 실행 종료

console.log 를 실행한 후 bar 함수 내부에서는 더 이상 할 일이 없기 때문에

bar 함수 실행 컨텍스트가 실행 컨텍스트 스택에서 **pop** 되고

foo 함수 실행 컨텍스트가 실행 중인 실행 컨텍스트가 된다.

이 때 bar 함수 실행 컨텍스트가 종료되어서 bar 함수 렉시컬 환경은 독립적인 존재이기 때문에

즉시 소멸되지 않는다.

객체를 포함하여 모든 값은 누군가에 의해서 참조되지 않을 때, 가비지 컬렉터에 의해서

메모리 공간의 확보가 해제되어 소멸한다.

만약 bar 함수 실행 컨텍스트가 종료되어도 누군가의 의해서 bar 렉시컬 환경을 참조하고 있다면

bar 렉시컬 환경은 소멸되지 않는다. ( Closure )

## foo 함수 코드 실행 종료

foo 함수 또한 함수 내부에서 더 이상할 할 일이 없기 때문에 실행 컨텍스트 스택에서 **pop** 되어

전역 실행 컨텍스트가 실행 중인 실행 컨텍스트가 된다.

## 전역 코드 실행 종료

전역 코드에서도 더 이상 할 일이 없기 때문에 전역 실행 컨텍스트도 실행 컨텍스트 스택에서 **pop** 되어

실행 컨텍스트가 비워지게 된다.

실행 컨텍스트 생성 과정을 통해 코드가 실행되는 과정을 알아보자. 2