스코프 & 호이스팅

스코프

스코프는 식별자(변수, 함수, 클래스 등)의 유효 범위를 의미합니다.

호이스팅

호이스팅은 식별자의 선언문이 스코프 최상단으로 끌어 올려진 것처럼 동작하는 자바스크립트 고유 특징을 의미합니다. 이는 식별자 선언이 코드 실행 시점 이전 단계에서 먼저 실행되기 때문입니다.

var vs let, const

var로 선언한 변수는 선언과 초기화가 동시에 진행됩니다. 따라서 선언되기 전에 참조해도 undefined를 반환합니다.

let과 const로 선언한 변수는 선언과 초기화가 분리되어 진행됩니다. 따라서 선언되기 이전에 참조할 시 참조 에러가 발생합니다.

(코드 실행 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행됩니다. 스코프의 시작 지점부터 초기화 시작 지점(변수 선언문)까지 변수를 참조할 수 없는 구간을 TDZ(Temporal Dead Zone)라고 합니다.)

함수 선언문 vs 함수 표현식

함수 선언문으로 정의한 함수는 선언되기 이전에도 호출이 가능합니다.

(함수 호이스팅 발생 -> 자바스크립트 엔진은 (코드 실행 시점 이전에) 함수 선언문을 해석해 함수 객체를 생성합니다. 이때 함수 이름은 함수 몸체 내부에서만 유효한 식별자이므로 함수 이름과는 별도로 생성된 함수 객체를 가리키는 식별자가 필요합니다. 따라서 자바스크립트 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당합니다.)

함수 표현식으로 정의한 함수는 선언되기 이전에 호출할 시 에러가 발생합니다.

(변수 호이스팅 발생 -> 함수 표현식은 변수 선언문과 변수 할당문을 한 번에 기술한 축약 표현과 동일하게 작동합니다.)

[정리]

• var : 선언문 이전에 변수에 접근해도 에러 X, undefined 반환
• let, const : 선언문 이전에 변수에 접근할 시 참조 에러
• 함수 선언문 : 선언문 이전에 호출 가능
• 함수 표현식 : 선언문 이전에 호출 시 에러
• TDZ(Temporal Dead Zone): 변수의 선언과 초기화 사이에 일시적으로 변수 값을 참조할 수 없는 구간

추가 학습

• 실행 컨텍스트