logo

DowanKim

41. var 왜 쓰면 안되는건데

2026년 4월 14일

자바스크립트

모던 자바스크립트에서는 letconst가 표준이지만, 과거의 유산인 **var**는 오래된 소스 코드를 읽거나 유지보수할 때 반드시 마주치게 되는 '길목의 괴물' 같은 존재입니다.


🏗️ 1. var의 가장 큰 특징: 블록 스코프의 부재

letconst는 중괄호 {...}로 감싸진 모든 곳(if, for, while 등)을 자기만의 구역으로 삼지만, var는 블록을 무시합니다.

  • 영향력: 오직 함수 몸체전역 스코프만 인정합니다.
  • 부작용: if 문 안에서 선언한 변수가 if 문 밖에서도 살아남아 전역을 오염시킵니다.
if (true) { var test = true; } alert(test); // true (블록 밖인데도 접근 가능!)`

🎈 2. 호이스팅 (Hoisting): "선언은 위로, 할당은 아래로"

var로 선언한 변수는 코드 어디에 있든 자바스크립트 엔진에 의해 해당 스코프의 최상단으로 끌어올려진 것처럼 처리됩니다.

⚠️ 주의할 점

  1. 선언만 호이스팅 됩니다: 변수를 만드는 행위 자체는 맨 위로 가지만, 값을 넣는(할당) 행위는 원래 코드 위치에 남습니다.
  2. 결과: 선언 전에 변수를 불러도 에러가 나지 않고 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로 초기화되어 선언 전 접근이 가능하지만, letconst는 초기화 전 접근 시 에러(TDZ)가 발생합니다.

Q2. 호이스팅(Hoisting)이란 무엇이며, varlet의 차이는? (중급)

답변: 호이스팅은 변수 및 함수 선언이 해당 스코프의 최상단으로 옮겨지는 현상입니다. **var**는 선언과 동시에 undefined로 초기화되기 때문에 선언부 이전에 참조가 가능합니다. 하지만 **let**과 **const**는 선언 단계만 호이스팅되고 초기화 단계는 실제 코드에 도달했을 때 수행되므로, 그 사이의 구간인 **TDZ(Temporal Dead Zone)**에서 참조 시 에러가 발생합니다.