[javascript] 호이스팅과 변수 선언

선언과 초기화

js 엔진은 선언 단계와 초기화 단계를 거쳐서 변수 선언을 수행함

• 선언 단계 : 변수 이름을 실행 컨텍스트에 등록해 js엔진에 변수의 존재를 알림
• 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보, 암묵적으로 undefined를 할당

실행 컨텍스트 : js엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역. js 엔진은 실행 컨텍스트를 통해 식별자와 스코프를 관리함

호이스팅

변수 선언의 실행 시점은 런타임 이전의 평가 과정이다. 이 때문에 변수 선언이 코드의 맨 앞으로 간 것처럼 보이는 현상을 변수 호이스팅이라 함

• var 키워드로 선언된 변수는 선언시에 undefined로의 초기화도 동시에 일어남

console.log(a); // reference error가 아닌 undefined이 출력된다

var a;

var의 단점과 let, const 호이스팅

var키워드는 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원하기 때문에 의도치 않게 전역 변수가 선언되어 부작용을 발생 시킬 수 있음 → 블록 레벨 스코프를 지원하는 let, const 등장

let, const로 선언한 변수 또한 호이스팅이 일어남. 하지만 선언과 동시에 undefined가 초기화되는 var과는 다르게 let과 const는 선언과 초기화가 분리되어있기 때문에 호이스팅이 일어나지 않는 것처럼 보임.

console.log(a); // reference error
let a;
console.log(a); // undefined
a = 0;
console.log(a); // 0

let a = 0;
{	// 블록 스코프 생성	
	console.log(a); // reference error 발생
	// 호이스팅이 일어나지 않았다면 상위 스코프 변수 a의 값이 출력되어야 함
	let a;
}

참고 자료 : 모던자바스크립트 Deep Dive - 이웅모 저