[JS] 호이스팅

 
 
 

자바스크립트의 호이스팅

코드에서 변수와 함수 선언이 실제 코드 작성 위치와 관계없이 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 특징이다. 이는 자바스크립트 엔진이 코드를 실행하기 전에 변수와 함수의 선언을 메모리에 미리 할당하기 때문에 발생한다. 다만, 변수와 함수 선언 방식에 따라 호이스팅의 동작 방식이 다르다.
 

변수 호이스팅

변수 호이스팅은 변수 선언이 스코프의 최상단으로 끌어올려지는 것이다. var, let, const 세 가지 변수 선언 방식이 있는데, 각기 다른 호이스팅 동작 방식을 가지고 있다.
 

var로 선언한 변수

var로 선언된 변수는 선언만 호이스팅되고, 초기화(할당)는 호이스팅되지 않는다. 이로 인해 선언 전에 해당 변수를 참조하면 undefined가 반환된다.

console.log(myVar); // undefined
var myVar = 10;
console.log(myVar); // 10

 
이 코드에서 myVar는 선언만 끌어올려지며, 초기값은 할당되지 않기 때문에 첫 번째 console.log에서 undefined가 출력된다.
 

let과 const로 선언한 변수

let과 const로 선언된 변수 역시 호이스팅되지만, 이 변수들은 TDZ(Temporal Dead Zone)라는 구역에 들어가게 된다. 이 구역 안에서는 변수가 초기화되기 전까지 참조할 수 없으며, 참조 시 에러가 발생한다.

console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
let myLet = 20;

 
이 코드에서 myLet은 호이스팅되었지만, 초기화 전에 접근하려 하면 ReferenceError가 발생한다.
 
 

함수 호이스팅

자바스크립트에서는 함수 선언 방식에 따라 호이스팅 동작이 다르다.
 

함수 선언문

함수 선언문은 완전히 호이스팅된다. 즉, 함수의 선언과 정의가 모두 스코프의 최상단으로 끌어올려져 어디서든 호출이 가능하다.

 

console.log(myFunc()); // "Hello, world!"
function myFunc() {
  return "Hello, world!";
}

 
이 코드에서 myFunc는 함수 선언문으로 정의되어 있으므로, 선언 전에 호출해도 정상적으로 작동한다.
 
 

함수 표현식

함수 표현식은 var, let, const에 할당된 함수로, 변수 호이스팅 규칙을 따른다. var로 정의된 함수 표현식은 선언만 호이스팅되고, let과 const는 TDZ의 영향을 받는다.

console.log(myFunc); // undefined
var myFunc = function() {
  return "Hello!";
};
console.log(myFunc()); // "Hello!"

 
이 코드에서 myFunc는 함수 표현식으로 정의되었기 때문에 첫 번째 console.log에서는 undefined가 출력되고, 이후에 호출하면 정상적으로 작동한다.