JavaScript 호이스팅(Hoisting) 쉽게 그리고 확실하게 이해하기
JavaScript 호이스팅(Hoisting)이 뭔지 쉽고 간단하게 한 번 정리해 볼까 합니다. 사실 호이스팅을 잘 몰라도 대부분의 경우에는 큰 문제는 없다고 생각하지만 이걸 몰라서 낭패를 볼 수 있는 경우도 분명 있을 수 있습니다.
이 글의 목적은 단순한 개념 정리가 아니라 다음과 같은 실력과 내공을 갖추는 것입니다:
- 누가 “JavaScript 호이스팅이 뭐예요?”라고 물으면 자신 있게 설명할 수 있다.
- 실무에서 호이스팅으로 인한 예상치 못한 에러를 피할 수 있다.
JavaScript 호이스팅이란?
JavaScript 코드가 실행되기 전에 변수와 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 현상을 말합니다. hoisting이라는 단어의 뜻도 끌어올리기이니 단어 뜻만 기억하면 잘 안 까먹을 것 같아요.
JavaScript 호이스팅 대표적인 5가지 유형 예제로 알아보기
1. var의 호이스팅
console.log(userName); // undefined 출력
var userName = "테스트";
console.log(userName); // "테스트" 출력name이라는 변수가 선언되기 전에 코드에 썼기 때문에 에러가 나야 할 것 같지만 undefined가 출력됩니다. JavaScript는 내가 위와 같이 코드를 작성했더라도 내부적으로는 아래와 같이 실행되기 때문에 그렇습니다.
var userName; // 선언부가 맨 위로 올라감
console.log(userName); // undefined 출력
userName = "테스트"; // 할당은 원래 위치에 남음
console.log(userName); // "테스트" 출력2. let과 const의 호이스팅
console.log(age); // ReferenceError: Cannot access 'age' before initialization
let age = 10;
console.log(age); // 에러가 발생해서 실행 안 됨
console.log(city); // ReferenceError: Cannot access 'city' before initialization
const city = "Seoul";
console.log(city); // 에러가 발생해서 실행 안 됨let과 const로 선언된 변수는 호이스팅은 되지만 초기화되기 전까지는 TDZ(Temporal Dead Zone, 일시적 사각지대)에 들어가 있기 때문에 접근이 불가능합니다. 이런 차이가 있어서 var에 비해 let과 const가 안전한 코딩이 가능하게 됩니다.
3. 함수 선언문의 호이스팅
sayHello(); // "Hello!" 출력
function sayHello() {
console.log("Hello!");
}JavaScript는 아래와 같이 함수 선언문 전체를 위로 끌어올린 것처럼 실행되기 때문에 정상 실행됩니다.
function sayHello() {
console.log("Hello!");
}
sayHello(); // "Hello!" 출력4. 함수 표현식의 호이스팅
sayHello(); // TypeError: sayHello is not a function
var sayHello = function() {
console.log("Hello!");
};함수 표현식은 변수 선언만 호이스팅 되고, 함수 할당은 원래 위치에 남아있기 때문에 is not a function 에러가 발생합니다. 아래와 같이 동작한다고 보시면 됩니다.
var sayHello; // 선언만 호이스팅
sayHello(); // 이 시점에서 sayHello는 undefined이므로 에러!
sayHello= function() {
console.log("Hello!");
};5. 화살표 함수의 호이스팅
sayHello(); // TypeError: sayHello is not a function
const sayHello = () => {
console.log("Hello!");
};화살표 함수의 호이스팅도 함수 표현식과 동일하게 동작합니다.
JavaScript 호이스팅으로 인한 실수를 방지하는 올바른 습관 3가지
- 변수는 항상 사용 전에 선언과 초기화를 먼저 하자.
- var 대신 let과 const를 사용하자.
- 함수 선언문보다는 함수 표현식이나 화살표 함수를 사용하자.
이 3가지만 잘 지키면 JavaScript 호이스팅으로 인한 혼란을 피할 수 있습니다.
마치며
아래 링크한 MDN Web Docs 용어 사전: 웹 용어 정의를 참조해서 제 스타일로 한 번 써봤습니다.
https://developer.mozilla.org/ko/docs/Glossary/Hoisting
이 정도 알면 JavaScript 호이스팅에 대해서는 어느 정도 자신 있게 설명할 수 있을 것 같습니다. 혹시라도 잘못된 부분이 있거나 보충할 만한 부분이 있으면 댓글로 공유해 주세요.
