[JavaScript] 실행콘텍스트와 변수 선언 방식(var, let, const)

정재남 님의 인프런 강좌, JS FLOW의 내용을 참고했습니다.

실행 콘텍스트 Execution Context

동일한 조건/환경을 지니는 코드 뭉치(scope)를 실행할 때 필요한 조건/환경 정보 혹은 그것을 담은 객체

1) 호출 스택 call stack

• 현재 어떤 함수가 동작하고 있는지, 다음에 어떤 함수가 호출되어야 하는지 등을 제어하는 자료구조.

• stack은 FILO(First In Last Out) 정책이다.

• 가장 먼저 호출된 함수가 가장 마지막에 끝나고, 가장 마지막에 호출된 함수가 가장 먼저 끝난다.

var a = 1;

function outer() {
  console.log(a); // 첫 번째로 실행. 1 출력

  function inner() {
    console.log(a); // 두 번째로 실행. undefined 출력
    var a = 3;
  }
  inner();
  console.log(a); // 세 번째로 실행. 1 출력
}

outer();
console.log(a); // 네 번째로 실행. 1 출력

2) Lexical Environment

• 실행 콘텍스트의 구성요소 중 하나.

• 사전 정의: 어휘적/사전적 환경.

• 식별자 환경. 해당 콘텍스트에서 어떤 변수와 함수를 어떻게 사용할 수 있는가.

• 구성 요소

  • Environment Record

  • Outer Environment Reference

참고: 실행콘텍스트 구성요소

1. Variable Environment: 가변적인 스냅샷. 별로 의미없다.
2. Lexical Environment
3. This Binding

2-1) Environment Record

• 현재 문맥의 식별자 정보. 선언된 변수와 함수.

• Hoisting의 방식으로 선언된 변수와 함수를 코드 실행 전에 수집한다.

  • 끌어 올리다, 라는 뜻.

  • 코드 실행 전에 선언된 식별자 정보(변수, 기명함수)를 먼저 수집하여 (가상으로) 코드 최상단에 끌어올린다.

  • 즉, 코드 전체를 읽고 식별자들을 선언부터 한 다음 코드를 실행하는 것.

  • var로 선언된 변수와 기명함수 선언문이 실질적으로 해당.

  • const와 let으로 선언된 변수와 함수 표현식들은 TDZ 때문에 실질적으로 해당되지 않는다.

2-1-1) TDZ와 변수 선언 방식들의 차이

var와 const / let의 결정적 차이 중 하나.

// 호이스팅됨. 선언 및 초기화 완료.
console.log(a);
var a = 3;

위 코드는 hosting으로 인해

var a;
console.log(a); // undefined
a = 3;

위와 같이 읽히며 에러 없이 undefined가 출력된다.

// 호이스팅 됨. 초기화는 안됨.
console.log(a);
const a = 3; // 초기화 및 할당
// let a = 3;

하지만 위와 같이 const 혹은 let으로 변수를 선언하면 Temporaly Dead Zone, TDZ가 발생하여 error가 발생한다.

이는 var로 선언하면 선언과 동시에 undefined로 값이 초기화되지만,

const나 let으로 선언하면 호이스팅은 되지만, 선언문에 도달하기 전까지 초기화 되지 않는다.

호이스팅 이후 선언문에 도달하기 전까지의 값 공백 상태를 TDZ라고 한다.

var, let, const의 차이를 정리하면 아래와 같다.

- var 
    1. 재할당 가능
    2. 재선언 가능
    3. Hoisting O
    4. TDZ 없음
    5. 함수 스코프
- let
    1. 재할당 가능
    2. 재선언 불가
    3. Hoisting O
    4. TDZ 있음
    5. 블록 스코프
- const
    1. 재할당 불가
    2. 재선언 불가
    3. Hoisting O
    4. TDZ 있음
    5. 블록 스코프
    6. 반드시 선언과 할당이 동시에 이루어져야 한다.

변수와 관련해 추가 설명 참고 : https://poiemaweb.com/es6-block-scope#15-%EC%A0%84%EC%97%AD-%EA%B0%9D%EC%B2%B4%EC%99%80-let

2-1-2) 함수 선언문과 함수 표현식

함수 선언문. 통째로 호이스팅된다.

function name() {

}

함수 표현식

var func1 = function () {

}

위 함수는 var 로 선언되었기 때문에 아래와 같이 읽힌다.

var func1;

func1 = function() {

}

2-2) Outer Environment Reference

• 현재 스코프에 관련 있는 외부 식별자 정보. 외부 스코프들의 식별자.

• Scope Chain 현상을 발생시킨다.

  • 현재 스코프에서 변수를 찾고 없으면 한 단계 밖 스코프에서 변수를 찾고 또 없으면 그 다음 스코프에서 변수를 찾는 현상

// global에서 선언된 변수는 모든 곳에서 사용 가능
var a = 1;

function outer() {
  // outer에서 선언된 변수는 inner와 outer에서 사용 가능
  console.log(a);

  function inner() {
    // inner에서 선언된 변수는 inner에서만 사용 가능
    console.log(a);
    var a = 3;
  }
  inner();
  console.log(a);
}

outer();
console.log(a);

정리

변수의 스코프는 결국 실행 콘텍스트에 의해 결정이 된다.

// global context
var a = 1;

function outer() {
  // outer context
  console.log(a);

  function inner() {
    // inner context
    console.log(a);
    var a = 3;
  }

  inner();
  console.log(a);
}

outer();
console.log(a);

위의 코드는 아래와 같이 실행된다.

-   전역 콘텍스트 시작
    1.  변수, 함수(기명함수) 선언 수집 (environment records)
    2.  코드 실행 시작
    3.  outer() 함수 호출

    -   outer 콘텍스트 시작
        1.  변수, 함수 선언 수집
        2.  코드 실행
        3.  inner()함수 호출

        -   inner 콘텍스트 시작
            1.  변수, 함수 선언 수집
            2.  코드 실행
            3.  return 되거나 코드가 끝나면 inner 실행 콘텍스트 종료

    -   outer 콘텍스트 복귀
        1. inner() 다음부분 실행
        2. return 되거나 코드가 끝나면 outer 콘텍스트 종료

-   전역 콘텍스트 복귀
    1. 종료될 때까지 남은 코드 실행.