Execution Context (실행 컨텍스트)

실행 컨텍스트의 경우 완전히 이해하기란 너무 어렵기 때문에

 

실행 컨텍스트 내에 있는 Record , Outer에 대해 이해한 뒤

 

실행 컨텍스트가 무엇인지 간단하게 이해해보고자 한다.

 

Record

Record를 통해 JS 호이스팅을 이해하고자 한다.

 

호이스팅

var Test = "배병일"

console.log(Test) // => "배병일

Test를 선언하고 콘솔로 확인하면 예쌍한 결과가 나온다.

 

console.log(Test) // => undefined

var Test = "배병일"

Test를 선언하기 전에 콘솔로 찍어도 에러가 나지 않는다.

 

즉, Test가 선언되기 전부터 Test가 생성되었다는 걸 확인할 수 있다.

 

이를 선언문이 마치 최상단에 끌어 올려진 듯 하다고 해서

 

호이스팅(Hosting)이라고 한다.

 

호이스팅 이해하기

이해하기 쉽게 변수 호이스팅과 함수 호이스팅으로 나눴다.

 

변수 호이스팅

 

1. var

console.log(Test) // => undefined

var Test = "배병일"

console.log(Test) // => "배병일"

JS엔진에서 해당 코드를 실행하면

 

전역 실행 컨텍스트를 생성하여 Call Stack에 넣는다.

 

이후 선언할게 있는지 확인하고 선언한다.

 

환경 레코드에 선언된 Test를 기록하고 var 키워드로 선언했 기 때문에 값을 "undefined"로 초기화 한다.

이제 실행 단계를 통해 나머지 코드를 순차적으로 실행한다.

<실행 단계>

1. console.log(Test) =>  undefined 출력

2. var Test = "배병일" => 선언된 Test에 할당

3. console.log(Test)  => "배병일" 출력

- console.log의 경우도 별도의 실행 컨텍스트가 생성되지만 이번 설명에서는 생략

 

2. let , const

console.log(Test) // => ReferenceError 발생


let Test = "배병일"

~~~

console.log(Test) // => ReferenceError 발생

const age = 25

코드를 실행시키면 ReferenceError가 발생한다.

 

let, const의 경우 var와 다르게 값을 초기화하지 않고

 

이를 일시적 사각지대라고 한다.

함수 호이스팅

 

1. 함수 표현식

Test1(); // => TypeError 발생

var Test1 = () => {};

Test2(); // => ReferenceError 발생

const Test2 = () => {};

변수 호이스팅과 동일하고 동작하는 걸 확인할 수 있다.

• var로 선언 할 경우 "undefined"로 초기화
• undefined라는 데이터 타입은 함수에서 호출 불가능
• TypeError 발생

 

2. 함수 선언문 방식

Test(); // => 에러 발생하지 않음

function Test() {}

코드를 실행시키면 Test함수의 선언과 동시에

 

완성된 함수 객체를 생성하여 환경 레코드에 기록한다.

Outer

Outer의 정식 명칭은 외부 환경 참조 (Outer Environment Reference)이다.

- 바깥 Lexical Environment 를 가리킴

Outer를 통해 JS 스코프체이닝을 이해하고자 한다.

let Test = true

function Test1() {
	let Test = false
    
    console.log(Test)
}

Test1()

해당 코드를 실행시키면 생성 단계를 통해 선언된 Test와 함수들이

 

환경 레코드에 생성되고 실행 단계를 통해 코드를 순서대로 실행한다.

1. Test1 함수 실행
2. console.log(Test) 실행
3. Test의 값 찾기 => 어느 Test로 값을 정할지 고민

 

식별자 결정

이런 상황에서 변수나 함수의 값을 결정하는 방식을 식별자 결정이라고 하며,

 

Outer를 활용하여 식별자 결정이 이뤄진다.

<Example Code>
function Test1() {
	let Test = false
    
    Test2()
    function Test2() {
    	let age = 23
    
    	Test3()
    	function Test3() {
        	let name = "배병일"
        
        	console.log(name)
        	console.log(age)
        	console.log(Test)
        }
    }
}

Test1()

- Test1함수가 실행되는 시점부터 설명

 

   1. Test1 함수가 실행되면 Test1 실행 컨텍스트가 생성되고 Call Stack에 담긴다.

 

   2. Test2 함수가 실행되면 Test2 실행 컨텍스트가 생 성되고 Call Stack에 담긴다.

 

- Outer는 바깥 Lexical Environment에 접근할 수 있는 사다리 역할로 이해하면 된다.

 

3. Test3 함수가 실행되면 Test3 실행 컨텍스트가 생성되고 Call Stack에 담긴다.

 

- console.log 도 실행 컨텍스트가 생성되지만 생략

- console.log(name)의 경우 Test3에서 찾을 수 있다.
- console.log(age)의 경우 Test3에 존재하지 않기 때문에
- Outer를 통해 Test2에 있는 age를 찾는다.
- console.log(Test)의 경우 Test3, Test2에 존재하지 않고
- Outer를 통해 Test1에 있는 Test를 찾는다.

 

스코프 체인(Scope Chain)

식별자 결정에 활용하는 스코프들의 연결리스트를 스코프 체인(Scope Chain)이라고 한다.

 

스코프 체이닝(Scope Chaining)

식별자 결정을 위해 찾는 과정 자체를 스코프 체이닝(Scope Chaining)이라고 한다.

 

실행 컨텍스트 정의

코드를 실행하는데 필요한 환경을 제공하는 객체라고 할 수 있다.

 

환경

코드 실행에 영향을 주는 조건 또는 상태를 의미한다.