자바스크립트의 변수 선언 키워드: var, let, const

변수 선언은 프로그래밍의 기본 중 하나입니다. 자바스크립트에서는 var, let, const라는 세 가지 키워드를 사용해 변수를 선언할 수 있습니다. 각 키워드는 선언된 변수의 사용 범위와 특성을 결정하며, 이를 올바르게 이해하는 것은 안정적이고 유지보수하기 쉬운 코드를 작성하는 데 매우 중요합니다.

---

1. var: 함수 스코프와 호이스팅의 특징

var는 ES6 이전부터 사용되던 변수 선언 방식으로, 자바스크립트의 함수 기반 스코프를 따릅니다. 이는 블록 {} 내부가 아닌 함수 단위로 스코프가 나뉜다는 의미입니다. 또한, var는 선언이 끌어올려지는 호이스팅(Hoisting) 기능을 가집니다.

특징

• 스코프: 함수 스코프를 따름. 블록 스코프를 지원하지 않음.
• 호이스팅: 선언과 초기화가 끌어올려짐. 초기 값은 undefined.
• 재선언: 동일한 이름으로 변수 재선언 가능.
• 재할당: 값 재할당 가능.

코드 예제

function testVar() {
  if (true) {
    var x = 10; // 블록 내부에서 선언
  }
  console.log(x); // 10 (블록 외부에서도 접근 가능)
}

testVar();

var y = 5;
var y = 10; // 재선언 가능
console.log(y); // 10

호이스팅 예제

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

위 코드는 다음과 같이 해석됩니다:

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

---

2. let: 블록 스코프와 개선된 변수 선언

let은 ES6(ECMAScript 2015)에서 도입된 변수 선언 키워드로, var의 단점을 보완하기 위해 설계되었습니다. let은 블록 스코프를 지원하며, 같은 스코프 내에서 재선언할 수 없습니다.

특징

• 스코프: 블록 스코프를 따름.
• 호이스팅: 선언은 끌어올려지지만 초기화는 끌어올려지지 않아 ReferenceError 발생.
• 재선언: 동일한 스코프 내에서 재선언 불가능.
• 재할당: 값 재할당 가능.

코드 예제

function testLet() {
  if (true) {
    let x = 10; // 블록 내부에서만 유효
    console.log(x); // 10
  }
  // console.log(x); // ReferenceError: x is not defined
}

testLet();

let y = 5;
// let y = 10; // SyntaxError: Identifier 'y' has already been declared
y = 10; // 재할당 가능
console.log(y); // 10

호이스팅 예제

console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 5;

---

3. const: 상수 선언

const 역시 ES6에서 도입된 변수 선언 방식으로, 한 번 할당된 값을 변경할 수 없습니다. 객체나 배열의 경우 내부 값은 변경 가능하지만, 변수 자체를 재할당할 수는 없습니다.

특징

• 스코프: 블록 스코프를 따름.
• 호이스팅: 선언은 끌어올려지지만 초기화는 끌어올려지지 않아 ReferenceError 발생.
• 재선언: 동일한 스코프 내에서 재선언 불가능.
• 재할당: 불가능(상수).

코드 예제

const z = 10;
// z = 20; // TypeError: Assignment to constant variable.

const obj = { name: "John" };
obj.name = "Jane"; // 객체 속성은 변경 가능
console.log(obj.name); // Jane

// const obj = {}; // SyntaxError: Identifier 'obj' has already been declared

호이스팅 예제

console.log(a); // ReferenceError: Cannot access 'a' before initialization
const a = 5;

---

4. 주요 차이점 정리

특징 var let const

스코프	함수 스코프	블록 스코프	블록 스코프
호이스팅	선언과 초기화(undefined로) 끌어올려짐	선언만 끌어올려지고 초기화되지 않음	선언만 끌어올려지고 초기화되지 않음
재선언 가능 여부	가능	불가능	불가능
재할당 가능 여부	가능	가능	불가능

---

5. 어떤 키워드를 사용해야 할까?

• 기본적으로는 const를 사용하세요. 불변성을 유지하면 코드의 안정성과 예측 가능성이 높아집니다.
• 변수 값이 변경될 필요가 있는 경우에만 let을 사용하세요.
• var는 함수 스코프와 호이스팅 문제로 인해 사용을 권장하지 않습니다.

---