[JavaScript] 호이스팅(Hoisting)이란 무엇인가?

호이스팅 (Hoisting)

호이스팅(hoisting)이란,끌어올리다, 올리다, 게양등의 뜻으로 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.
쉽게 말해서 변수 및 함수 선언이 해당 스코프의 상단으로 "끌어올려지는" 현상을 말합니다.
예시 코드를 통해서 알아보겠습니다.

// 입력 코드
console.log(a) // undefined
var a = 5;

// 실제로는 아래와 같이 실행
var a
console.log(a) // undefined
a = 5

즉, 코드의 실행 순서와는 상관없이 변수 및 함수 선언이 스코프 상단으로 옮겨지는 것을 의미합니다.

var과 let, const의 차이

var, let, const는 자바스크립트에서 변수를 선언하기 위해 사용이 되는 키워드입니다.
자바스크립트 ES5까지는 변수 선언은 var만을 이용하여 작업을 하였는데, ES6부터 let과 const로도 변수 선언을 할 수 있게 되었습니다.
var, let, const는 호이스팅에 있어서 차이점이 크게 존재합니다.
var로 변수를 선언을 하게 되면 호이스팅 시 선언과 동시에 undefined로 변수를 초기화합니다.
하지만 let 또는 const로 변수를 선언을 하게 되면 호이스팅 시 변수를 초기화하지 않습니다.
따라서 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외가 발생하게 됩니다.
예시를 통해서 알아보겠습니다.

console.log(a) // undefined
var a = 5;

console.log(b) // ReferenceError: b is not defined
let b = 5;

결론

호이스팅은 JavaScript의 독특한 동작 중 하나로,
잘 이해하고 관리하지 않으면 코드의 가독성이 떨어지고, 생각지 못한 예외, 에러가 발생할 수 있으므로 주의해야 합니다.
따라서 변수 및 함수를 선언하기 전에 사용하지 않도록 주의하고, 변수 선언 시에는 var이 아닌 let 또는 const를 이용하는 방법이 좋습니다.

참고

MDN Web Docs 용어 사전: 웹 용어 정의 - 호이스팅
호이스팅(hoisting)이란?
[JavaScript] 호이스팅(Hoisting)이란