JavaScript 변수의 모든 것: var, let, const 완벽 비교와 활용법

 

JavaScript 변수

변수는 데이터를 저장하고 관리하는 데 사용되는 프로그래밍 언어의 기본 요소입니다. JavaScript에서는 데이터를 동적으로 관리할 수 있으며, 변수 선언 방식에 따라 데이터의 처리와 범위가 달라집니다.

 

변수 선언 방식의 진화 (var → let, const)

초기의 JavaScript에서는 `var`만 존재했지만, ES6 (ECMAScript 2015) 이후 `let`과 `const`가 추가되면서 보다 명확하고 안전한 변수 선언이 가능해졌습니다.

 

---

var의 이해

기본 개념과 선언 방법

`var`는 JavaScript에서 가장 오래된 변수 선언 방식으로, 다음과 같이 사용됩니다.

var x = 10;

 

함수 스코프와 전역 스코프

• 함수 스코프 : `var`는 함수 내에서 선언된 경우 해당 함수 안에서만 유효합니다.
• 전역 스코프 : 함수 외부에서 선언되면 전역 변수로 간주됩니다.

 

호이스팅(Hoisting)

`var`로 선언된 변수는 선언 이전에 참조할 수 있습니다. 이를 호이스팅이라고 불리며, 변수가 선언된 위치와 상관없이 최상단으로 끌어올려진 것처럼 동작합니다.

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

 

문제점과 한계

• 블록 스코프를 지원하지 않음
• 호이스팅으로 인해 예측하기 어려운 버그 발생 가능
• 동일한 이름으로 재선언 가능

 

---

let의 도입과 특징

블록 스코프란?

`let`은 블록 스코프(block scope)를 따릅니다. 이는 변수의 유효 범위가 중괄호(`{}`)로 구분된 코드 블록 내로 제한된다는 의미입니다.

if (true) {
  let y = 10;
}
console.log(y); // ReferenceError

var와의 차이점

• 블록 스코프를 지원하여 변수 충돌 위험 감소
• 선언 전에 참조 불가(TDZ, Temporal Dead Zone)

console.log(z); // ReferenceError
let z = 20;

재할당 가능성

`let`로 선언된 변수는 재할당이 가능합니다.

let count = 1;
count = 2; // 정상 작동

 

---

const의 고정된 역할

상수 선언의 의미

`const`는 상수(constant) 선언에 사용되며, 선언과 동시에 값을 초기화해야 합니다.

const PI = 3.14;

블록 스코프 공유

`const` 역시 블록 스코프를 따릅니다. 이는 `let`과 동일한 스코프 동작을 가집니다.

 

참조형 데이터에서의 동작

`const`로 선언된 객체나 배열은 참조 자체는 변경할 수 없지만, 내부 데이터는 변경 가능합니다.

const arr = [1, 2, 3];
arr.push(4);      // 정상 작동
console.log(arr); // [1, 2, 3, 4]

 

---

var, let, const 비교

특징	`var`	`let`	`const`
스코프	함수 스코프	블록 스코프	블록 스코프
재선언	가능	불가능	불가능
재할당	가능	가능	불가능
초기화 여부	선택적	선택적	필수
호이스팅	선언 및 초기화	선언만	선언만

 

 

---

실무에서의 변수 선언 전략

const 선호 이유

대부분의 변수는 재할당되지 않기 때문에 `const`를 기본으로 사용하면 코드 안정성이 향상됩니다.

 

let과 const의 조화로운 사용

값을 변경해야 하는 경우에만 `let`을 사용하고, 그 외에는 `const`를 사용하는 것이 권장됩니다.

 

var는 이제 안녕

`var`는 최신 JavaScript 코드에서 거의 사용되지 않습니다. 과거의 레거시 코드에서만 발견될 가능성이 높습니다.

 

---

최고의 실습 예제

변수 선언 방식별 코드 예제

var 예제

function exampleVar() {
  var x = 1;
  if (true) {
    var x = 2;        // 같은 변수 덮어쓰기
    console.log(x); // 2
  }
  console.log(x) // 2
}
exampleVar();

let 예제

function exampleLet() {
    let y = 1;
    if (true) {
        let y = 2;      // 다른 블록의 변수
        console.log(y); // 2
    }
    console.log(y); // 1
}
exampleLet();

const 예제

function exampleConst() {
    const z = 1;
    // z = 2; // TypeError: Assignment to constant variable.
    console.log(z);
}
exampleConst();