[javascript] var, let, const 비교 및 사용법

현대적인 JavaScript 개발에서는 const를 기본으로 사용하고, 값이 변경되어야 하는 경우에만 let을 사용한다. var는 스코프와 호이스팅 문제로 인해 사용을 지양하는 것이 일반적이다.

• const의 사용 권장: 불변성을 유지하여 코드의 안정성과 예측 가능성을 높인다.
• let의 보조적 사용: 변경이 필요한 변수에 한해 사용한다.

1. var

• 스코프(scope): 함수 스코프를 가진다. 즉, 함수 내에서 선언된 변수는 함수 전체에서 접근 가능.
• 호이스팅(hoisting): 변수 선언이 스코프의 최상단으로 끌어올려짐. 그러나 초기화는 선언 위치에서 이루어지므로, 선언 이전에 변수를 참조하면 undefined를 반환.
• 재선언 가능: 동일한 스코프 내에서 같은 이름의 변수를 재선언할 수 있음.

적절한 사용 상황

• 레거시 코드 유지보수: 기존에 작성된 ES5 이전의 코드나 레거시 시스템을 다룰 때 var를 사용.
• 함수 스코프 활용: 함수 내부 전체에서 변수가 필요할 때 var를 사용할 수 있다.

// ex1
function example() {
  console.log(a); // undefined
  var a = 1;
  console.log(a); // 1
}

// ex2
function example() {
  if (true) {
    var message = 'Hello';
  }
  console.log(message); // 'Hello'
}

2. let

• 스코프(scope): 블록 스코프를 가진다. {}로 감싸진 블록 내에서만 유효.
• 호이스팅(hoisting): 선언은 호이스팅되지만, 초기화는 호이스팅되지 않는다. 따라서 선언 이전에 변수를 참조하면 ReferenceError가 발생.
• 재선언 불가: 동일한 스코프 내에서 같은 이름의 변수를 재선언할 수 없다.

적절한 사용 상황

• 변경 가능한 변수: 값이 변경될 수 있는 변수를 선언할 때 사용.
• 블록 스코프 필요 시: 조건문, 반복문 등의 블록 내에서 변수가 필요할 때 let을 사용.

// ex1
{
  console.log(b); // ReferenceError
  let b = 2;
  console.log(b); // 2
}

// ex2
for (let i = 0; i < 5; i++) {
  // i는 이 블록 내에서만 유효.
}
console.log(i); // ReferenceError: i is not defined

3. const

• 스코프(scope): let과 동일하게 블록 스코프를 가진다.
• 상수 선언: 선언과 동시에 초기화해야 하며, 이후 값 변경이 불가능.
• 호이스팅(hoisting): let과 동일하게 동작.
• 재선언 불가: 동일한 스코프 내에서 재선언 가능.

적절한 사용 상황

• 상수 선언: 변경되지 않는 값을 선언할 때 사용.
• 객체와 배열의 참조 고정: 객체나 배열을 선언하고 참조를 변경하지 않을 때 사용.

// ex1
{
  const c = 3;
  c = 4; // TypeError: Assignment to constant variable.
}

// ex2
const PI = 3.14;
PI = 3.1415; // TypeError: Assignment to constant variable.

const user = { name: 'Alice' };
user.name = 'Bob'; // 가능 (프로퍼티 변경)
user = {}; // TypeError: Assignment to constant variable.

전역 변수와 지역 변수의 활용

전역 변수

• var로 선언된 전역 변수: 함수 밖에서 var로 선언하면 전역 객체의 프로퍼티로 추가된다.
• let과 const로 선언된 전역 변수: 스크립트의 최상위 레벨에서 선언되며, 전역 스코프를 가진다. 그러나 전역 객체의 프로퍼티는 아니다.

var globalVar = 'var';
let globalLet = 'let';
const globalConst = 'const';

console.log(window.globalVar); // 'var' (브라우저 환경)
console.log(window.globalLet); // undefined
console.log(window.globalConst); // undefined

지역 변수

• 함수 스코프 지역 변수: 함수 내에서 선언된 var, let, const는 함수 내부에서만 접근 가능하다.
• 블록 스코프 지역 변수: let과 const로 선언된 변수는 해당 블록 내에서만 유효.

function scopeTest() {
  var a = 1;
  let b = 2;
  const c = 3;

  if (true) {
    var a = 4; // 같은 함수 스코프 내에서 재선언 및 값 변경
    let b = 5; // 새로운 블록 스코프
    const c = 6; // 새로운 블록 스코프
    console.log(a, b, c); // 4, 5, 6
  }

  console.log(a, b, c); // 4, 2, 3
}

scopeTest();