[코어 자바스크립트] 2장 - 실행 컨텍스트

2장 - 실행 컨텍스트

실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다.

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

✔️ 콜스택 상태

전역 컨텍스트 생성(1) -> outer 실행 컨텍스트 생성(3) -> inner 실행 컨텍스트 생성(2) -> inner 실행 컨텍스트 제거 -> outer 실행 컨텍스트 제거 -> 전역 컨텍스트 제거

✔️ 실행 컨텍스트 객체에 담기는 정보

• VariableEnviornment : 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보
• LexicalEnvironment : 처음은 VariableEnvironment와 같지만 변경 사항이 실시간으로 반영됨
• ThisBinding : this 식별자가 바라봐야 할 대상 객체

✔️ 호이스팅

호이스팅 : 변수 정보를 수집하는 과정을 더욱 이해하기 쉬운 방법으로 대체한 가상의 개념으로 자바스크립트 엔진이 실제로 끌어올리지는 않지만 편의상 끌어올린 것으로 간주하자는 것

function a(x) {
  console.log(x); // 1
  var x;
  console.log(x); // 1
  var x = 2;
  console.log(x); // 2
}
a(1);

function a() {
  console.log(b); // b 함수
  var b = "bbb";
  console.log(b); // "bbb"
  function b() {
    console.log(b); // "bbb"
  }
}
a();

함수 선언문은 전체를 호이스팅하는 반면 함수 표현식은 변수 선언부만 호이스팅한다.

✔️ 스코프

스코프 : 식별자에 대한 유효범위

스코프 체인 : 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해 나가는 것(LexicalEnvironment의 outerEnvironmentReference로 검색)

❗ 여러 스코프에서 동일한 식별자를 선언한 경우에는 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에게만 접근이 가능하다