JavaScript 변수 선언 완전 정복 var, let 차이점과 사용법

JavaScript에서 변수 선언 방식은 코드의 안정성과 유지 보수성에 지대한 영향을 미친다. 특히 var, let, const는 각각 고유한 특성과 스코프 범위를 가지며, 이 중 var와 let은 개발자가 자주 혼동하는 부분이다. 본 문서에서는 var와 let의 차이점과 사용 시 고려해야 할 사항을 철저히 분석하고, 실제 실무에서 어떻게 활용해야 최적의 코드를 구현할 수 있는지 설명한다.

JavaScript에서 변수 선언의 진화

JavaScript 초기에는 var만이 존재했다. 그러나 여러 가지 예측 불가능한 버그와 범위 관리의 한계 때문에 ECMAScript 6(ES6) 이후 let과 const가 도입되었다. 이 변화는 JavaScript 언어 자체의 패러다임을 바꾸었다.

반응형

var 키워드: 유연하지만 위험한 선택

var의 특징

• 함수 스코프(Function Scope): var로 선언된 변수는 함수 내부에서만 유효하다. 블록 {} 내부에서 선언해도 함수 바깥으로 빠져나갈 수 있다.
• 중복 선언 허용: 같은 스코프에서 동일한 이름의 변수를 중복 선언할 수 있으며, 후속 선언이 기존 값을 덮어쓴다.
• 호이스팅(Hoisting): 변수 선언이 코드의 최상단으로 끌어올려지는 현상이다. 다만, 초기화는 호이스팅되지 않는다.

function testVar() {
  console.log(a); // undefined
  var a = 10;
  console.log(a); // 10
}

var의 문제점

• 블록 스코프 미지원으로 인해 의도치 않은 변수 오염 발생
• 중복 선언으로 디버깅 어려움
• 호이스팅으로 인해 직관적이지 않은 코드 흐름

핵심 키워드 강조: var는 호이스팅, 중복 선언, 블록 스코프 미지원이라는 리스크를 수반한다.

반응형

let 키워드: 현대적인 변수 선언 방식

let의 특징

• 블록 스코프(Block Scope): {} 내에서 선언된 변수는 해당 블록 내에서만 유효하다.
• 중복 선언 금지: 동일한 스코프 내에서 같은 이름으로 다시 선언할 수 없다.
• 호이스팅은 되지만 TDZ(Temporal Dead Zone) 존재: 선언 전에 접근하려 하면 에러 발생

function testLet() {
  console.log(b); // ReferenceError
  let b = 20;
}

let의 장점

• 변수 유효 범위 명확
• 의도하지 않은 값 변경 방지
• 디버깅과 유지 보수 용이

핵심 키워드 강조: let은 블록 스코프, 중복 선언 방지, TDZ 보호의 장점이 있다.

반응형

var vs let 직접 비교 분석

항목 var let

스코프	함수 스코프	블록 스코프
중복 선언	허용됨	금지됨
호이스팅	선언만 호이스팅	선언되나 TDZ 존재
사용 시기	ES5 이전 호환 필요 시	최신 코드, 모던 환경 권장
디버깅 용이성	낮음	높음

예제 비교

function compareVarLet() {
  if (true) {
    var a = 1;
    let b = 2;
  }
  console.log(a); // 1
  console.log(b); // ReferenceError
}

실제 개발 현장에서의 선택 기준

• 크로스 브라우징 지원이 필요하거나 레거시 코드 유지보수 시 var 사용 가능
• 그 외 모든 경우에는 let 또는 const 사용 권장

let과 const의 관계

비슷한 시점에 등장한 let과 const는 모두 블록 스코프를 따르지만, const는 불변성 보장이라는 차별점을 가진다. let은 변경 가능한 변수 선언에 적합하고, const는 상수 혹은 참조 주소가 변하지 않는 객체에 적합하다.

예시

const PI = 3.14;
PI = 3.1415; // TypeError

let radius = 10;
radius = 15; // 가능

반응형

실무에서의 활용 전략

1. 기본은 const, 필요 시 let

개발 현장에서는 변경되지 않는 변수는 const, 변경 가능성이 있는 변수는 let을 사용한다. var는 사실상 사용되지 않는다.

2. 블록 스코프 기반 설계로 버그 예방

for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 100);
}
// 0 1 2 3 4

var를 사용할 경우 모두 5가 출력된다. 이처럼 let은 반복문이나 클로저에서 안정성을 확보하는 데 필수적이다.

3. 함수 외부 선언에 주의

var로 전역 선언한 변수는 window 객체의 속성이 되어버린다. 이로 인해 다른 스크립트와 충돌이 발생할 수 있다.

var x = 10;
console.log(window.x); // 10

let y = 20;
console.log(window.y); // undefined

반응형

자주 묻는 질문 (FAQ)

Q1. var는 절대 쓰면 안 되나요?

A: 무조건 피해야 할 대상은 아니다. 레거시 프로젝트 유지보수나 특정 브라우저 호환성을 고려할 때 사용할 수 있다. 그러나 새 코드에서는 let 또는 const가 압도적으로 추천된다.

Q2. let과 var는 성능 차이가 있나요?

A: 일반적인 상황에서는 미미하다. 그러나 대규모 애플리케이션이나 반복문 내 클로저 사용 시 let이 버그 발생 가능성을 줄이므로 실질적으로 성능에 기여한다.

Q3. let으로 선언한 객체도 변경 가능한가요?

A: 가능하다. let은 변수 자체가 재할당 가능하다는 의미이지, 객체의 내부 속성이 불변이라는 의미는 아니다.

let user = { name: "Alice" };
user.name = "Bob"; // 가능

반응형

결론

현대 JavaScript 개발에서 let은 var를 완전히 대체할 수 있을 정도로 안정성과 예측 가능성이 뛰어나다. var는 호환성과 특수 상황을 위한 보조 수단으로만 고려해야 한다. ECMAScript 6 이후의 모던한 코드 작성에서는 let과 const를 중심으로 변수 선언 전략을 구성하는 것이 가장 바람직하다.