[JS 톺아보기] 호이스팅(Hoisting)과 var/let/const

2026년 07월 13일

3분

호이스팅(Hoisting)이란?

호이스팅이란 변수/함수 선언이 코드 실행 전에 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 자바스크립트의 특성이다.
실제로 코드가 이동하는 것은 아니며, 자바스크립트 엔진이 코드를 실행하기 전 선언을 먼저 메모리에 등록하기 때문에 발생한다.

var는 함수 스코프를 가지며, 블록({})을 무시한다.

if (true) {
  var x = 10;
}
console.log(x); // 10 (블록 밖에서도 접근 가능)

호이스팅 시 선언과 동시에 undefined로 초기화되어, 선언 전에 참조해도 에러가 나지 않는다.

console.log(name); // undefined
var name = '길동';

재선언, 재할당 모두 가능하여 예기치 못한 버그를 만들기 쉽다.

var name = '길동';
var name = '철수'; // 재선언 가능
name = '영희';     // 재할당 가능

let은 블록 스코프를 가지며, 블록 밖에서 접근이 불가능하다.

if (true) {
  let x = 10;
}
console.log(x); // ReferenceError

**TDZ(Temporal Dead Zone)**가 존재하여 선언 전에 접근하면 에러가 발생한다.

console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = '길동';

재할당은 가능하지만 재선언은 불가능하다.

let name = '길동';
name = '철수';     // 재할당 가능
let name = '영희'; // SyntaxError: 재선언 불가

const는 let과 스코프/TDZ 특성이 동일하지만, 재할당이 불가능하다. 선언과 동시에 값을 할당해야 한다.

const name = '길동';
name = '철수'; // TypeError: Assignment to constant variable

단, 객체나 배열의 경우 내부 값은 변경 가능하다.

const obj = { name: '길동' };
obj.name = '철수'; // 가능
obj = {};          // TypeError

결론

현대 자바스크립트에서는 var 사용을 지양하고, 기본적으로 const를 사용하되 재할당이 필요한 경우에만 let을 사용하는 것이 권장된다.