[테코톡] 실행 컨텍스트

1. 호이스팅

자바스크립트 엔진은 콜 스택에 전역 실행컨텍스트를 담는다.

• environmentRecord
  • 현재 컨텍스트와 관련된 코드들의 식별자 정보들이 저장
  • 매개변수 이름, 함수 선언, 변수명 등을 순서대로 수집
• outerEnvironmentReference
  • 바로 직전 컨텍스트(해당 함수가 선언된 위치)의 LexicalEvironment 정보를 참조

콜스택에서는 가장 최근에 실행된 실행컨텍스트만 활성화된다. 만약 함수 a에서 함수 b가 실행되면 또 실행 컨텍스트를 담는다. 함수 b의 실행을 마치고 함수 b가 종료되면 실행컨텍스트가 사라지고 다시 a로 돌아옴. 에이도 종료되면 전역 컨텍스트로.

console.log(TVChannel) //undefined

var TVChannel = "Netflix";
console.log(TVChannel); //Netflix

 

 

다른 언어라면 에러가 나겠지만, 자바스크립트의 경우에는 undefined가 출력된다. TVChannel이라는 변수가 첫번째 console.log 전에 이미 만들어진 것 처럼 보인다. 이렇게 선언 라인 전에도 에러가 나지 않고 변수를 참조할 수 있는 현상을, 선언문이 마치 최상단에 끌려오진 듯한 현상인듯 해서, 호이스팅이라고 부른다.

물론 물리적으로 끌어올린게 아니라, 자바스크립트 엔진이 먼저 코드를 스캔하면서 변수 같은 정보를 실행컨텍스트 어딘가(environment Record)에 미리 기록해 놓는다.

• 생성단계 : execution context 생성. 선언문만 실행해서 environment record에 기록
• 실행단계 : 선언문 외 나머지 코드 순차적 실행. environment record를 참조하거나 업데이트

변수 호이스팅

• var : 선언과 동시에 메모리 공간을 확보하고 undefined로 초기화한다.
• let, const : 식별자를 기록해두긴 하지만 값을 초기화하진않는다 . 위의 예제에서, 선언문 이전에 TVChannel을 참조하려고 하면 reference error가 발생한다. 즉, 선언 라인 이전에는 변수를 참조할 수 없다. (일반적인 프로그래밍 언어의 규칙을 따라가도록 보완함)

함수 호이스팅

study();
var study = () => {};

• environment record에 있는 study : undefined
• undefined라는 데이터타입은 함수와 달리 호출될 수 없기 때문에 type error가 발생한다.

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

• 같은 함수를 const 키워드로 선언하면 아직 환경레코드에 기록된 값이 없어 reference error가 발생.
• 함수를 변수에 담아서 함수를 선언하는 방식을 함수 표현식이라고 하는데, 함수를 변수에 담고 있기 때문에 앞서 살펴본 변수 호이스팅과 똑같이 작동한다,

study();
function study() {}

• Function 함수
• 함수 선언문 방식으로 함수를 선언하는 경우에는 엔진이 스터디 함수의 선언과 동시에 완성된 함수 객체를 생성해서 환경 레코드에 기록해둡니다. 그리고 study 함수를 실행하면 에러 없이 실행된다.
• 함수 선언문 : 선언과 동시에 함수가 생성되어 선언 전에도 함수를 사용할 수 있음

정리하자면, 환경레코드에 담기는 값들은 다음과 같다.

• 함수 표현식
  var : {study : undefined}
  let, const : {study }
• 함수 선언문
  {study : f{} }

2. 스코프 체이닝

• 식별자 결정 : 콜스택 안에 동일한 식별자가 여럿일때 자바스크립트 엔진이 어떻게 outer를 활용해서 의사결정을 하는지

let lamp = false;

function goTo2F() {
    let lamp = true;
    console.log(lamp)
}

goTo2F();

• 변수 섀도잉 : 상위 스코프에서 값을 찾으면 그 밑으론 더 안내려감. 동일한 식별자로 인해 상위 스코프에서 선언된 식별자의 값이 가려지는 현상

3층에 없으면 2층으로 가서 찾고, 2층에 없으면 1층에 가서 찾음. 이렇게 식별자를 결정할 때 활용하는 스코프들의 연결리스트를 스코프 체인이라고, 하고 이런 과정을 스코프체이닝이라고 한다.

3. 실행컨텍스트 정리

• 실행컨텍스트 : 코드를 실행하는데 필요한 환경을 제공하는 객체
• 환경 : 코드 실행에 영향을 주는 조건이나 상태
• Es3 : 당시에는 함수가 어디에서 호출되느냐에 따라 결정 (동적 스코프)
• Es5 : 실행컨텍스트라는 하나의 덩어리, 하나의 묶음으로 결정 (정적 스코프)

즉, 실행컨텍스트는 식별자 결정을 더욱 효율적으로 하기 위한 수단.

 

참고