실행컨텍스트(Execution Context)

yoonee·2023년 6월 30일

실행컨텍스트란? (Execution Context)

→ 코드를 실행할 때 식별자를 더욱 효율적으로 결정하기 위한 수단으로써, 필요한 정보를 한데 모아 제공하는 객체.

스코프란?
식별자 접근 규칙에 따른 유효 범위
→ 식별자를 검색하기 위한 규칙을 제공하는 수단으로, 실행 컨텍스트 내에 존재하며, 렉시컬 환경을 통해 관리된다. (자바스크립트는 렉시컬스코프를 따르기때문에 함수는 태어나자마자 상위스코프가 결정 됨)
- 렉시컬스코프란?
→ 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정되는 것.

second() 함수의 상위스코프는 1

second() 함수의 상위스코프는 10
가장 바깥에서 호출한 second() 함수 는 함수 외부에서 호출했기 때문에 error

전역 스코프

→ 전역(가장 바깥 영역)에서 선언된 변수와 함수. 어디서든지 사용할 수 있다.

함수레벨 스코프

→ 함수 내부에서 선언된 변수나 함수는 함수 내부에서만 유효하며, 함수 외부에서는 사용할 수 없다.

호이스팅이란?
→ 자바스크립트 엔진이 먼저 전체 코드를 스캔하면서 변수같은 정보를 실행컨텍스트 어딘가에 미리 기록해 두어, 해당 식별자를 더욱 빠르게 검색할 수 있도록 하는 것. → 끌어올린다. 밑에 선언은 하지만 함수 스코프에 의해서
var?
→ var 키워드로 선언한 변수는 블록 스코프(if, for …)를 무시하고 블록 밖에서도 접근 가능하다.
함수스코프를 따르기 때문.

블록 스코프

→ let, const 키워드로 선언된 변수는 블록 내부에서만 유효하며, 블록 외부에서는 사용할 수 없다.

type 이라는 블록 내부에서는 콘솔이 찍히지만 외부에선 error

실행 컨텍스트 구성

Lexical environment

Environment Record 환경 레코드 - ****현재 실행중인 코드 환경의 this값과 선언된 모든 변수와 함수가 저장되는 곳

첫 번째 요소는 Environment Record로 해당 실행 컨텍스트에 선언되어 있는 변수, 함수들이 모여있는 요소이다.
함수가 실행될 때 함수에 선언되어 있는 변수, 함수들을 먼저 모아두기 때문에 호이스팅이 발생한다. (함수레벨 스코프)

내부에서 쓸 값들을 Environment Record 에 담은 후 코드 실행이 된다.

Outer Environment Reference 외부환경 참조 - 외부 변수에 접근
```
const so = "소";

function foo1() {
    const yoon = "윤";
    console.log(x + so + yoon);

    function foo3() {
        const park = "박";
        console.log(park + so + x);
    }
    foo3();
}

function foo2() {
    const soyoon = "소윤";
    console.log(so + soyoon);
}

foo1();
foo2();
```
- foo1, foo3, foo2 함수에는 so라는 변수가 할당되어있지 않지만 콘솔은 나온다.
  이는 Outer Environment Reference가 실행되기 때문이다.
- 함수를 실행할때 Environment Record 에서 먼저 해당 값을 찾은 후, 그 값이 없다면
  Outer Environment Reference을 통해 하나씩 바깥으로 나가며 이 변수를 찾으려고 한다 이게 바로 스코프 체인이다.

만약, foo3 에서 so변수라는 같은이름의 변수를 선언한다면, 이미 Environment Record 에서 “쏘” 라는 값을 찾았기 때문에 상위 스코프로 올라가지 않고 멈춘다.

이처럼 동일한 식별자로 인해 상위 스코프에서 선언된 식별자의 값이 가려지는 현상을 변수섀도잉 이라고 한다.

→ 필요한 정보를 객체로 구성하여 이를 콜 스택에 쌓아올려, 가장 위에 쌓여있는 컨텍스트와 관련있는 코드들을 실행, 마지막으로 콜 스택에서 해당 컨텍스트를 pop하여 제거함, 변경 사항이 실시간으로 반영됨

Variable Environment

→ 선언 시점의 Lexical Environment 의 스냅샷. 변경 사항은 반영되지 않는다.
현재 컨텍스트 내의 식별자들에 대한 정보 . Variable Environment 에 먼저 정보를 저장 한 후 이를 복사해서 Lexical Environment 를 만듬.

따라서 실행컨텍스트(Execution Context)는

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

전역환경은 어디서든 접근이 가능한 스코프이기 때문에 코드의 안정성을 위해 지양해야한다..

yoonee

이전 포스트

[React] Virtual DOM 이란?

다음 포스트