JavaScript var vs let vs const 완벽 비교 | 변수 선언 방식 선택 가이드

들어가며

“var를 써도 되나요?” JavaScript를 배울 때 자주 나오는 질문입니다. 이 글에서는 var, let, const의 차이를 명확히 이해하고, 실전에서 어떤 것을 써야 하는지 선택 기준을 제시합니다. 비유로 말씀드리면, var는 건물 전체가 하나의 방처럼 들리는 스피커, let은 회의실 칸막이, const는 한 번 붙인 이름표를 못 바꾸는 자리에 가깝습니다. 루프·블록 단위로 변수를 나누려면 let과 const가 맞습니다.

언제 let을, 언제 const를 쓰나요? (var는?)

관점	const	let	var
성능	동일 계열에서 차이는 미미	동일	호이스팅·스코프로 버그 유발이 잦음
사용성	재할당이 없을 때 기본	재할당이 필요할 때	레거시·특수 호환 외에는 비권장
적용 시나리오	대부분의 바인딩	카운터·스왑 등	구형 코드 유지

이 글을 읽으면

• var, let, const의 스코프 차이를 이해합니다
• 호이스팅이 각각 어떻게 동작하는지 배웁니다
• 재할당과 재선언의 차이를 익힙니다
• 실전에서 어떤 것을 써야 하는지 판단할 수 있습니다

---

실전 경험에서 배운 교훈

이 기술을 실무 프로젝트에 처음 도입했을 때, 공식 문서만으로는 알 수 없었던 많은 함정들이 있었습니다. 특히 프로덕션 환경에서 발생하는 엣지 케이스들은 로컬 개발 환경에서는 재현조차 되지 않았죠.

가장 어려웠던 점은 성능 최적화였습니다. 처음엔 “동작만 하면 되겠지”라고 생각했지만, 실제 사용자 트래픽이 몰리면서 병목 지점들이 하나씩 드러났습니다. 특히 데이터베이스 쿼리 최적화, 캐싱 전략, 에러 핸들링 구조 등은 여러 번의 장애를 겪으면서 개선해 나갔습니다.

이 글에서는 그런 시행착오를 통해 얻은 실전 노하우와, “이렇게 하면 안 된다”는 교훈들을 함께 정리했습니다. 특히 트러블슈팅 섹션은 실제 장애 대응 경험을 바탕으로 작성했으니, 비슷한 문제를 마주했을 때 참고하시면 도움이 될 것입니다.

1. 빠른 비교표

특성	var	let	const
스코프	함수 스코프	블록 스코프	블록 스코프
호이스팅	선언 + 초기화 (undefined)	선언만 (TDZ)	선언만 (TDZ)
재할당	✅ 가능	✅ 가능	❌ 불가능
재선언	✅ 가능	❌ 불가능	❌ 불가능
전역 객체	window에 추가	추가 안 됨	추가 안 됨
권장 사용	❌ 사용 금지	✅ 재할당 필요 시	✅ 기본 선택

---

2. 스코프 차이

var: 함수 스코프

function testVar() {
    if (true) {
        var x = 10;
    }
    console.log(x); // ✅ 10 (블록 밖에서도 접근 가능)
}
testVar();

let/const: 블록 스코프

function testLet() {
    if (true) {
        let x = 10;
        const y = 20;
    }
    console.log(x); // ❌ ReferenceError: x is not defined
    console.log(y); // ❌ ReferenceError: y is not defined
}

실전 문제: 루프 변수

// var의 함정
for (var i = 0; i < 3; i++) {
    setTimeout(() => {
        console.log(i); // 3, 3, 3 (예상: 0, 1, 2)
    }, 100);
}
// let으로 해결
for (let i = 0; i < 3; i++) {
    setTimeout(() => {
        console.log(i); // 0, 1, 2 ✅
    }, 100);
}

