notes

04장. 변수

2025-08-03수정 2026-09-268 min read

모던 JS Deep Dive — 변수 선언·할당과 식별자 관리 핵심 정리.

Kim mr.

프론트엔드 · 기술 블로그

참고: 이웅모 《모던 자바스크립트 Deep Dive》 04장 · [MDN Grammar and types — Variables](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#declarations)

계산 결과를 다시 쓰려면 이름이 필요하다. 그게 변수다. 이 장은 “왜 변수인가”부터 선언·호이스팅·재할당·네이밍까지, 이후 let/const(15)의 바닥이다.

flowchart LR
  DECL[선언] --> BIND[이름 바인딩]
  BIND --> ASSIGN[할당]
  ASSIGN --> READ[참조]
  ASSIGN --> RE[재할당]

4.1 변수란? 왜 필요한가?

값을 재사용·추적·의도 표현. 매직 넘버를 이름 있는 상태로 바꾼다.

const taxRate = 0.1;
const price = 1000;
const tax = price * taxRate;

4.2 식별자

변수·함수·클래스 이름. 유니코드 허용 범위, 예약어 금지, 대소문자 구분.

4.3 변수 선언

var / let / const. 이 장 초점은 var 시대 감각 + 선언의 의미. 실무 기본은 const/let(15).

var x;
let y = 1;
const z = 2;

4.4 실행 시점과 호이스팅

선언이 스코프 평가 단계에서 먼저 처리되는 것처럼 보인다. var는 undefined로 초기화, let/const는 TDZ(15).

console.log(a); // undefined with var
var a = 1;

4.5 값의 할당

선언과 할당은 다를 수 있다. =는 할당 연산(표현식).

4.6 재할당

같은 이름에 다른 값. const는 바인딩 재할당 불가(15).

let count = 0;
count = count + 1;

4.7 네이밍 규칙

의미 있는 이름, 일관된 케이스(camelCase), 불리언은 is/has, 금지: 한 글자 남발·모호한 data2.

예제

function area(width, height) {
  const w = width;
  const h = height;
  return w * h;
}

// 나쁜 예
var d = new Date();
var x1 = d.getTime();
// 나은 예
const now = Date.now();

헷갈리던 장면 / 함정

선언 없이 할당 → 암묵 전역(20)
var 호이스팅을 “코드가 올라갔다”로 오해
const 객체 내용 변경과 재할당 혼동
이름 충돌

표

질문 → 자답

Q. 변수 없이 프로그래밍? A. 가능하나 가독성·재사용이 무너진다. 이름은 설계다.

Q. 호이스팅이 왜 있나? A. 함수 선언 사용성 등 역사·편의. 현대는 let/const로 위험을 줄인다.

웹 보강 메모

MDN declarations. ESLint no-undef, prefer-const.

실무로 바로

const 기본, 재할당만 let
의미 있는 이름
매직 넘버 상수화
선언 위치는 사용과 가깝게(가독성)

여기서 잠깐 💁‍♂️

5장은 표현식과 문 — 값이 어떻게 만들어지는지.

연습·복습 체크리스트

[ ] 이 장 핵심 표를 백지에 다시 그리기
[ ] 함정 예제를 콘솔에서 재현
[ ] MDN 관련 페이지 북마크
[ ] 실무 코드에서 같은 패턴 검색·리팩터 후보 표시
[ ] 앞뒤 장과 한 줄로 연결해 보기

일기 보강

처음엔 용어가 추상적으로 들렸다. 책을 덮고 한 줄 정의를 내 말로 다시 쓰고, 예제를 최소 세 개 쳐 보니 문제 유형이 보이기 시작했다. “외운 문장”이 아니라 “다시 설명 가능한 문장”이 남을 때까지 표를 줄였다 늘렸다. 원문 복붙 없이 왜 이렇게 동작하나만 남겼다.