[JavaScript] 구조 분해 할당 (Destructing)

Destructuring (구조 분해 할당)

JavaScript로 개발을 하다 보면 함수에 객체나 배열을 전달하는 경우가 생긴다.

또 모든 데이터가 아닌 일부만 필요한 경우도 자주 생긴다.

 

이럴 때 Destructing(구조 분해 할당)을 통해 객체나 배열을 변수로 쉽게 분해할 수 있다.

 

---

1. Array Destructuring (배열 구조 분해 할당)

1) 배열은 인덱스 위치를 기준으로 할당된다.

const arr = [1, 2, 3];

const [one, two, three] = arr;

console.log(one, two, three); // 1 2 3

[x, y] = [1];
console.log(x, y); // 1 undefined

[x, y] = [1, 2, 3];
console.log(x, y); // 1 2

// 쉼표 → 특정 배열 요소를 무시
[x, , z] = [1, 2, 3];
console.log(x, z); // 1 3

// 기본값 → undefined일 때 그 값을 대신 사용
[x, y = 10, z = 3] = [1, 2];
console.log(x, y, z); // 1 2 3

// Spread → 나머지 배열들로 새로운 배열을 만듦
[x, ...rest] = [1, 2, 3];
console.log(x, y); // 1 [ 2, 3 ]

 

2) 메서드의 반환 값을 바로 구조 분해 할당하면 편리하다.

let [firstName, surname] = "Seokzin So".split(' ');

 

3) 배열뿐 아니라 모든 Iterable이 올 수 있다.

let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);

 

4) 두 개 이상의 변수 값 교환에 구조 분해 할당을 응용할 수 있다.

let guest = "Jane";
let admin = "Pete";

[guest, admin] = [admin, guest];

 

---

2. Object Destructuring (객체 구조 분해 할당)

1) 객체는 프로퍼티 이름(키)을 기준으로 할당된다.

const obj = { firstName: "Seokzin", lastName: "So" };

// 프로퍼티 키를 기준으로 구조분해할당. 순서 의미는 X
const { lastName, firstName } = obj;

console.log(firstName, lastName); // Seokzin So

 

2) 좌측엔 객체 형태로 대응하면 된다.

const { prop1: p1, prop2: p2 } = { prop1: "a", prop2: "b" };
console.log(p1, p2); // 'a' 'b'

// 축약형
const { prop1, prop2 } = { prop1: "a", prop2: "b" };
console.log({ prop1, prop2 }); // { prop1: 'a', prop2: 'b' }

// default value
const { prop1, prop2, prop3 = "c" } = { prop1: "a", prop2: "b" };
console.log({ prop1, prop2, prop3 }); // { prop1: 'a', prop2: 'b', prop3: 'c' }

 

3) 필요한 프로퍼티 값만을 추출할 수 있다.

const todos = [
  { id: 1, content: "HTML", completed: true },
  { id: 2, content: "CSS", completed: false },
  { id: 3, content: "JS", completed: false },
];

// 객체로부터 completed 프로퍼티만을 추출
const completedTodos = todos.filter(({ completed }) => completed);

console.log(completedTodos); // [ { id: 1, content: 'HTML', completed: true } ]

 

4) 중첩 객체에서의 추출

const person = {
  name: 'Lee',
  address: {
    zipCode: '03068',
    city: 'Seoul'
  }
};

const { address: { city } } = person;

console.log(city); // 'Seoul'