[Javascript] Destructuring

JS Destructuring, 구조 분해 할당, JavaScript destructuring

정의

Destructuring 은 배열 또는 객체의 일부를 변수로 풀어내는 ES6 문법. 코드를 짧고 명시적으로.

객체

const { name, age } = user;
const { name: userName } = user;          // rename
const { name = 'Anonymous' } = user;       // default
const { name, ...rest } = user;            // rest

// nested
const { address: { city, zip } } = user;

배열

const [a, b, c] = [1, 2, 3];
const [a, , c] = [1, 2, 3];       // 중간 skip
const [a, b = 10] = [1];           // default
const [head, ...tail] = [1, 2, 3]; // rest, head=1 tail=[2,3]

// swap
let x = 1, y = 2;
[x, y] = [y, x];                    // x=2, y=1

함수 매개변수

function greet({ name, age = 18 }) {
    return `${name}, ${age}`;
}
greet({ name: 'Alice', age: 30 });
greet({ name: 'Bob' });             // age=18 default

// 배열 인자
function point([x, y]) {
    return x + y;
}
point([3, 4]);                       // 7

자주 쓰는 idiom

API 응답 분해

const { data: { users, total }, error } = response;

React props

function Card({ title, body, onClick }) {
    return <div onClick={onClick}>{title}: {body}</div>;
}

옵션 객체

function createUser({ name, role = 'user', verified = false } = {}) {
    return { name, role, verified };
}
createUser();                        // {} default 까지 적용
createUser({ name: 'A', role: 'admin' });

= {} 가 없으면 createUser() 호출 시 destructure 실패 (TypeError).

map 콜백

users.map(({ name, age }) => `${name} (${age})`);

return 여러 값

function divmod(a, b) {
    return [Math.floor(a / b), a % b];
}
const [quotient, remainder] = divmod(10, 3);

// 객체로
function divmod2(a, b) {
    return { q: Math.floor(a / b), r: a % b };
}
const { q, r } = divmod2(10, 3);

동적 키

const key = 'name';
const { [key]: value } = user;       // user[key] → value

정렬과 결합

const [first, ...rest] = sorted;
const { id, ...others } = obj;
return { ...defaults, ...overrides };

함정

1. default 의 정확한 동작

const { a = 1 } = { a: undefined };   // a = 1 (undefined 만 default 적용)
const { a = 1 } = { a: null };         // a = null (null 은 default 무시)
const { a = 1 } = { a: 0 };            // a = 0

2. nested 의 함정

const { a: { b } } = obj;
// obj.a 가 undefined 면 → TypeError

// 안전한 패턴
const { a: { b } = {} } = obj;
// obj.a 가 undefined 면 {} 로 default

3. 배열의 rest 위치

const [a, ...rest, b] = arr;    // ❌ rest 는 마지막만
const [first, ...rest] = arr;    // ✓

4. 변수명 vs property 명

const { name } = user;        // name 변수에 user.name
const { name: alias } = user; // alias 변수에 user.name

// 헷갈리지 말 것: 콜론의 의미가 객체 리터럴과 반대
const obj = { name: 'value' };       // name 이 키, 'value' 가 값
const { name: alias } = obj;          // name 이 키, alias 가 변수

5. 함수 매개변수의 = {}

function fn({ a, b }) { ... }
fn();    // ❌ TypeError (undefined 를 destructure)

function fn({ a, b } = {}) { ... }
fn();    // ✓

모범 사례

1. 함수 매개변수 에 적극 사용 (가독성)
2. default value + = {} 함께 (안전한 함수)
3. nested 보다 평탄 (1-2 단계까지)
4. swap idiom : [a, b] = [b, a]

참고

• JS Object
• JS Array
• JS Spread / Rest