자바스크립트 구조 분해 할당(디스트럭처링) 완벽 가이드

자바스크립트 구조 분해 할당(디스트럭처링)이란?

자바스크립트 구조 분해 할당(디스트럭처링, destructuring)은 배열이나 객체 안의 값을 꺼내 개별 변수에 한 번에 담는 ES6 문법입니다. 기존에는 인덱스나 속성에 하나씩 접근해야 했지만, 구조 분해 할당을 쓰면 코드가 짧고 의도가 명확해집니다.

// 기존 방식
const user = { name: '지훈', age: 28 };
const name = user.name;
const age = user.age;

// 구조 분해 할당
const { name, age } = user;
console.log(name, age); // 지훈 28

배열 구조 분해

배열은 순서(위치)를 기준으로 값을 꺼냅니다.

const colors = ['빨강', '초록', '파랑'];
const [first, second] = colors;
console.log(first, second); // 빨강 초록

// 건너뛰기 (쉼표로 자리 비우기)
const [, , third] = colors;
console.log(third); // 파랑

// 나머지 요소 모으기 (rest)
const [head, ...rest] = [1, 2, 3, 4];
console.log(head); // 1
console.log(rest); // [2, 3, 4]

// 변수 교환
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1

객체 구조 분해

객체는 속성 이름(키)을 기준으로 값을 꺼냅니다. 순서는 상관없습니다.

const product = { title: '노트북', price: 1200000, stock: 5 };
const { title, price } = product;
console.log(title, price); // 노트북 1200000

별칭(다른 변수명)과 기본값

// 별칭: price를 cost라는 변수로
const { price: cost } = product;
console.log(cost); // 1200000

// 기본값: 속성이 없으면(undefined) 사용
const { discount = 0 } = product;
console.log(discount); // 0

// 별칭 + 기본값 함께
const { color: c = '검정' } = product;
console.log(c); // 검정

중첩 구조 분해

const order = {
  id: 1,
  customer: { name: '서연', city: '서울' },
};
const { customer: { name, city } } = order;
console.log(name, city); // 서연 서울

실전 활용: 함수 매개변수

구조 분해는 함수의 인자가 객체일 때 특히 유용합니다. 인자 순서를 외울 필요가 없어집니다.

function printUser({ name, age = 0 }) {
  console.log(`${name}님 (${age}세)`);
}
printUser({ name: '도윤', age: 30 }); // 도윤님 (30세)
printUser({ name: '하린' });          // 하린님 (0세)

// 모듈 import도 사실 구조 분해 형태입니다
// import { useState, useEffect } from 'react';

반복문, API 응답과 함께 쓰기

구조 분해는 배열 메서드나 for...of 반복문, API 응답 처리에서 특히 자주 등장합니다. 매 항목에서 필요한 값만 꺼내 쓰면 코드가 한결 읽기 쉬워집니다.

const users = [
  { id: 1, name: '민준', role: 'admin' },
  { id: 2, name: '서윤', role: 'user' },
];

// map 콜백 인자에서 바로 구조 분해
const names = users.map(({ name }) => name);
console.log(names); // ['민준', '서윤']

// for...of 와 구조 분해
for (const { id, role } of users) {
  console.log(id, role); // 1 admin / 2 user
}

// API 응답에서 필요한 값만 꺼내기
async function load() {
  const res = await fetch('/api/me');
  const { name, email = '미등록' } = await res.json();
  console.log(name, email);
}

배열 vs 객체 구조 분해 비교

흔한 실수

• 객체 구조 분해를 줄 시작에 단독으로 쓸 때: { a } = obj;는 블록으로 해석되어 오류가 납니다. ({ a } = obj);처럼 괄호로 감싸세요.
• 없는 속성 꺼내기: 존재하지 않는 키는 undefined가 됩니다. 기본값을 지정해 대비하세요.
• 중첩 구조에서 상위가 undefined일 때: const { a: { b } } = obj;에서 obj.a가 없으면 에러가 납니다. 상위에 기본값(a = {})을 주세요.
• 기본값은 undefined일 때만 적용: null이 들어오면 기본값이 적용되지 않습니다.

자주 묻는 질문

Q1. 구조 분해 할당의 기본값은 언제 적용되나요?

해당 값이 undefined일 때만 적용됩니다. null, 0, 빈 문자열은 "값이 있다"고 보아 기본값이 무시됩니다.

Q2. 변수 이름을 바꿔서 꺼낼 수 있나요?

네. 객체 구조 분해에서 const { price: cost } = obj;처럼 키: 새이름 형태로 별칭을 지정하면 됩니다.

Q3. 함수에서 여러 값을 반환할 때도 쓰나요?

네. 함수가 배열이나 객체로 여러 값을 반환하면 호출부에서 const [a, b] = fn(); 또는 const { x, y } = fn();으로 깔끔하게 받을 수 있습니다.