41. var 왜 쓰면 안되는건데
2026년 4월 14일
모던 자바스크립트에서는 let과 const가 표준이지만, 과거의 유산인 **var**는 오래된 소스 코드를 읽거나 유지보수할 때 반드시 마주치게 되는 '길목의 괴물' 같은 존재입니다.
🏗️ 1. var의 가장 큰 특징: 블록 스코프의 부재
let과 const는 중괄호 {...}로 감싸진 모든 곳(if, for, while 등)을 자기만의 구역으로 삼지만, var는 블록을 무시합니다.
- 영향력: 오직 함수 몸체나 전역 스코프만 인정합니다.
- 부작용:
if문 안에서 선언한 변수가if문 밖에서도 살아남아 전역을 오염시킵니다.
if (true) { var test = true; } alert(test); // true (블록 밖인데도 접근 가능!)`
🎈 2. 호이스팅 (Hoisting): "선언은 위로, 할당은 아래로"
var로 선언한 변수는 코드 어디에 있든 자바스크립트 엔진에 의해 해당 스코프의 최상단으로 끌어올려진 것처럼 처리됩니다.
⚠️ 주의할 점
- 선언만 호이스팅 됩니다: 변수를 만드는 행위 자체는 맨 위로 가지만, 값을 넣는(할당) 행위는 원래 코드 위치에 남습니다.
- 결과: 선언 전에 변수를 불러도 에러가 나지 않고
undefined를 반환합니다. (에러가 안 나서 버그를 찾기 더 힘듭니다.)
👯 3. 중복 선언 허용
let으로 똑같은 이름의 변수를 두 번 선언하면 문법 에러가 나지만, var는 아무런 경고 없이 받아들입니다.
var user = "Pete"; var user = "John"; // 에러 없음. 그냥 기존 변수를 덮어씁니다.
🛡️ 4. 과거의 해결책: IIFE (즉시 실행 함수)
과거 개발자들은 var의 '블록 스코프 부재'를 해결하기 위해 함수 스코프를 억지로 만드는 **IIFE(Immediately Invoked Function Expression)**라는 트릭을 사용했습니다.
(function() { var message = "Hello"; alert(message); // 이 안에서만 안전함 })(); // message는 밖에서 접근 불가!
- 원리: 함수를 만들자마자 바로 호출하여,
var가 함수 내부에 갇히게 만드는 방식입니다.
🎙️ 기술 면접 대비 (Interview Questions)
Q1. var, let, const의 차이점을 스코프 관점에서 설명해 주세요. (기초)
답변: **
var**는 함수 레벨 스코프를 가지며 블록을 무시합니다. 반면 **let**과 **const**는 블록 레벨 스코프를 가져 중괄호 내에서만 유효합니다. 또한var는 호이스팅 시undefined로 초기화되어 선언 전 접근이 가능하지만,let과const는 초기화 전 접근 시 에러(TDZ)가 발생합니다.
Q2. 호이스팅(Hoisting)이란 무엇이며, var와 let의 차이는? (중급)
답변: 호이스팅은 변수 및 함수 선언이 해당 스코프의 최상단으로 옮겨지는 현상입니다. **
var**는 선언과 동시에undefined로 초기화되기 때문에 선언부 이전에 참조가 가능합니다. 하지만 **let**과 **const**는 선언 단계만 호이스팅되고 초기화 단계는 실제 코드에 도달했을 때 수행되므로, 그 사이의 구간인 **TDZ(Temporal Dead Zone)**에서 참조 시 에러가 발생합니다.