[JS] 호이스팅 기본 정리

호이스팅이란?

JavaScript의 특징 중 하나

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미

변수 호이스팅

var 키워드로 선언한 변수의 호이스팅과 let, const 키워드로 선언한 변수의 호이스팅은 다르게 작동합니다.

console.log(foo);  // undefined

var foo; // 변수 선언 + 초기화(undefined)

위 예시에서는 변수 참조간의 발생하는 에러인 ReferenceError가 아닌 undefined 값이 반환되는 것을 알 수 있습니다.

var foo; 처럼 사용자가 초기화를 따로 하지 않으면 자바스크립트 엔진에 의해 var 키워드로 선언한 변수는 undefined 값으로 초기화가 진행됩니다.

console.log(bar);  

let bar; // 변수 선언 + 초기화X

let 키워드로 위처럼 진행하게 되면 ReferenceError가 발생합니다.

그 이유는 let 키워드는 변수 호이스팅으로 선언은 위로 올라오지만 var 키워드처럼 undefined로 초기화하는 과정은 진행되지 않습니다.

추가로 const 키워드의 경우에는 항상 선언과 초기화를 동시에 진행해야 합니다.

함수 호이스팅

함수 호이스팅에 대해 알기 전에 함수 선언문과 함수 표현식의 차이를 알아야합니다.

// 함수 참조
console.dir(myName);  //  f myName(name)
console.dir(myLocation);  // undefined

// 함수 호출
console.log(myName("Kim"));  // My name is Kim
console.log(myLocation("Seoul")); //  TypeError

// 함수 선언문
function myName(name) {
	return "My name is " + name;
};

// 함수 표현식
var myLocation = function (location) {
	return "I live in " + location;
};

함수 호이스팅의 경우 런타임 이전에 함수 객체를 먼저 생성합니다.

함수 선언문의 경우 함수 선언문 이전에 호출이 가능하지만 함수 표현식은 불가능합니다.

그 이유로는 함수 표현식은 함수 호이스팅이 아닌 변수 호이스팅이 발생하기 때문에 함수 표현식 이전에 참조하면 undefined로 평가 됩니다.