[⭐️⭐️⭐️⭐️⭐️] 호이스팅에 대해

console.log(score);

var score;

위 코드를 실행시킨 결과는 어떻게 될까요?

1. 참조 에러(ReferenceError)

2. undefined

 

정답은 2번입니다.

 

이유는 변수 선언의 실행 시점에 연관이 있습니다.

 

자바스크립트 코드는 기본적으로 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 console.log(score);가 가장 먼저 실행되고 순차적으로 다음 줄에 있는 코드를 실행합니다.

 

하지만, 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임(runtime)이 아니라 그 이전 단계에서 먼저 실행되기 때문에 참조에러가 아닌 undefined가 출력되는 것입니다.

즉, 자바스크립트 엔진은 변수 선언이 소스코드 어디에 있든 상관없이 다른 코드보다 먼저 실행됩니다.

⇒ 변수 선언이 소스코드의 어디에 위치하는지와 상관없이 어디서든 변수를 참조할 수 있습니다. ✅

 

이처럼 변수 선언문이 코드의 선두로 끌어 올린 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅(variable hoisting)이라 한다.

 

함수 호이스팅은 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출할 수 있는데, 함수 표현식으로 정의한 함수는 함수 선언문 이후에 호출해야한다.

 

그 이유는 함수 선언문으로 정의한 함수와 함수 표현식, 화살표 함수로 정의한 함수의 생성 시점이 다르기 때문이다.

함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다.

 

⚠️ 함수 선언문으로 함수를 정의하면 런타임 이전에 함수 객체가 먼저 생성됩니다. 그리고 자바스크립트 엔진은 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 생성된 함수 객체를 할당합니다.

함수 표현식은 변수에 할당되는 값이 함수 리터럴인 문이다. 따라서 함수 표현식은 변수 선언문과 변수 할당문을 한 번에 기술한 축약 표현과 동일하게 동작한다. 변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가되므로 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다. 따라서 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다.

// 함수 참조
console.dir(add); // f add(x, y)
console.dir(sub); // undefined

// 함수 호출
console.log(add(2,5)); // 7
console.log(sub(2,7)); // TypeError: sub is not a function

// 함수 선언문
function add(x, y) {
	return x + y;
}
// 함수 표현식
const sub = function(x, y) {
	return x - y;
}