이유: var는 함수 스코프이므로 루프가 끝난 후 i = 3이 됩니다. let은 각 반복마다 새로운 블록 스코프를 생성합니다.

3. 호이스팅

var: 선언 + 초기화 호이스팅

console.log(x); // undefined (에러 아님!)
var x = 10;
// 실제 동작
var x = undefined; // 호이스팅
console.log(x);    // undefined
x = 10;

let/const: TDZ (Temporal Dead Zone)

console.log(x); // ❌ ReferenceError: Cannot access 'x' before initialization
let x = 10;
// TDZ: 스코프 시작부터 선언까지의 구간
{
    // TDZ 시작
    console.log(x); // ❌ ReferenceError
    let x = 10;     // TDZ 끝
    console.log(x); // ✅ 10
}

실전 예제

// var의 문제
function getUser() {
    if (!user) {
        var user = fetchUser(); // 호이스팅으로 전체 함수 스코프
    }
    return user; // undefined 반환 가능
}
// let으로 해결
function getUser() {
    if (!user) {
        let user = fetchUser(); // 블록 스코프
    }
    return user; // ❌ ReferenceError (의도한 대로 에러)
}

---

4. 재할당과 재선언

var: 재할당, 재선언 모두 가능

var x = 10;
var x = 20; // ✅ 재선언 가능 (위험!)
x = 30;     // ✅ 재할당 가능

let: 재할당 가능, 재선언 불가

let x = 10;
let x = 20; // ❌ SyntaxError: Identifier 'x' has already been declared
x = 30;     // ✅ 재할당 가능

const: 재할당, 재선언 모두 불가

const x = 10;
const x = 20; // ❌ SyntaxError
x = 30;       // ❌ TypeError: Assignment to constant variable

---

5. const의 불변성

주의: const는 참조만 불변

// 기본 타입: 완전 불변
const x = 10;
x = 20; // ❌ TypeError
// 객체: 참조는 불변, 내용은 가변
const obj = { name: 'Alice' };
obj = { name: 'Bob' }; // ❌ TypeError (참조 변경 불가)
obj.name = 'Bob';      // ✅ 가능 (내용 변경 가능)
// 배열: 참조는 불변, 요소는 가변
const arr = [1, 2, 3];
arr = [4, 5, 6];  // ❌ TypeError
arr.push(4);      // ✅ 가능
arr[0] = 10;      // ✅ 가능

완전 불변 객체

// Object.freeze로 완전 불변
const obj = Object.freeze({ name: 'Alice' });
obj.name = 'Bob'; // ❌ 무시됨 (strict mode에서는 TypeError)
// 깊은 불변성 (중첩 객체)
function deepFreeze(obj) {
    Object.freeze(obj);
    Object.values(obj).forEach(value => {
        if (typeof value === 'object' && value !== null) {
            deepFreeze(value);
        }
    });
    return obj;
}
const config = deepFreeze({
    api: {
        url: 'https://api.example.com',
        timeout: 5000,
    },
});
config.api.url = 'https://evil.com'; // ❌ 무시됨

---

6. 실전 선택 가이드

기본 원칙

// 1순위: const (기본)
const API_URL = 'https://api.example.com';
const users = [];
// 2순위: let (재할당 필요 시)
let count = 0;
for (let i = 0; i < 10; i++) {
    count += i;
}
// 3순위: var (사용 금지!)
// 레거시 코드에서만 볼 수 있음

상황별 선택

상황	선택	이유
상수	const	재할당 방지
루프 변수	let	블록 스코프
카운터	let	재할당 필요
객체/배열	const	참조 불변 (내용은 가변)
함수	const	재할당 방지
레거시	var	기존 코드 유지보수만

ESLint 설정

// .eslintrc.json
{
  "rules": {
    "no-var": "error",           // var 금지
    "prefer-const": "warn",      // 재할당 없으면 const 권장
    "no-const-assign": "error"   // const 재할당 금지
  }
}

---

7. 흔한 실수

