C
JavaScript 목록
이전11 / 21다음
JavaScript/객체배열/Lesson 11

객체(Object) 기초 — 생성 · 접근 · 구조분해 · 스프레드

45분·theory
이 챕터
1/2

객체(Object) 기초 — 생성 · 접근 · 구조분해 · 스프레드

🎯 이 lesson 을 읽고 나면

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

  • ▸✅ 구조분해 + 기본값 + rename + rest 패턴
  • ▸✅ spread 로 불변 업데이트 + 얕은 복사 한계
  • ▸✅ 옵셔널 체이닝 ?. + ?? 기본값 조합

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

객체 생성과 접근 — 점 vs 대괄호

객체 리터럴

javascript
const user = {
    id: 1,
    name: 'Alice',
    email: '[email protected]',
    profile: {
        avatar: 'https://...',
        bio: '개발자'
    }
};

가장 자주 쓰는 형태. JSON 과 거의 동일하지만 키에 따옴표 생략 가능 (JS literal 만).

점 표기법 vs 대괄호 표기법

javascript
console.log(user.name);       // 'Alice'   ← 키가 정해진 경우는 점이 편함
console.log(user['name']);    // 'Alice'   ← 대괄호도 동일

// 🔑 변수에 키 이름이 담겨있을 때는 "대괄호만" 가능
const key = 'email';
console.log(user[key]);       // '[email protected]'
// user.key  → undefined ("key" 라는 이름의 프로퍼티를 찾아버림)

// 중첩 접근 — 두 방식 동일
console.log(user['profile']['bio']);   // '개발자'
console.log(user.profile.bio);         // '개발자'

규칙: 키가 문자열로 고정 이면 점. 동적 키 면 대괄호.

키가 식별자 규칙 을 벗어날 때

javascript
const data = { 'user-id': 1, 'first name': 'A' };
data.user-id    // ❌ 에러 (마이너스로 해석)
data['user-id'] // ✅

API 응답에 케밥-케이스 키 가 있으면 대괄호 필수.

수정 · 추가 · 삭제

javascript
user.age = 30;            // ➕ 없던 키 → 추가
user.name = 'Bob';        // ✏️ 있는 키 → 값 수정
delete user.email;        // 🗑️ 키 통째로 삭제

console.log(user);
// { id: 1, name: 'Bob', profile: {...}, age: 30 }
//   ↑ name 바뀜  ↑ email 사라짐    ↑ age 추가됨

단축 프로퍼티 (shorthand)

javascript
const name = 'Alice', age = 30;
const u = { name, age };   // = { name: name, age: age }

변수명과 키가 같으면 생략. React 에서 <Comp {...props} /> 패턴의 기반.

구조 분해 할당 — *바이브 코딩의 필수 어휘*

기본 구조분해

javascript
const user = { id: 1, name: 'A', email: '[email protected]' };

const { name, email } = user;
console.log(name);    // 'A'

객체에서 필요한 키만 변수로 꺼내기. AI 생성 코드의 모든 함수 시그니처에 등장.

이름 바꾸기 (rename)

javascript
const { name: userName } = user;
console.log(userName);   // 'A'

기본값 — 키가 없거나 undefined 일 때

javascript
const { name, role = 'user' } = user;
// user 에 role 이 없으면 'user' 가 기본값

중첩 구조분해

javascript
const { profile: { bio } } = user;   // bio 만 꺼냄

함수 파라미터에서 — React 컴포넌트 표준

javascript
// ❌ 옛 방식
function Card(props) {
    return <div>{props.title}</div>;
}

// ✅ 구조분해
function Card({ title, subtitle, onClick }) {
    return <div>{title}</div>;
}

// ✅ 기본값 + rest
function Card({ title, subtitle = '없음', ...rest }) {
    return <div {...rest}>{title}</div>;
}

전 세계 React 코드의 99% 가 이 패턴. 못 읽으면 모든 컴포넌트가 외국어.

배열 구조분해

javascript
const [first, second, ...rest] = [10, 20, 30, 40];
console.log(first, second, rest);   // 10 20 [30, 40]

const [a, , c] = [1, 2, 3];   // 중간 건너뛰기 → a=1, c=3

React useState 가 이 문법의 가장 자주 보는 예시:

javascript
const [count, setCount] = useState(0);

스프레드 · Object 정적 메서드 · 옵셔널 체이닝

스프레드 ... — 객체 펼치기

javascript
const user = { id: 1, name: 'A' };
const updated = { ...user, age: 30 };   // user 의 모든 키를 펼치고 + age 추가

console.log(updated);   // { id: 1, name: 'A', age: 30 }
console.log(user);      // { id: 1, name: 'A' }   ← 원본은 그대로! (불변 업데이트)

불변 업데이트 의 핵심. React state 갱신 표준 패턴:

javascript
setUser(prev => ({ ...prev, name: 'B' }));

같은 키가 뒤에 오면 덮어씀:

javascript
const merged = { ...defaults, ...userInput };  // userInput 이 우선

얕은 복사의 한계

javascript
const original = { profile: { bio: '개발자' } };
const copy = { ...original };
copy.profile.bio = 'AI';
console.log(original.profile.bio);   // 'AI' — 같이 바뀜!

1단계만 복사. 중첩 객체는 참조 공유. 깊은 복사가 필요하면:

javascript
const deep = structuredClone(original);   // 표준 (Node 17+, 모든 모던 브라우저)
const deep2 = JSON.parse(JSON.stringify(original));  // 옛 방식 (함수·Date·undefined 손실)

Object 정적 메서드 3개

javascript
const u = { name: 'A', age: 30, role: 'admin' };

console.log(Object.keys(u));     // ['name', 'age', 'role']
console.log(Object.values(u));   // ['A', 30, 'admin']
console.log(Object.entries(u));  // [['name','A'], ['age',30], ['role','admin']]
//                                    ↑ [키, 값] 쌍의 배열

entries 는 반복문에서 키/값 동시에 받을 때:

javascript
for (const [key, value] of Object.entries(u)) {
    console.log(`${key}: ${value}`);
}

옵셔널 체이닝 ?. — API 응답 파싱의 필수

javascript
const city = user?.address?.city;      // address 가 없어도 안 터짐
const first = list?.[0];               // 배열도 가능
const result = obj.fn?.();             // 함수 호출도 가능

?. 가 없을 땐:

javascript
const city = user && user.address && user.address.city;

5단어 → 1단어로 줄어든 셈. AI 생성 코드에 반드시 등장.

Nullish coalescing ?? — 기본값

javascript
const page = req.query?.page ?? 1;   // null/undefined 만 기본값으로

옵셔널 체이닝 결과를 기본값과 결합 하는 패턴이 단골.

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

  • ▸"이 함수 파라미터를 구조분해로 바꿔줘"
  • ▸"이 객체 갱신을 스프레드로 불변으로 만들어줘"
  • ▸"이 깊은 객체 접근을 옵셔널 체이닝으로 안전하게 만들어줘"

⚡ 직접 해보기 — 구조분해 · 스프레드 · Object 메서드

객체의 모던 패턴 5가지를 한 번에.
✏️ JS 코드
📟 콘솔 출력
▶ 실행 버튼을 눌러보세요
⚠️ 브라우저 샌드박스에서 실행 — console.log()만 지원, alert/fetch 불가
먼저 읽으면 좋은 개념: this 바인딩 — 암묵적/명시적/화살표함수, call/apply/bind
다음 추천: 배열 고차 함수
이전목록다음
객체(Object) 기초 — 생성 · 접근 · 구조분해 · 스프레드 - JavaScript