실행 컨텍스트

실행 컨텍스트란

실행 컨텍스트(execution context)는 코드를 실행하는데 필요한 환경을 제공하는 객체이며, 여기서 환경이란 코드 실행에 영향을 주는 조건이나 상태를 의미한다. 그리고 실행 컨텍스트는 식별자 결정을 더욱 효율적으로 하기 위한 수단으로서 필요한 정보를 한데 모아 제공하는 객체이다.
자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고(호이스팅), 외부 환경 정보를 구성하고, this값을 설정하는 등의 동작을 수행하는데, 이로인해 다른 언어에서는 발견할 수 없는 특이한 현상들이 발생한다.

실행 컨텍스트와 콜 스택

✨ 아래 예제를 통해서 콜 스택에 실행 컨텍스트가 쌓이는 과정 확인하기!

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

실행 컨텍스트 구조

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

Environment Record와 호이스팅

• 호이스팅이란? 선언문이 마치 최상단에 끌어올려진 듯한 현상
• Environment Record(환경 레코드)는 식별자와 식별자에 바인딩된 값을 기록한다.
• 함수 표현식 vs 함수 선언문
  함수 표현식은 변수에 함수를 담아서 함수를 선언하는 방식이며, 변수 호이스팅과 동일하게 동작한다. 함수 선언문은 선언과 동시에 함수가 생성되어 선언 전에도 함수를 사용할 수 있기 때문에 사용을 지양하자는 얘기도 있다.

// 함수 표현식
study();

const study = () => {
	// do study
};

// 함수 선언문
study();

function study () {
	// do study
};

Outer Environment와 스코프 체이닝

• 식별자 결정이란 코드에서 변수나 함수의 값을 결정하는 것
• 콜 스택 안에 동일한 식별자가 여럿일 때, 자바스크립트 엔진이 outer(=Outer Environment)를 활용해서 의사결정을 한다.
• 식별자를 결정할 때 활용하는 스코프들의 연결리스트를 스코프 체인이라고 하며, 식별자를 결정하기 위해 안에서부터 바깥으로 차례로 검색해 나가는 것을(찾는 과정 자체) 스코프 체이닝이라고 한다. 이를 가능케 하는 것이 바로 Lexical Environment의 Outer Environment이다.
  

출처 : 코어 자바스크립트 (도서)
https://www.youtube.com/watch?v=EWfujNzSUmw (유튜브)
https://www.theteams.kr/teams/6500/post/73683
사진 출처 : https://reese-dev.netlify.app/javascript/execution-context/