목차
📝 호이스팅은 무엇인가
JavaScript를 배우다 보면 “호이스팅 때문에 이런 결과가 나온다”라는 설명을 자주 듣게 됩니다.
하지만 막상 이 개념이 정확히 무엇인지 어디까지 적용되는지를 명확하게 설명하기는 쉽지 않습니다.
호이스팅을 외워야 할 규칙이 아니라
JavaScript 실행 구조의 결과로 이해하도록 정리해 보겠습니다.
호이스팅 (Hoisting)은
변수와 함수 선언이 코드 실행 전에 메모리에 먼저 등록되는 동작을 의미합니다.
여기서 중요한 포인트는 두 가지입니다.
1. 선언만 호이스팅된다
2. 값 할당은 호이스팅되지 않는다
이 차이를 이해하지 못하면
계속 헷갈리는 개념으로 남습니다.
📝 예제로 보기
아래 코드를 먼저 봅시다.
console.log(a);
var a = 10;이 코드는 에러가 아니라 undefined를 출력합니다.
이유는 JavaScript 엔진이 코드를 다음과 같이 해석하기 때문입니다.
var a;
console.log(a);
a = 10;변수 a 의 선언은 위로 끌어 올려지고
값 할당은 원래 위치에 남아 있습니다.
이 현상을 호이스팅이라고 부릅니다.
📝 함수 호이스팅은 왜 다르게 보일까
함수는 변수보다 더 혼란을 줍니다.
sayHello();
function sayHello() {
console.log('Hello');
}이 코드는 문제없이 실행됩니다.
함수 선언문은 함수 전체가 호이스팅되기 때문입니다.
반면, 아래 코드는 다릅니다.
sayHi();
var sayHi = function () {
console.log('Hi');
};이 경우에는 에러가 발생합니다.
이유는 sayHi는 변수로만 호이스팅 되고 함수 할당은 아직 이루어지지 않았기 때문입니다.
📝 var / let / const 호이스팅 차이
모든 선언이 동일하게 동작하지는 않습니다.
그래서 아래 코드는 에러가 납니다.
console.log(b);
let b = 10;이는 호이스팅이 되지 않아서가 아니라
TDZ (Temporal Dead Zone) 구간에 접근했기 때문입니다.
“호이스팅이 안 된다”는 말은 정확하지 않다
자주 나오는 설명 중 하나가
“let과 const는 호이스팅이 안 된다”입니다.
이 표현은 엄밀히 말하면 틀린 표현입니다.
let / const도 선언 단계에서 메모리에 등록된다
단, 초기화 전에는 접근할 수 없도록 막혀 있다
그래서 더 정확한 표현은 다음과 같습니다.
초기화 이전에는 접근할 수 없다
이렇게 이해하면
TDZ 개념도 자연스럽게 연결됩니다.
📝 호이스팅은 왜 존재할까
호이스팅은 우연이 아니라 JavaScript의 실행 컨텍스트 생성 과정에서 자연스럽게 발생합니다.
코드가 실행되기 전, 엔진은 다음을 먼저 수행합니다.
- 변수 선언 수집
- 함수 선언 수집
- 스코프 구조 확정
이 단계가 끝난 후에야 코드가 위에서 아래로 실행됩니다.
즉, 이 동작은
미리 준비하는 단계의 결과입니다.
📝 문제가 되는 패턴
호이스팅 자체가 문제라기 보다는 의존하게 되는 코드 구조가 문제를 만듭니다.
다음과 같은 경우는 특히 주의가 필요합니다.
if (true) {
var count = 3;
}
console.log(count); // 이 코드는 동작하지만 의도치 않은 접근이 코드는 동작하지만 의도를 흐리게 만드는 대표적인 예 입니다.
📝 안전하게 다루는 기준
다음 기준만 지켜도 대부분의 문제를 피할 수 있습니다.
이렇게만 해도 이 동작은 버그의 원인이 아니라 예측 가능한 동작이 됩니다.
또한 호이스팅은 디버깅 과정에서도
원인을 추적하기 어렵게 만드는 요소가 됩니다.
초기화 되지 않은 변수를 참조하는 경우 에러가 아닌 undefined가 반환 되면서 문제 인지가 늦어질 수 있습니다.
그래서 최근 코드 스타일 가이드에서는 의도적으로 호이스팅 효과가 드러나지 않도록
작성하는 것을 권장하는 경우도 늘고 있습니다.
📝 자주 나오는 질문
“그럼 호이스팅은 무조건 피해야 하나요?”
이 질문을 많이 받습니다.
결론부터 말하면 피할 대상은 아닙니다.
이 동작은 JavaScript 실행 구조의 일부이며 문제는 이 개념을 모르고 작성한 코드입니다.
의도를 드러내는 코드,
선언과 사용 순서가 명확한 코드는
호이스팅이 있어도 문제가 되지 않습니다.
📖 마무리
호이스팅은
JavaScript가 멋대로 코드를 바꾸는 현상이 아닙니다.
코드를 실행하기 전에 미리 구조를 정리하는 과정 입니다.
이 개념을 이해하면
왜 undefined가 나오고
왜 어떤 코드는 에러가 나는지
자연스럽게 설명할 수 있게 됩니다.
결국 중요한 것은
피하는 것이 아니라
호이스팅을 전제로 코드를 작성하는 감각 입니다.