실수 1: var 재선언

var user = 'Alice';
// ....100줄 후 ...
var user = 'Bob'; // ✅ 에러 없음 (의도치 않은 재선언!)
// let으로 방지
let user = 'Alice';
let user = 'Bob'; // ❌ SyntaxError

실수 2: 루프 클로저

// var의 함정
var funcs = [];
for (var i = 0; i < 3; i++) {
    funcs.push(function() {
        return i;
    });
}
console.log(funcs[0]()); // 3 (예상: 0)
console.log(funcs[1]()); // 3 (예상: 1)
console.log(funcs[2]()); // 3 (예상: 2)
// let으로 해결
for (let i = 0; i < 3; i++) {
    funcs.push(function() {
        return i;
    });
}
console.log(funcs[0]()); // 0 ✅
console.log(funcs[1]()); // 1 ✅
console.log(funcs[2]()); // 2 ✅

실수 3: const 객체 수정 시도

const config = { debug: true };
// ❌ 잘못된 이해
config = { debug: false }; // TypeError
// ✅ 올바른 이해
config.debug = false; // 가능

---

8. 전역 객체와의 관계

var는 전역 객체에 추가

var globalVar = 'I am global';
console.log(window.globalVar); // 'I am global' (브라우저)
let globalLet = 'I am global';
console.log(window.globalLet); // undefined
const globalConst = 'I am global';
console.log(window.globalConst); // undefined

왜 문제인가?

// 기존 전역 변수 덮어쓰기
var alert = 'oops';
alert('Hello'); // ❌ TypeError: alert is not a function

---

마무리

JavaScript 변수 선언의 핵심:

1. const를 기본으로 사용하세요
2. 재할당이 필요하면 let 사용
3. var는 절대 사용하지 마세요
4. ESLint로 자동 검사 설정 핵심: const > let > var 순서로 고려하고, var는 레거시 코드에서만 보게 될 것입니다.

---

FAQ

Q1. const를 쓰면 성능이 더 좋나요? 미미한 차이입니다. const의 주요 이점은 의도 표현과 실수 방지입니다. Q2. 모든 변수를 const로 선언해야 하나요? 재할당이 필요 없다면 const를 사용하세요. 코드 리뷰어가 “이 변수는 바뀌지 않는구나”를 바로 알 수 있습니다. Q3. 기존 코드의 var를 모두 let/const로 바꿔야 하나요? 점진적으로 바꾸세요. 새 코드는 let/const만 사용하고, 기존 코드는 수정할 때 함께 바꾸면 됩니다.

관련 글

• JavaScript 스코프와 클로저
• JavaScript 호이스팅 완벽 가이드
• JavaScript 모던 문법

---

실전 체크리스트

변수 선언 체크리스트

• 기본적으로 const 사용
• 재할당 필요 시 let 사용
• var 사용 금지
• ESLint no-var 규칙 활성화
• 객체/배열도 const 사용 (참조 불변)

코드 리뷰 체크리스트

• var 사용 여부 확인
• let인데 재할당이 없으면 const로 변경
• 루프 변수는 let 사용
• 전역 변수 최소화

---

키워드

JavaScript, var, let, const, 변수 선언, 스코프, 호이스팅, TDZ, 재할당, 블록 스코프, 함수 스코프, 비교

심화 부록: 구현·운영 관점

이 부록은 앞선 본문에서 다룬 주제(「JavaScript var vs let vs const 완벽 비교 | 변수 선언 방식 선택 가이드」)를 구현·런타임·운영 관점에서 다시 압축합니다. 도메인별 세부 구현은 글마다 다르지만, 입력 검증 → 핵심 연산 → 부작용(I/O·네트워크·동시성) → 관측의 흐름으로 장애를 나누면 원인 추적이 빨라집니다.

내부 동작과 핵심 메커니즘

