[내만족 JS]변수 선언과 호이스팅에 대해서

자바스크립트 엔진과 소스 코드

💡 소스코드 평가 단계 → 소스코드 실행 단계

자바스크립트 엔진은 소스코드를 평가하는 단계를 거쳐 실행 단계에 이릅니다.

• 평가 단계) 소스 코드 평가 단계에서 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행
• 실행 단계) 이후 소스코드 평가 과정이 끝나면 비로소 선언문을 제외한 소스코드를 한 줄씩 순차적으로 실행

다시 말해서 모든 선언문(변수/함수 선언문)은 코드의 어느 위치에 있는지 상관없이 다른 코드보다 항상 먼저 자바스크립트 엔진에 의해 실행됩니다.
따라서 코드 어디에서든 선언한 변수나 함수를 참조할 수 있습니다.

변수 선언과 호이스팅

자바스크립트 엔진은 다음의 2단계를 거쳐 변수를 선언합니다.
잠시후에 이 부분에 대해서 var 키워드와 let 키워드의 차이점을 알아볼 것입니다.

1. 선언 단계: 변수 이름을 등록
2. 초기화 단계: 값을 저장하기 위해 메모리 공간을 확보하고 암묵적으로 undefined를 할당해서 초기화

다음 코드를 살펴보겠습니다.

console.log(cookie);  // undefined

var cookie;  // 변수 선언문

참조 에러(Reference Error)가 발생할 것처럼 보이지만 콘솔에는 undefined가 출력됩니다.
이는 변수 선언, 즉 변수 선언 및 초기화 단계가 런타임 이전 단계에서 먼저 실행되는 것을 의미합니다.
(이때 런타임은 소스 코드를 순차적으로 실행하는 단계를 뜻합니다)
이처럼 변수 선언문이 코드의 제일 앞으로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라 합니다.

var, let, const, function, class 키워드를 사용해서 선언한 모든 식별자(변수, 함수, 클래스)는 호이스팅 됩니다.
모든 선언문은 런타임 이전 단계에 먼저 실행되기 때문입니다.

값의 할당

한 가지 주의해야 할 점이 있습니다.
바로 변수 선언과 값의 할당은 서로 다른 시점에 발생한다는 사실입니다.

• 변수 선언은 런타임 이전에 먼저 실행
• 반면에 값의 할당은 런타임에 실행

따라서 다음과 같은 결과가 가능합니다.

console.log(cookie);  // undefined;

var cookie = 100;  // 변수 선언 + 값의 할당

console.log(cookie);  // 100

var v.s. let

var: 변수 선언 단계와 변수 초기화 단계가 한번에 진행
let: 변수 선언 단계와 변수 초기화 단계가 분리돼 진행

다시 말해서 let 키워드로 변수를 선언하면

• 자바스크립트 엔진에 의해 선언 단계가 먼저 실행되지만
• 초기화 단계는 변수 선언문에 도달했을 때 실행됩니다.

만약 초기화 단계가 실행되기 이전에 변수에 접근하려 하면 참조 에러(Reference Error)가 발생합니다.
이때 let 키워드로 선언한 변수의 스코프 시작점부터 초기화 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대(TDZ)라고 합니다.

다음 코드를 살펴보겠습니다.
참조에러가 발생한 부분이 바로 일시적 사각지대 입니다.

console.log(cookie);  // Reference Error: foo is not defined

let cookie;  // 이 지점에서 초기화 단계가 실행
console.log(cookie);  // undefined

foo = 1;  // 값의 할당
console.log(foo);  // 1

두 번째 예시코드를 살펴보겠습니다.

let cookie = 10;

{
  console.log(cookie);  // Reference Error: Cannot access 'cookie' before initialization
  let cookie = 20;
}

얼핏 보면 let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 보입니다.
하지만 let 키워드로 선언한 변수도 변수 호이스팅이 엄연히 발생합니다.
위 코드에서 만약 변수 호이스팅이 발생하지 않는다면 cookie는 10을 출력해야 합니다.
하지만 let으로 선언한 변수도 변수 호이스팅이 발생하기 때문에 참조 에러가 발생합니다.