객체와 구조분해

구조분해 할당 — 객체에서 값 꺼내기

구조분해 할당(Destructuring Assignment)은 객체나 배열에서 필요한 값을 간결하게 꺼내는 ES6 문법입니다. 현대 자바스크립트 코드에서 매우 빈번하게 쓰입니다.

기본 구조분해

const user = { name: "Kim", age: 30, city: "Seoul" };

// 기존 방식
const name1 = user.name;
const age1 = user.age;

// 구조분해
const { name, age, city } = user;
console.log(name, age, city); // "Kim" 30 "Seoul"

// 없는 프로퍼티
const { phone } = user;
console.log(phone); // undefined

별칭(Alias)과 기본값

const product = { id: 1, productName: "노트북", price: 1200000 };

// 별칭: 다른 변수명으로 받기
const { productName: name, price: cost } = product;
console.log(name); // "노트북"
console.log(cost); // 1200000

// 기본값: 프로퍼티가 undefined일 때 사용
const { id, stock = 0, discount = 0.1 } = product;
console.log(stock);    // 0 (product에 없으므로 기본값)
console.log(discount); // 0.1

// 별칭 + 기본값 동시 사용
const { productName: title = "제목 없음" } = product;
console.log(title); // "노트북"

중첩 객체 구조분해

const order = {
  id: "ORD-001",
  customer: {
    name: "Kim",
    address: {
      city: "Seoul",
      zip: "04524"
    }
  },
  total: 150000
};

// 중첩 분해
const {
  id: orderId,
  customer: {
    name: customerName,
    address: { city, zip }
  },
  total
} = order;

console.log(orderId);      // "ORD-001"
console.log(customerName); // "Kim"
console.log(city, zip);    // "Seoul" "04524"
console.log(total);        // 150000

// 주의: customer 자체는 변수로 선언되지 않음
// console.log(customer); // ReferenceError

rest로 나머지 수집

const { name, age, ...rest } = { name: "Kim", age: 30, city: "Seoul", job: "Dev" };
console.log(name); // "Kim"
console.log(age);  // 30
console.log(rest); // { city: "Seoul", job: "Dev" }

// 특정 키 제외하고 복사 (실무 패턴)
const { password, ...safeUser } = { name: "Kim", email: "kim@test.com", password: "secret" };
// safeUser를 API 응답으로 전달 (비밀번호 제외)

함수 매개변수에서 구조분해 — 가장 많이 쓰는 패턴

// 기존 방식 — 객체를 그대로 받으면 내부에서 매번 접근
function renderCard(user) {
  return `${user.name} (${user.age})`;
}

// 구조분해 매개변수 — 필요한 것만 선언
function renderCard({ name, age, city = "미등록" }) {
  return `${name} (${age}) — ${city}`;
}

renderCard({ name: "Kim", age: 30, city: "Seoul" }); // "Kim (30) — Seoul"
renderCard({ name: "Lee", age: 25 }); // "Lee (25) — 미등록"

// React 컴포넌트 스타일
function Button({ label, onClick, disabled = false, className = "" }) {
  // label, onClick 등 직접 사용
}

// 중첩 구조분해도 가능
function processOrder({ id, customer: { name }, total }) {
  return `주문 ${id}: ${name}님, ${total}원`;
}

반복문에서 구조분해

const users = [
  { id: 1, name: "Kim", role: "admin" },
  { id: 2, name: "Lee", role: "member" },
  { id: 3, name: "Park", role: "member" },
];

// for...of + 구조분해
for (const { id, name, role } of users) {
  console.log(`${id}: ${name} (${role})`);
}

// Object.entries() + 구조분해
const scores = { math: 90, english: 85, science: 92 };
for (const [subject, score] of Object.entries(scores)) {
  console.log(`${subject}: ${score}점`);
}

// map + 구조분해
const displayList = users.map(({ name, role }) => `${name}: ${role}`);
// ["Kim: admin", "Lee: member", "Park: member"]

구조분해 + 스프레드 조합 패턴

// 객체 업데이트 (불변 방식)
const original = { id: 1, name: "Kim", age: 30 };
const updated = { ...original, age: 31 }; // age만 교체
// { id: 1, name: "Kim", age: 31 }

// 깊은 중첩 업데이트
const state = {
  user: { name: "Kim", settings: { theme: "light" } }
};
const newState = {
  ...state,
  user: {
    ...state.user,
    settings: { ...state.user.settings, theme: "dark" }
  }
};

// 배열 내 특정 요소 교체 (불변 방식)
const items = [
  { id: 1, done: false },
  { id: 2, done: false },
  { id: 3, done: false },
];
const toggled = items.map(item =>
  item.id === 2 ? { ...item, done: true } : item
);
// id가 2인 항목만 done: true로 변경

import 구조분해 — 모듈에서도 같은 문법

// named export를 구조분해로 가져오기
import { useState, useEffect } from "react";
import { formatDate, parseDate } from "./utils/date";
import { API_URL, MAX_RETRIES } from "./config";

관련 검색어  ·  객체 구조분해 할당, 별칭 기본값 구조분해, 중첩 객체 분해, 함수 매개변수 구조분해, rest 구조분해, 불변 객체 업데이트