[JavaScript] var, let, const 차이와 호이스팅 개념 정리

1. var, let, const 차이

🔸 var

: variable(변동이 심한, 가변적인)의 약자, ES6 이전에 사용되던 변수 선언 방식이고 요즘은 잘 안 쓴다. 특별한 경우가 아니면 안 쓰는걸 추천.

• function scope나 global scope에서 변수 선언이 이루어진다.
• 함수 내부에서 var로 선언된 변수는 해당 함수 내에서만 유효하며, 함수 외부에서는 전역 변수로 간주된다.

var x = 1;

if (x === 1) {
  var x = 2;
  console.log(x);
  // Expected output: 2
}

console.log(x);
// Expected output: 2

• 결과: x는 if문 안에서 재할당되며, 블록 밖에서 x가 변경된 모습을 볼 수 있음. 이는 var가 블록 스코프를 무시하고 함수 스코프나 전역 스코프를 따르기 때문.

🔸 let

: let(허용하다), ES6에서 도입된 block scope를 위한 변수 선언 방식

• let은 블록 내에서만 유효하며, 외부 변수와의 충돌을 방지할 수 있어 코드가 더 예측 가능하다.

let x = 1;

if (x === 1) {
  let x = 2;
  console.log(x);
  // Expected output: 2
}

console.log(x);
// Expected output: 1

🔸 const

: constant(변함없는)의 약자, let과 마찬가지로 ES6에서 도입 block scope에서 유효

• const는 상수를 선언하는 데 사용되며, 한 번 값이 할당되면 재할당이 불가능하다.

예시 1:

const x = 1;

if (x === 1) {
  const x = 2;
  console.log(x);
  // Expected output: 2
}

console.log(x);
// Expected output: 1

예시 2 (객체나 배열에 대한 참조값 변경 가능):

const obj = { key: 'value' };
obj.key = 'newValue';  // 객체의 값은 변경 가능
console.log(obj.key);   // Expected output: 'newValue'

// 하지만 객체 자체를 재할당하는 것은 불가능
// obj = {};  // Error: Assignment to constant variable.

항목	var	let	const
선언 후 재할당	가능	가능	불가능
스코프	함수 스코프 또는 전역 스코프	블록 스코프	블록 스코프
호이스팅(Hoisting)	선언만 끌어올려짐 (초기화 X)	선언과 초기화 끌어올려짐 (TDZ)	선언과 초기화 끌어올려짐 (TDZ)
초기화와 선언	초기화 없이 선언 가능	초기화 없이 선언 가능	초기화 없이 선언 불가능

호이스팅 (Hoisting) 개념

: 호이스팅은 변수 선언과 함수 선언이 코드 실행 전에 위로 끌어올려지는 현상을 말한다.
JavaScript는 코드를 실행하기 전에 변수 선언과 함수 선언을 메모리 상에 올려두고 실행하기 때문에, 변수 선언 위치와 관계 없이 사용할 수 있다.

예시 1: 변수 호이스팅

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

• var로 선언한 변수 a는 호이스팅 되어 선언이 위로 끌어올려지나 값은 할당되지 않아서 첫번째 출력에서는 undefined가 나온다.

예시 2: 함수 선언 호이스팅

foo(); // "Hello, World!"

function foo() {
  console.log("Hello, World!");
}

• 함수 선언은 호이스팅 되어 전체 함수 정의가 끌어올려진다, 따라서 호출은 선언 전에도 가능하다.

TDZ (Temporal Dead Zone)

: JavaScript에서 let과 const로 선언된 변수는 호이스팅되지만, var처럼 즉시 접근 할 수는 없다.
이 접근할 수 없는 사각지대를 TDZ (Temporal Dead Zone)이라고 한다.

• 개발자가 변수 선언 전에 사용하는 실수를 방지하기 위해 도입된 개념이라고 한다. var는 선언 전에 접근해도 undefined를 리턴하니 실수하기 쉬웠다.
• 즉 let, const도 var처럼 호이스팅은 된다. 하지만 일부러 TDZ를 도입해서 사용을 막은 것.

*예시 1: *

{
  // TDZ 시작
  console.log(myVar); // ❌ ReferenceError
  let myVar = 3;
  // TDZ 끝
}

예시 2: TDZ와 실제 내부 동작 비교

console.log(a); // ReferenceError
let a = 10;

실제 동작은...

// 내부적으로 호이스팅은 이렇게 된다
// let a;  // 선언은 호이스팅됨

console.log(a); // ❌ TDZ 때문에 에러
a = 10;

함수 선언 vs 함수 표현식 호이스팅 차이

예시 1: 함수 선언식 (Function Declaration)

sayHello(); // ✅ 정상 실행

function sayHello() {
  console.log("Hello!");
}

• 호이스팅: O (함수 전체가 끌어올려짐)
• 코드 어디서든 호출 가능
• ✅ JS 엔진이 함수 선언 전체를 메모리에 미리 등록해둠

예시 2: 함수 표현식 (Function Expression)

sayHello(); // ❌ TypeError: sayHello is not a function

var sayHello = function() {
  console.log("Hello!");
};

• 호이스팅: O (하지만 변수 선언만 올라감, 함수 정의는 안 올라감)
• sayHello는 변수일 뿐이므로, 초기화 전엔 undefined
• 즉, 함수 자체는 런타임까지 알 수 없음

정리

프로그래밍의 가장 기초가 되는 변수 선언에 대해 정리를 해보았다.
var, let, const는 각자 역할이 있고 변수가 영향을 끼치는 스코프도 다르다는 것을 염두하고
호이스팅은 변수와 함수가 끌어올려지는 것을 말하고 기본 동작원리를 이해하면 좋다
또한 위 두개는 프론트엔드 면접 단골 질문이기도하다.
추가적으로 내 경험으로는 요즈음 프론트엔드 개발 트렌드에 따르면 var를 쓸 일은 없어야하며 (근데 우리회사 어떤 프로젝트는 아직도쓴다..)
보시는 분들께 조금이라도 도움이 됐길!