호이스팅 간단하게 정리

호이스팅(Hoisting)은 자바스크립트에서 변수 및 함수 선언이 해당 스코프의 최상위로 끌어올려지는 것을 의미한다.

즉, 변수나 함수가 선언되기 전에도 참조할 수 있다. 호이스팅은 코드의 구조를 파악하기 어렵게 만들 수 있으므로 코드의 가독성과 유지보수성을 해칠 수 있다.

 

예를 들어 다음과 같은 코드가 있을 때, 실제로는 아래와 같이 해석된다.

console.log(x);
var x = 10;

--

var x; // 변수 x가 호이스팅되어 선언됨
console.log(x); // x는 undefined
x = 10; // 할당이 이루어짐

 

 

var와 function은 호이스팅이 발생하는데, 변수나 함수가 선언되기 전에도 참조할 수 있게 된다. 이때 변수는 undefined로 초기화되고, 함수는 전체가 끌어올려지게 된다.

let과 const는 블록 스코프 변수로, 호이스팅이 발생하지 않는다. 따라서 변수를 선언하기 전에 사용하면 참조 에러(ReferenceError)가 발생한다.

따라서 호이스팅을 피하고자 한다면 var와 function 대신에 let과 const를 사용하고, 변수나 함수 선언을 스코프의 최상단이 아니라 필요한 위치에서 하도록 하는 것이 좋다.

 

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

console.log(y); // ReferenceError: y is not defined
let y = 20;