var, let, const의 차이와 변수 호이스팅

0. 들어가면서

지금은 주로 let, const만을 사용하고 그마저도 재할당할 경우가 많이 없기 때문에 거의 const 만을 사용하지만 면접 준비를 하다 기초를 제대로 다지고 가자는 생각으로 이 주제로 포스팅을 하게 되었습니다.

 

 

 

1. 자바스크립트 변수 선언 키워드

자바스크립트에서 변수를 선언하는 방법에는 var, let, const 세 가지가 있습니다. 세 가지 모두 변수를 선언하는 키워드이지만, 동작 방식, 범위(scope), 재할당 가능 여부 등에서 중요한 차이가 있습니다. 

 

그 차이점을 정리해보자면,

 

var는 ES6 이전에 주로 사용되던 변수 선언 키워드로, 함수 스코프를 가집니다. 이는 var로 선언된 변수가 함수 내에서만 지역 변수로 작동하고, 함수 외부에서는 전역 변수로 작동한다는 것을 의미합니다.

 

let과 const는 ES6에서 도입된 변수 선언 키워드로, 블록 스코프를 가집니다. 이는 let과 const로 선언된 변수가 중괄호({})로 둘러싸인 블록 내에서만 유효하다는 것을 의미합니다.

 

왜냐하면 var로 선언된 변수는 호이스팅되어 함수나 전역 스코프의 최상단으로 끌어올려지기 때문입니다. 반면, let과 const는 호이스팅은 되지만, 선언 전에 접근할 수 없는 '일시적 사각지대(Temporal Dead Zone, TDZ)'를 가집니다.

 

이러한 차이점은 변수의 스코프와 호이스팅 동작을 이해하는 데 중요합니다.

 

스코프와 호이스팅에 대해 알아보기 전에 세 가지 변수 선언 키워드를 표로 정리해보겠습니다.

항목	var	let	const
스코프	함수 스코프	블록 스코프	블록 스코프
호이스팅	✅ O (초기화는 안 됨)	✅ O (초기화 안 됨)	✅ O (초기화 안 됨)
재선언	✅ 가능 (같은 스코프 내에서도)	❌ 오류 발생	❌ 오류 발생
재할당	✅ 가능	✅ 가능	❌ 불가능
기본 사용 권장	❌ 지양	✅ 일반 변수	✅ 상수 또는 불변 참조

 

 

 

2. 스코프와 호이스팅

스코프는 각 변수가 사용이 가능한 범위를 뜻하는 용어로 사용됩니다. 아래 예시 코드를 통해 쉽게 이해할 수 있을 거 같습니다.

//var 예시
function example() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 10 (var는 함수 스코프 → if문 밖에서도 접근 가능)
}

//let 예시
function example() {
  if (true) {
    let y = 20;
  }
  console.log(y); // ❌ ReferenceError (블록 스코프)
}


//const 예시
const PI = 3.14;
PI = 3.14159; // ❌ TypeError (재할당 불가)

const arr = [1, 2, 3];
arr.push(4); // ✅ 가능 (참조는 상수지만 내부 변경은 가능)

 

각 변수 선언 키워드들의 호이스팅에 대해 알아보기 전에 호이스팅이 무엇인지 부터 짚고 넘어가겠습니다.

 

호이스팅은 자바스크립트에서 변수와 함수 선언을 코드의 최상단으로 끌어올리는 동작을 말합니다.

이는 코드를 실행하기 전에 변수와 함수 선언이 메모리에 저장되기 때문에 가능합니다.

 

var로 선언된 변수는 선언과 동시에 undefined로 초기화되며, 이후 실제 값으로 할당됩니다. 이로 인해 var로 선언된 변수는 선언 전에도 접근할 수 있으나, undefined 값을 가집니다.

 

반면, let과 const는 호이스팅되지만, 초기화되지 않습니다. 따라서 선언 전에 접근하려고 하면 참조 에러(ReferenceError)가 발생합니다. 이는 let과 const가 '일시적 사각지대'(TDZ)를 가지는 이유입니다.

 

왜냐하면 let과 const는 선언이 코드의 실행 흐름에 도달했을 때 초기화되기 때문입니다. 이는 var와는 다른 호이스팅 동작을 보여줍니다.

 

 

이 차이를 이해했다면 다음 코드 예시를 통해 쉽게 이해가 가능합니다.

console.log(a); // undefined
var a = 5;      // var는 선언이 위로 끌어올려짐(hoisting)

console.log(b); // ❌ ReferenceError
let b = 10;

console.log(c); // ❌ ReferenceError
const c = 15;

• var는 호이스팅 + 초기화(undefined)
• let과 const는 호이스팅은 되지만 초기화는 안 돼서 TDZ(Temporal Dead Zone)에 걸림

 

3. 결론

이러한 변수 선언 키워드의 특성을 이해하고 적절히 활용함으로써, 더 안정적이고 유지보수가 용이한 자바스크립트 애플리케이션을 개발할 수 있습니다.

 

왜냐하면 각 키워드의 스코프, 호이스팅, 글로벌 객체와의 관계를 이해하고 활용함으로써 코드의 안정성과 가독성을 높일 수 있기 때문입니다.

 

따라서 자바스크립트 개발자라면 var, let, const의 차이점을 명확히 이해하고, 상황에 맞게 적절히 활용하는 능력을 갖추어야 합니다.