Develop Diary/Interview

[Interview] var, let, const에 대해 설명해주세요

wakelight23 2025. 2. 13. 21:35

JavaScript의 변수 선언

● 변수 선언 방식으로 var, let, const를 사용합니다.

 

● 각 선언들은 선언 시점, 유효 범위(Scope), 재선언 및 재할당 허용 여부 등에서 차이가 있습니다.

 

● 이를 잘 활용하면 코드의 안정성과 가독성에 큰 영향이 있습니다.

var : 재선언이 가능

● var는 함수 레벨 스코프(function-scoped)를 가지며, 함수 외부에서 선언하면
  전역 변수(global variable)가 되며, 블록({...})을 무시합니다.

 

● var는 재선언은 물론이고, 재할당 모두 가능합니다. 이는 장점으로도 작용할 수 있지만

  의도치 않은 변수 덮어쓰기가 발생할 수 있습니다.

 

● var로 선언된 변수는 선언과 초기화(기본값 undefined)가 호이스팅(Hoisting)되어,
  선언부보다 앞선 코드에서 undefined가 출력될 수 있습니다.

 

● var는 재선언, 재할당 모두가 가능하기에 작은 양의 스크립트에서는 편리할 수 있습니다.

  단, 전역 변수 오염, 블록 스코프 미지원, 재선언이란 특성 때문에 대규모 코드에서는 유지보수
  에서도 불리하며 협업에 있어서 큰 오류를 발생시킬 수 있습니다.

// var는 블록 스코프를 무시함
if (true) {
  var message = "Hello from var";
}
console.log(message); // "Hello from var"

// 호이스팅 예시
console.log(example); // 출력: undefined (실제로는 호이스팅되어 undefined로 초기화됨)
var example = 5;
console.log(example); // 5

let : 재할당은 가능

● let은 var와는 달리 블록 레벨 스코프(block-scoped)를 가집니다. 

  if, for, while 등 코드 블록 내에 선언한 변수는 그 블록 내부에서만 유효합니다.

 

● 동일한 블록 내에서 재선언은 불가능하지만, 재할당은 가능합니다.

   var에서 문제가 되었던 의도치 않은 중복 선언을 방지할 수 있습니다.

 

● let으로 선언된 변수도 Hoisiting 되지만, 초기화 전에 접근하려고 하면 
   일시적 사각 지대(Temporal Dead Zone)에 놓이기에 ReferenceError가 발생합니다.

일시적 사각 지대(Temporal Dead Zone)
- JavaScript의 변수 선언은 실행 전에 Hoisting되어 스코프의 최상단으로 끌려올려집니다.
  하지만, let, const로 선언된 변수는 Hoisting이 되더라도 초기화되지 않은 상태로 남아 있습니다.
  이 '초기화 되지 않은 구간'이 바로 일시적 사각지대 입니다.

 

● let은 블록 스코프를 지원하기 때문에 코드의 가독성과 안정성은 높습니다.
   단, 초기화 전에 접근 시 에러가 발생하기 때문에 선언 순서를 주의해야 합니다.

  → 서버를 예로 들어서 let 순서를 잘못 지정하여 let 선언 전에 let에 할당된 변수를 가져오면
      에러가 발생하기 때문에 서버가 종료되는 상황이 발생합니다. 이는 실제 서비스 단계에서
      불편함은 물론, 손해가 발생하게 됩니다.

if (true) {
  let count = 10;
  console.log(count); // 10
}
console.log(typeof count); // "undefined" 또는 ReferenceError (count는 블록 외부에서 접근 불가)

// 호이스팅과 TDZ 예시
// console.log(num); // ReferenceError: Cannot access 'num' before initialization
let num = 20;
console.log(num); // 20

// 재할당 가능
let value = 5;
value = 15;
console.log(value); // 15

const : 재선언, 재할당 모두 불가능

● let과 마찬가지로 블록 레벨 스코프가 있습니다

 

● const로 선언된 변수는 재선언, 재할당 모두 불가능합니다.
   단, 객체나 배열의 경우 프로퍼티나 요소는 수정할 수 있습니다.

 

● let과 동일하게 Hoisting 되지만 초기화 전에는 접근이 불가능합니다.(일시적 사각지대)

 

● const는 let, var와 달리 값이 변경되지 않음을 보장합니다.

  변하지 않는 참조에 적합하기에 코드의 안정성을 높입니다. (역시 let보다 안정성이 높습니다)

  하지만 const의 특성상 선언과 동시에 반드시 초기값을 할당하며, 값을 변경할 수 없기 때문에

  값을 변경해야 하는 상황에서는 적합하지 않습니다.

{
  const PI = 3.14159;
  console.log(PI); // 3.14159
  // PI = 3.14; // TypeError: Assignment to constant variable.
}

// 객체의 경우 내부 프로퍼티는 변경 가능
const obj = { name: "섭르탄" };
obj.name = "큐르탄"; // 가능
console.log(obj.name); // "큐르탄"

// 그러나 전체 객체에 재할당은 불가능
// obj = { name: "규르탄" }; // TypeError

 

 

정리하자면

● var는 es6가 등장하기 전까지 JavaScript의 대표 변수 선언이었습니다.
   재선언, 재할당 모두 가능하기 때문에 함수 레벨 스코프와 호이스팅에 의해 유연하지만
   예기치 않은 동작을 일으킬 수 있습니다.

 

● let은 블록 스코프를 지원하고 변수의 재할당이 가능합니다.
   재선언을 막아 주기 때문에 코드의 명확성을 높입니다.

 

● const는 재할당이 발생하지 않습니다. 상수나 변경되지 않는 값을 선언할 때 유용합니다. 
   단, 객체나 배열의 내부 값 변경은 가능합니다.