C
JavaScript 목록
이전3 / 21다음
JavaScript/기초/Lesson 03

변수 — let · const · var

45분·theory
이 챕터
2/5

변수 — let · const · var

🎯 이 lesson 을 읽고 나면

이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.

  • ▸✅ var 가 왜 위험 한지 (function scope · hoisting)
  • ▸✅ TDZ (Temporal Dead Zone) 가 무엇인지
  • ▸✅ 재할당 가능성으로 const / let 선택

학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.

변수가 뭐냐

핵심 한 줄

변수 = 값을 이름으로 저장 하는 그릇. JS 에는 3가지 키워드 — var·let·const — 가 있는데, 역사적 이유 로 셋이 공존합니다. 결론: const 먼저, 필요하면 let, var 는 절대 X.

const — 한 번 정하면 끝

javascript
const PI = 3.14;
PI = 3.15;   // ❌ TypeError: 재할당 불가

가장 자주 쓰는 키워드. 95% 의 변수 는 const 면 충분합니다. 재할당이 불필요 한 게 보통이거든요.

> ⚠️ 헷갈리는 점: const 는 재할당 금지 일 뿐, 내부 수정 은 가능:

javascript
const obj = { name: "홍" };
obj.name = "길동";              // ✅ OK — 객체 *내부* 프로퍼티 변경
console.log(obj);                // { name: "길동" }   ← 바뀜!

// obj = { other: "X" };         // ❌ TypeError: Assignment to constant variable
//
// 💡 const = "변수가 가리키는 주소" 를 못 바꿈
//    객체 내부 내용물은 다른 얘기 → 자유롭게 수정 가능

let — 변경이 진짜 필요할 때

javascript
let count = 0;                       // 🔓 변경 가능한 변수

for (let i = 0; i < 10; i++) {       // i = 0,1,2,3,...,9
    count = count + i;               // 누적 (0+1+2+...+9)
}

console.log(count);   // 45   ← 0+1+2+...+9 의 합

반복문 카운터·누적 합계 등 값이 바뀌어야 하는 경우. const 로 시작하다가 진짜 필요할 때만 let.

var — 옛 키워드, 쓰지 마세요

javascript
var x = 10;   // ❌

2015 이전 JS 에는 var 만 있었습니다. 하지만:

  • ▸함수 스코프 — if 안에서 선언해도 함수 전체 적용
  • ▸호이스팅 (hoisting) — 선언 위치 무관 사용 가능 (혼란 야기)
  • ▸재선언 가능 — 같은 이름 두 번 선언해도 에러 X

이런 예측 불가 특성 때문에 버그 양산. 이제 옛 코드에만 보입니다.

블록 스코프 — let·const 의 진짜 가치

javascript
function example() {
    if (true) {
        // 🔲 블록 시작 — { 안 }
        let x = 10;       // 📦 블록 안에서만 살아있음
        const y = 20;     // 📦 블록 안에서만 살아있음
        var z = 30;       // 🌐 var 는 블록 무시 → 함수 전체에서 살아있음
    }
    // 🔲 블록 종료 — } 밖

    console.log(z);   // 30   ← ✅ var 라서 if 밖에서도 접근 가능
    console.log(x);   // 💥 ReferenceError: x is not defined
    //                       (let 은 블록 안에서만 살아서 이미 죽음)
}

example();   // ▶️ 호출해야 위 코드가 실제로 돌아감!

let·const 는 블록 ({}) 안에서만 유효. 예측 가능 + 변수 충돌 방지.

명명 규칙

javascript
// camelCase — 권장
const userName = "홍길동";
const isActive = true;
const userList = [];

// PascalCase — 클래스·컴포넌트
class User {}
function MyComponent() {}

// UPPER_CASE — 상수
const MAX_RETRIES = 3;
const API_URL = "https://api.example.com";

한 번 정리

javascript
// 99% 의 경우
const userName = "홍길동";

// 반복문·재할당 필요
let count = 0;

// var — 절대 X

const 먼저 쓰고 진짜 필요할 때만 let 으로 바꾸세요.

⚡ 직접 해보기 — const · let · var

const 와 let 을 직접 다뤄보고, 재할당 시 어떤 에러가 뜨는지 확인해보세요.
✏️ JS 코드
📟 콘솔 출력
▶ 실행 버튼을 눌러보세요
⚠️ 브라우저 샌드박스에서 실행 — console.log()만 지원, alert/fetch 불가

🤖 AI 에게 이렇게 요청해보세요

이 lesson 의 개념을 알면 AI 에게 구체적으로 지시할 수 있습니다. 막연한 "고쳐줘" 가 아니라 어휘를 가진 요청 — 그게 토큰 절약의 출발점입니다.

  • ▸"이 코드의 var 를 전부 const/let 으로 바꿔줘"
  • ▸"재할당 가능성을 분석해서 const 우선으로 정리해줘"
  • ▸"이 코드에서 hoisting 문제 가능성 진단해줘"

왜 이게 토큰을 줄이나

개념을 모를 땐 AI 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.

먼저 읽으면 좋은 개념: JavaScript란?
다음 추천: 자료형
이전목록다음
변수 (var, let, const) - JavaScript