본문 바로가기
Language/Java Script

[JAVA SCRIPT] 왜 요즘은 var를 사용하지 말라고 하나요? 레거시의 함정과 모던 솔루션

by Papa Martino V 2026. 2. 23.
728x90

var
var

 

웹 개발의 세계에서 "유연함"은 때로 "위험함"과 동의어가 되곤 합니다. 자바스크립트의 초창기를 지배했던 변수 선언 키워드 var가 바로 그 대표적인 사례입니다. 과거에는 선택의 여지가 없었지만, 2015년 ES6(ECMAScript 2015)가 등장한 이후 현대적인 프로젝트에서 var를 사용하는 것은 지양해야 할 구습으로 여겨집니다. 오늘은 단순히 "쓰지 마세요"라는 권고를 넘어, 왜 var가 현대적인 코드의 안정성을 해치는지, 그리고 그 대안이 왜 더 우수한지를 전문적인 관점에서 심층 분석합니다.

1. var의 태생적 결함: 개발자를 기만하는 매커니즘

var가 비판받는 가장 큰 이유는 코드의 가독성과 예측 가능성을 떨어뜨리기 때문입니다. 특히 함수 레벨 스코프(Function-level scope)는 전역 변수의 오염을 유발하며, 이는 대규모 애플리케이션에서 디버깅을 불가능하게 만드는 주범이었습니다.

또한, 선언하기도 전에 변수를 참조할 수 있는 호이스팅(Hoisting) 현상은 자바스크립트의 독특한 특징이지만, 논리적 흐름을 깨뜨리는 부작용을 낳았습니다. 아래의 비교 표를 통해 var와 현대적 선언 방식인 let, const가 어떻게 다른 구조를 가지는지 확인해 보시기 바랍니다.

2. 변수 선언 키워드별 핵심 메커니즘 비교

비교 항목 var (Legacy) let / const (Modern)
유효 범위 (Scope) 함수 단위 (Function Scope) 블록 단위 (Block Scope - { })
변수 재선언 허용 (의도치 않은 덮어쓰기 발생) 불가 (문법 에러 발생으로 안전함)
호이스팅 현상 선언과 동시에 undefined로 초기화 선언만 되고 초기화되지 않음 (TDZ 발생)
권장 사용성 사용 금지 (Deprecated 권고) 표준 (기본 const, 재할당 시 let)

3. Sample Example: var가 일으키는 실무적 오류

실제로 실무에서 var를 사용했을 때 어떤 황당한 상황이 벌어지는지 코드를 통해 살펴보겠습니다. 특히 반복문 내에서의 동작 차이는 매우 중요합니다.


// 문제의 상황: var를 사용한 비동기 반복문
for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log("var 결과:", i); 
    }, 100);
}
// 실제 출력값: 3, 3, 3 (기대값: 0, 1, 2)
// 원인: var i가 함수 스코프를 가져 루프 종료 후 최종값인 3을 공유함

// 해결책: let을 사용한 반복문
for (let j = 0; j < 3; j++) {
    setTimeout(function() {
        console.log("let 결과:", j);
    }, 100);
}
// 실제 출력값: 0, 1, 2
// 원인: let은 각 반복 블록마다 새로운 바인딩을 생성함

4. 현대적 관점: 왜 '안정성'이 최우선인가?

2026년의 웹 환경은 초창기 브라우저와 비교할 수 없을 만큼 복잡합니다. 수만 줄의 코드가 얽혀 있는 싱글 페이지 애플리케이션(SPA)에서 변수가 어디서든 재선언되고, 선언되지도 않은 곳에서 호출되는 var의 방식은 재앙에 가깝습니다.

일시적 사각지대(Temporal Dead Zone, TDZ)를 도입한 letconst는 개발자가 실수할 여지를 문법 수준에서 차단합니다. "안전하게 실패하기(Fail Fast)" 원칙에 따라, 런타임에 에러를 내뱉음으로써 버그가 사용자에게 도달하기 전에 수정할 수 있도록 돕는 것입니다.

5. 결론: var를 완전히 삭제해야 할 때

성능상의 이점이 있는 것도 아니며, 가독성 면에서도 최악인 var를 사용할 이유는 이제 단 하나도 없습니다. 만약 오래된 레거시 시스템을 수정하는 중이라면 대대적인 리팩토링을 통해 const 위주로 코드를 개편할 것을 강력히 권장합니다. 변하지 않는 값은 const로 선언하여 불변성을 유지하고, 상태 변화가 필요한 경우에만 let을 사용하십시오. 이것이 2026년 표준 개발자가 지향해야 할 최고의 가치입니다.


참고 문헌 및 지식 출처

  • You Don't Know JS Yet: Scope & Closures (Kyle Simpson)
  • Clean Code JavaScript - Variable Guidelines (Robert C. Martin principles applied to JS)
  • ECMAScript Specification - Section 14.3.1 (Let and Const Declarations)
728x90