notes

10장. 객체 리터럴

2025-08-02수정 2026-09-267 min read

모던 JS Deep Dive — 객체 리터럴 핵심 정리.

Kim mr.

프론트엔드 · 기술 블로그

참고: 이웅모 《모던 자바스크립트 Deep Dive》 10장 · [MDN Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)

원시만 다루다 객체를 만나면 “값인데 안의 칸을 바꾼다”가 어색했다. 객체는 키-값의 집합이자 참조 타입이다. 변수에는 상자가 아니라 상자로 가는 주소가 담긴다.

flowchart LR
  VAR[변수] -->|참조| OBJ[객체]
  OBJ --> K1[키: 값]
  OBJ --> K2[키: 함수=메서드]

10.1 객체란?

상태(프로퍼티)와 행동(메서드)을 하나로 묶은 복합 데이터. JS의 거의 모든 구조(배열·함수·정규식)가 객체 계열이다.

10.2 객체 리터럴로 생성

가장 흔한 생성법. {} 안에 키: 값.

const person = {
  name: '민섭',
  age: 20,
};

new Object()도 가능하나 리터럴이 기본(17).

10.3 프로퍼티

키는 문자열·심벌. 숫자 키도 문자열로 바뀐다. 값은 아무 타입.

const o = { 1: 'a', 'hi': 1 };
console.log(o[1], o['1']);

식별자 규칙을 깨는 키는 따옴표.

10.4 메서드

값이 함수면 메서드. 객체에 행동을 붙인다.

const counter = {
  n: 0,
  inc() { this.n += 1; return this.n; },
};

10.5 프로퍼티 접근

점 obj.name / 대괄호 obj['name']. 키가 변수·표현식이면 대괄호 필수.

const key = 'age';
console.log(person[key]);

없는 키는 undefined. in/hasOwn은 19·16.

10.6–10.8 갱신·동적 생성·삭제

person.age = 21;
person.city = 'Seoul'; // 동적 추가
delete person.city;

const 객체여도 내용 변경 가능(15). freeze는 16.

10.9 ES6 리터럴 확장

프로퍼티 축약

const name = '민섭';
const user = { name }; // { name: '민섭' }

계산된 프로퍼티 이름

const prefix = 'on';
const handlers = {
  [prefix + 'Click']() {},
};

메서드 축약

inc() {} — inc: function() {} 설탕. non-constructor(17).

예제

function makePoint(x, y) {
  return {
    x, y,
    move(dx, dy) {
      this.x += dx; this.y += dy;
    },
    toString() { return `(${this.x},${this.y})`; },
  };
}
const p = makePoint(1, 2);
p.move(3, 4);
console.log(String(p));

// 옵션 객체
function connect({ host = 'localhost', port = 80, tls = false } = {}) {
  return { host, port, tls };
}

헷갈리던 장면 / 함정

const = 불변 객체
복사 const b = a는 참조 공유
얕은 복사 {...a} / Object.assign
키 순서 가정 (정수 인덱스 등 규칙 있음)
delete vs splice(배열)

표

질문 → 자답

Q. Map vs 객체? A. 키 타입이 다양·삽입 순서·빈번한 추가삭제는 Map. 구조화된 레코드는 객체.

Q. 깊은 복사? A. structuredClone / 라이브러리. spread는 얕음.

웹 보강 메모

MDN objects guide. 레포에서 obj['key'] 남용·동적 키 패턴을 점검.

실무로 바로

데이터: 리터럴
옵션: 옵션 객체+기본값
복사: 얕은 spread 명시, 깊은 복사는 의도적으로
사전: Map 또는 Object.create(null)

여기서 잠깐 💁‍♂️

11장은 원시/객체 비교·복사. 10에서 참조를 느껴야 11이 아프다.

보강 — 프로퍼티 나열

console.log(Object.keys(person));
console.log(Object.values(person));
console.log(Object.entries(person));
for (const [k, v] of Object.entries(person)) {
  console.log(k, v);
}

for…in은 체인까지(19). 실무는 keys/entries.

보강 — 병합

const defaults = { theme: 'dark', lang: 'ko' };
const prefs = { lang: 'en' };
const merged = { ...defaults, ...prefs }; // lang: en

뒤가 이긴다. null/undefined 스프레드는 무시되는 쪽에 가깝다.

연습 체크리스트

[ ] 핵심 표만 다시 그리기
[ ] 함정 예제를 콘솔에서 재현
[ ] MDN 링크 한 번씩 훑기
[ ] 실무 코드에서 같은 패턴 검색
[ ] 관련 장(앞뒤) 한 줄로 연결

일기 보강 — 헷갈림 → 찾아봄 → 정리

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

추가 예제 블록

// 실험 1 — 기대 vs 실제를 주석으로 남긴다
console.log('실험');

// 실험 2 — 경계값
console.log('경계');

// 실험 3 — 실무 형태
function demo() { return true; }
console.log(demo());

웹·스펙 메모

MDN과 ECMA-262 용어가 다를 수 있다. 노트에는 내가 디버깅에 쓰는 말을 우선 적고, 면접용 키워드를 괄호로 병기한다. 원문 복붙 없이 “왜 이렇게 동작하나”만 남긴다.

실무 적용 한 스푼

PR 리뷰 때 이 장 키워드가 보이면 체크리스트를 붙인다. 버그 리포트에는 재현 코드와 기대/실제를 한 쌍으로 적는다. 팀 컨벤션이 없으면 이 노트 표를 초안으로 제안한다.

연습 체크리스트

[ ] 핵심 표만 다시 그리기
[ ] 함정 예제를 콘솔에서 재현
[ ] MDN 링크 한 번씩 훑기
[ ] 실무 코드에서 같은 패턴 검색
[ ] 관련 장(앞뒤) 한 줄로 연결

일기 보강 — 헷갈림 → 찾아봄 → 정리

추가 예제 블록

// 실험 1 — 기대 vs 실제를 주석으로 남긴다
console.log('실험');

// 실험 2 — 경계값
console.log('경계');

// 실험 3 — 실무 형태
function demo() { return true; }
console.log(demo());

웹·스펙 메모

실무 적용 한 스푼

연습 체크리스트

[ ] 핵심 표만 다시 그리기
[ ] 함정 예제를 콘솔에서 재현
[ ] MDN 링크 한 번씩 훑기
[ ] 실무 코드에서 같은 패턴 검색
[ ] 관련 장(앞뒤) 한 줄로 연결

일기 보강 — 헷갈림 → 찾아봄 → 정리

추가 예제 블록

// 실험 1 — 기대 vs 실제를 주석으로 남긴다
console.log('실험');

// 실험 2 — 경계값
console.log('경계');

// 실험 3 — 실무 형태
function demo() { return true; }
console.log(demo());