[📝 Front] let과 const 그리고..var

 

let과 const는 자바스크립트(JavaScript)에서 변수를 선언하는 키워드입니다. 과거에는 주로 var를 사용했지만, ES6(ECMAScript 2015)부터 let과 const가 도입되면서 변수 선언 방식에 큰 변화가 생겼습니다. 이 두 키워드는 var가 가지고 있던 여러 문제점을 해결하고, 더욱 안전하고 예측 가능한 코드를 작성할 수 있도록 도와줍니다.

var와 let과 const의 주요 차이점 요약

 

특징	var	let	const
재선언	가능	불가능	불가능
재할당	가능	가능	불가능 (원시 값)
스코프	함수 스코프	블록 스코프	블록 스코프
호이스팅	변수 선언만 호이스팅, undefined로 초기화	변수 선언만 호이스팅, 초기화되지 않음 (TDZ)	변수 선언만 호이스팅, 초기화되지 않음 (TDZ)
전역 객체 속성	전역 객체(window/global)의 속성으로 추가	추가되지 않음	추가되지 않음

 

1. let (변수 선언)

let은 재할당이 가능하지만, 재선언은 불가능한 변수를 선언할 때 사용합니다. 또한 블록 스코프를 가집니다.

• 재할당 가능, 재선언 불가능:

  let name = "Alice";
  console.log(name); // Alice
  
  name = "Bob"; // 재할당 가능
  console.log(name); // Bob
  
  // let name = "Charlie"; // Error: 'name' has already been declared. (재선언 불가능)
  

• 블록 스코프(Block Scope): let으로 선언된 변수는 자신이 선언된 코드 블록({...}) 안에서만 유효합니다. 블록을 벗어나면 해당 변수에 접근할 수 없습니다.이러한 블록 스코프는 var의 함수 스코프 때문에 발생하던 문제들(예: for 루프 안에서 변수가 의도치 않게 공유되는 문제)을 해결해 줍니다.

  if (true) {
    let x = 10;
    console.log(x); // 10
  }
  // console.log(x); // ReferenceError: x is not defined (블록 외부에서는 접근 불가능)
  

• 호이스팅(Hoisting)과 TDZ (Temporal Dead Zone): let으로 선언된 변수도 호이스팅됩니다. 하지만 var처럼 undefined로 자동 초기화되지 않고, 실제 변수 선언문에 도달하기 전까지는 일시적 사각지대(Temporal Dead Zone, TDZ) 에 놓입니다. 이 구간에서 변수에 접근하려고 하면 ReferenceError가 발생합니다.이는 개발자가 변수를 사용하기 전에 선언하도록 강제하여 코드의 가독성과 예측 가능성을 높입니다.

  console.log(myVar); // ReferenceError: Cannot access 'myVar' before initialization
  let myVar = "hello";
  

2. const (상수 선언)

const는 재할당과 재선언 모두 불가능한 상수를 선언할 때 사용합니다. let과 마찬가지로 블록 스코프를 가집니다.

 

• 재할당 불가능, 재선언 불가능:

  const PI = 3.14159;
  console.log(PI); // 3.14159
  
  // PI = 3.14; // Error: Assignment to constant variable. (재할당 불가능)
  // const PI = 3.14; // Error: 'PI' has already been declared. (재선언 불가능)
  

• 선언과 동시에 초기화 필수: const 변수는 선언 시 반드시 값을 할당해야 합니다.

  // const MY_CONSTANT; // Error: Missing initializer in const declaration.
  const MY_CONSTANT = "someValue";
  

• 블록 스코프: let과 동일하게 블록 스코프를 가집니다.

  if (true) {
    const URL = "http://example.com";
    console.log(URL); // http://example.com
  }
  // console.log(URL); // ReferenceError: URL is not defined
  

• 객체 및 배열의 경우: const는 변수 자체의 재할당을 막는 것이지, 변수가 참조하는 객체나 배열 내부의 속성 변경까지 막는 것은 아닙니다.만약 객체나 배열의 내용까지 불변(Immutable)하게 만들고 싶다면, Object.freeze() 같은 메서드를 사용해야 합니다.

  const myObject = { name: "John" };
  myObject.name = "Jane"; // 가능! 객체 내부 속성 변경은 허용
  console.log(myObject); // { name: "Jane" }
  
  // myObject = { name: "Doe" }; // Error: Assignment to constant variable. (재할당 불가능)
  
  const myArray = [1, 2, 3];
  myArray.push(4); // 가능! 배열에 요소 추가 허용
  console.log(myArray); // [1, 2, 3, 4]
  
  // myArray = [5, 6]; // Error: Assignment to constant variable. (재할당 불가능)
  

• 호이스팅과 TDZ: let과 동일하게 호이스팅되지만 TDZ에 의해 선언 전 접근은 불가능합니다.

 

왜 var 대신 let과 const를 사용해야 하는가?

var는 다음과 같은 문제점을 가지고 있었습니다.

• 함수 스코프: if 문이나 for 루프 같은 블록 안에서 var로 변수를 선언해도 해당 블록 외부에서 접근할 수 있어, 의도치 않은 버그를 유발하기 쉬웠습니다.
• 변수 재선언 허용: 같은 이름의 변수를 여러 번 선언해도 에러가 발생하지 않아, 대규모 코드에서 변수 충돌 문제를 일으킬 수 있었습니다.
• 호이스팅 문제: 변수 선언이 스코프 최상단으로 끌어올려지면서 선언하기도 전에 변수를 사용할 수 있었는데, 이는 코드의 예측 가능성을 떨어뜨렸습니다.

let과 const는 이러한 문제점들을 해결하여, 코드의 예측 가능성을 높이고, 잠재적인 버그를 줄이며, 현대적인 자바스크립트 개발에 더 적합한 변수 선언 방식을 제공합니다.

결론: 무엇을 사용해야 하는가?

• 기본적으로 const를 사용합니다. 값이 변경될 필요가 없는 대부분의 경우에 const를 사용하는 것이 좋습니다. 이는 개발자에게 해당 변수가 상수임을 알려주고, 실수로 값을 변경하는 것을 방지하여 코드의 안정성을 높입니다.
• 값이 나중에 변경되어야 할 때만 let을 사용합니다. (예: 루프 카운터, 조건에 따라 값이 변하는 변수 등)
• var는 특별한 이유가 없는 한 사용하지 않습니다. 레거시 코드에서는 볼 수 있지만, 새 코드를 작성할 때는 피하는 것이 좋습니다.

 

이러한 규칙을 따르면 더 견고하고 유지보수하기 쉬운 자바스크립트 코드를 작성할 수 있습니다.