flowchart TD
  A[입력·요청·이벤트] --> B[파싱·검증·디코딩]
  B --> C[핵심 연산·상태 전이]
  C --> D[부작용: I/O·네트워크·동시성]
  D --> E[결과·관측·저장]

sequenceDiagram
  participant C as 클라이언트/호출자
  participant B as 경계(런타임·게이트웨이·프로세스)
  participant D as 의존성(API·DB·큐·파일)
  C->>B: 요청/이벤트
  B->>D: 조회·쓰기·RPC
  D-->>B: 지연·부분 실패·재시도 가능
  B-->>C: 응답 또는 오류(코드·상관 ID)

• 불변 조건(Invariant): 버퍼 경계, 프로토콜 상태, 트랜잭션 격리, FD 상한 등 단계별로 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
• 결정성: 순수 층과 시간·네트워크·스케줄에 의존하는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
• 경계 비용: 직렬화, 인코딩, syscall 횟수, 락 경합, 할당·GC, 캐시 미스를 의심 목록에 둡니다.
• 백프레셔: 생산자가 소비자보다 빠를 때 버퍼·큐·스트림에서 속도를 줄이는 신호를 어디에 둘지 정의합니다.

프로덕션 운영 패턴

영역	운영 관점 질문
관측성	요청 단위 상관 ID, 에러율·지연 p95/p99, 의존성 타임아웃·재시도가 대시보드에 보이는가
안전성	입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가
신뢰성	재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가
성능	캐시·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가
배포	롤백 룬북, 카나리/블루그린, 마이그레이션·피처 플래그가 문서화되어 있는가
용량	피크 트래픽·디스크·FD·스레드 풀 상한을 주기적으로 검증하는가

스테이징은 데이터 양·네트워크 RTT·동시성을 프로덕션에 가깝게 맞출수록 재현율이 올라갑니다.

확장 예시: 엔드투엔드 미니 시나리오

앞선 본문 주제(「JavaScript var vs let vs const 완벽 비교 | 변수 선언 방식 선택 가이드」)를 배포·운영 흐름에 맞춰 옮긴 체크리스트입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.

1. 입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드를 경계에 둔다.
2. 핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 로그·메트릭·트레이스에서 한 흐름으로 본다.
3. 실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
4. 호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지 확인한다.
5. 부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값을 점검한다.

handle(request):
  ctx = newCorrelationId()
  validated = validateSchema(request)
  authorize(validated, ctx)
  result = domainCore(validated)
  persistOrEmit(result, idempotentKey)
  recordMetrics(ctx, latency, outcome)
  return result

문제 해결(Troubleshooting)

증상	가능 원인	조치
간헐적 실패	레이스, 타임아웃, 외부 의존성, DNS	최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검
성능 저하	N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스	프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거
메모리 증가	캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납	상한·TTL·힙/FD 스냅샷 비교
빌드·배포만 실패	환경 변수, 권한, 플랫폼 차이, lockfile	CI 로그와 로컬 diff, 런타임·이미지 버전 핀
설정 불일치	프로필·시크릿·기본값, 리전	스키마 검증된 설정 단일 소스와 배포 매트릭스 표준화
데이터 불일치	비멱등 재시도, 부분 쓰기, 캐시 무효화 누락	멱등 키·아웃박스·트랜잭션 경계 재검토

권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.

배포 전에는 git add → git commit → git push 후 npm run deploy 순서를 권장합니다.

---

같이 보면 좋은 글 (내부 링크)

이 주제와 연결되는 다른 글입니다.

• JavaScript 변수와 데이터 타입 | let, const, var 완벽 정리
• C++ std::function vs 함수 포인터 | ‘성능과 유연성’ 완벽 비교
• C++ struct vs class | 접근 제어·POD·C 호환 완벽 비교

---

이 글에서 다루는 키워드 (관련 검색어)

JavaScript, var, let, const, 변수, 스코프, 호이스팅, 비교 등으로 검색하시면 이 글이 도움이 됩니다.