# JavaScript 변수 비밀 대공개: let와 const, 그리고 복잡한 변수 선언의 모든 것 > **SEO 키워드**: JavaScript 변수, let와 const 차이, 자바스크립트 초보 --- # # 📌 서론 – “왜 변수 선언이 이렇게 복잡할까?” 프로그래밍을 처음 시작한 사람이라면 “변수는 변수일 뿐인데 왜 이렇게 여러 가지 선언 방법이 필요할까?”라는 궁금증에 빠지기 마련입니다. 특히 **JavaScript**는 `var`, `let`, `const` 세 가지 키워드가 존재하면서 초보자에게 혼란을 주곤 합니다. 이 글에서는 **JavaScript 변수** 선언의 역사를 짚어보고, `var`가 가진 함정, `let`과 `const`가 왜 등장했는지, 그리고 **let와 const 차이**를 실제 코드 예시와 함께 쉽게 설명합니다. 초보자도 바로 적용할 수 있는 실전 팁을 제공하니, 끝까지 읽고 여러분의 코드 품질을 한 단계 끌어올려 보세요! > 👉 원문 참고: [The Secret Life of JavaScript: Let, Const, and Why Variables Are Complicated](https://dev.to/aaron_rose_0787cc8b4775a0/the-secret-life-of-javascript-let-const-and-why-variables-are-complicated-2gkk) --- # # 📚 본론 ## # 1️⃣ JavaScript 변수 선언의 탄생 – `var`의 등장 1995년 넷스케이프에서 탄생한 JavaScript는 당시 웹 페이지를 동적으로 바꾸기 위한 간단한 스크립트 언어였습니다. 초기 버전에서는 **`var`** 하나만이 변수 선언 키워드였죠. ``` js var message = 'Hello, world!'; ``` `var`는 **함수 스코프(function scope)** 를 갖습니다. 즉, 변수가 선언된 함수 전체에서 접근 가능하고, 블록(`if`, `for` 등) 내부에서 선언해도 블록 밖으로 “누수(leak)”됩니다. ``` js function test() { if (true) { var leaked = 'I escape!'; } console.log(leaked); // 'I escape!' 출력 } test(); ``` 이러한 특성은 **예상치 못한 버그**를 만들기 쉽습니다. 특히 대형 프로젝트에서 변수 이름이 겹치면 의도치 않은 값이 덮어써지는 상황이 빈번히 발생했습니다. --- ## # 2️⃣ `var`가 가진 대표적인 함정 3가지 | # | 함정 | 설명 | 예시 | |---|------|------|------| | 1 | **호이스팅(Hoisting)** | 선언부가 코드 최상단으로 끌어올려져, 선언 전에 접근이 가능해 보인다. | `console.log(x); var x = 10; // undefined` | | 2 | **함수 스코프** | 블록 레벨이 아닌 함수 레벨이라 블록 내부 변수도 외부에 노출. | 위의 `leaked` 예시 | | 3 | **재선언 허용** | 같은 스코프 안에서 같은 변수명을 재선언해도 오류가 나지 않는다. | `var a = 1; var a = 2; // a = 2` | 이러한 문제점 때문에 ES6(ECMAScript 2015)에서는 **`let`**과 **`const`** 라는 새로운 선언 키워드가 도입되었습니다. --- ## # 3️⃣ `let`과 `const` – 현대 JavaScript의 핵심 ### # 3-1️⃣ 블록 스코프(Block Scope) `let`과 `const`는 **블록 레벨 스코프**를 가집니다. 즉, `{}` 로 감싼 영역 안에서만 유효합니다. ``` js { let blockVar = '블록 안'; const blockConst = '변경 불가'; } console.log(blockVar); // ReferenceError console.log(blockConst); // ReferenceError ``` ### # 3-2️⃣ 호이스팅은 여전하지만 “TDZ(Temporal Dead Zone)” 존재 `let`·`const`도 선언부가 호이스팅되지만, **TDZ** 라는 구역이 있어 선언 전 접근 시 `ReferenceError`가 발생합니다. ``` js console.log(a); // ReferenceError let a = 5; ``` ### # 3-3️⃣ 재선언 금지, 재할당 차이 - `let` : 같은 스코프 내 재선언 불가, 재할당 가능. - `const` : 재선언·재할당 모두 불가 (단, 객체·배열은 내부 값 수정 가능). ``` js let mutable = 1; mutable = 2; // OK const immutable = 10; immutable = 20; // TypeError const obj = { x: 1 }; obj.x = 2; // OK (객체 자체는 변하지 않음) ``` --- ## # 4️⃣ 언제 `let`을 쓰고 언제 `const`를 써야 할까? ### # ✅ 기본 원칙 – **가능하면 `const`부터 선언** 1. **값이 절대 변하지 않을 경우** → `const` - API 엔드포인트, 설정값, 고정 문자열 등 2. **값이 변할 가능성이 있을 때** → `let` - 루프 인덱스, 사용자 입력값, 상태값 등 > **Tip**: `const`를 기본으로 선언하고, 나중에 “재할당이 필요해졌다”는 판단이 들면 `let`으로 바꾸는 것이 좋은 습관입니다. ### # 📌 실전 예시 – 반복문에서의 선택 ``` js // ❌ var 사용 (버그 위험) for (var i = 0; i < 5; i++) { setTimeout(() => console.log(i), 100); // 5 5 5 5 5 } // ✅ let 사용 (블록 스코프) for (let i = 0; i < 5; i++) { setTimeout(() => console.log(i), 100); // 0 1 2 3 4 } ``` ### # 📌 객체와 배열은 언제 `const`? ``` js const colors = ['red', 'green']; colors.push('blue'); // OK – 배열 자체는 변하지 않음 colors = []; // TypeError ``` 위와 같이 **값 자체가 변하지 않는** 경우라면 `const`를 유지하고, **참조 자체를 바꿀** 경우에만 `let`을 사용합니다. --- ## # 5️⃣ 초보자를 위한 실전 팁 5가지 | 번호 | 팁 | 설명 | |------|----|------| | 1 | **코드 리뷰 시 `var` 금지** | 팀 규칙에 `var` 사용을 금지하고 `let/const`만 사용하도록 설정합니다. | | 2 | **ESLint `prefer-const` 규칙 활용** | 자동으로 재할당되지 않는 변수를 `const`로 바꿔줍니다. | | 3 | **TDZ를 이해하고 디버깅** | `ReferenceError`가 뜨면 선언 순서를 다시 확인하세요. | | 4 | **불변 객체(Immutable) 만들기** | `Object.freeze()` 로 객체를 완전 불변으로 만들면 버그 예방에 효과적입니다. | | 5 | **타입스크립트와 함께 사용** | 타입스크립트는 변수 선언 시 타입까지 강제하므로 `let/const` 활용이 더욱 명확해집니다. | --- # # 🏁 결론 – 지금 바로 코드에 적용해 보세요! `var`가 남아 있는 레거시 코드가 아직도 많지만, **`let`과 `const`** 를 올바르게 사용하면 **예측 가능한 스코프**, **안전한 재할당 정책**, 그리고 **읽기 쉬운 코드**를 만들 수 있습니다. 1. 기존 프로젝트에 `var`가 있다면 단계적으로 `let`·`const` 로 교체해 보세요. 2. 새 파일을 만들 때는 **무조건 `const`** 로 시작하고, 필요하면 `let` 으로 바꾸는 습관을 길러 보세요. 3. ESLint와 Prettier 같은 도구를 설정해 자동으로 코딩 스타일을 관리하면 **자바스크립트 초보**도 깔끔한 코드를 유지할 수 있습니다. > **행동 유도**: 오늘 당장 프로젝트의 첫 번째 `var` 변수를 찾아 `let` 혹은 `const` 로 바꿔 보세요. 작은 변화가 큰 품질 향상으로 이어집니다! --- ## # 📚 참고 자료 - [MDN – let](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let) - [MDN – const](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const) - [ESLint – prefer-const 규칙](https://eslint.org/docs/latest/rules/prefer-const) --- *이 글은 **JavaScript 변수**와 **let와 const 차이**에 초점을 맞춘 **자바스크립트 초보**를 위한 입문 가이드입니다. 앞으로도 최신 웹 개발 트렌드와 실전 팁을 다루는 포스트를 기대해 주세요!*