모던 자바스크립트 36. 디스트럭처링 할당

 

'구조 분해 할당'이라고도 하는 디스트럭처링 할당은 ES6에서 도입된 JavaScript 문법으로, 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 이는 배열이나 객체의 값을 쉽게 추출하여 변수에 할당할 수 있게 하여 코드의 가독성을 높이고, 더 간결하게 작성할 수 있게 도와준다. 

---

1. 배열 디스트럭처링 할당

• 배열의 요소를 변수에 할당하고자 할 때 사용한다.
• 배열 디스트럭처링 할당 대상(우측)은 이터러블이어야 하며, 형태는 배열 리터럴이어야 한다.
• 배열 디스트럭처링 할당 기준은 배열의 인덱스 즉, 배열 내 요소의 순서대로이다.

// 배열 리터럴로 생성된 배열을 arr에 할당
const arr = [1, 2, 3, 4];

// 배열 디스트럭처링 할당
const [first, second] = arr;

console.log(first);  // ✅ 1
console.log(second); // ✅ 2

• 배열 디스트럭처링 할당 기준은 배열의 인덱스이므로 특정 번째 요소를 무시하고 할당하는 것도 가능하다.

const arr = [1, 2, 3, 4];

// 두 번째 요소를 무시
const [first, , third] = arr;

console.log(first);  // ✅ 1
console.log(third);  // ✅ 3

 

• 배열 디스트럭처링 할당의 변수에 나머지 요소를 의미하는 Rest 파라미터를 사용할 수 있다.

// 나머지 요소를 새로운 배열로 받기
const [first, ...rest] = arr;

console.log(first);  // ✅ 1
console.log(rest);   // ✅ [2, 3, 4]

• 중첩된 배열의 디스트럭처링 할당 또한 가능하다.

const nestedArr = [1, [2, 3]];

const [first, [second, third]] = nestedArr;

console.log(first);  // ✅ 1
console.log(second); // ✅ 2
console.log(third);  // ✅ 3

---

2. 객체 디스트럭처링 할당

• 객체의 프로퍼티를 변수에 할당할 때 사용된다.
• 객체 디스트럭처링 할당의 대상(할당문의 우변)은 객체이어야하며, 형태는 객체여야 한다.
• 객체 디스트럭처링 할당의 할당 기준은 프로퍼티 키다. 즉, 순서는 의미 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.

const obj = { a: 1, b: 2, c: 3 };

// 객체 디스트럭처링
const { a, b } = obj;

console.log(a);  // ✅ 1
console.log(b);  // ✅ 2

• 객체 디스트럭처링 할당 시 객체의 프로퍼티 키와 다른 변수명으로 할당 받을 수도 있다.

const obj = { a: 1, b: 2 };

// 다른 이름으로 변수 설정
const { a: first, b: second } = obj;

console.log(first);  // ✅ 1
console.log(second); // ✅ 2

• 객체 디스트럭처링 할당은 객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출하여 변수에 할당하고 싶을 때 유용하다.

const obj = { a: 1, b: 2, c: 3, d: 4, e: 5 };

// 객체 디스트럭처링
const { e } = obj;

console.log(e);  // ✅ 5

• 객체 디스트럭처링 할당은 객체를 인수로 전달받은 함수의 매개변수에도 사용할 수 있다.

function printCoordinates({ x, y }) {
  console.log(`x: ${x}, y: ${y}`);
}

const point = { x: 10, y: 20 };

printCoordinates(point); // ✅ x: 10, y: 20

• 배열의 요소가 객체인 경우 배열 디스트럭처링 할당과 객체 디스트럭처링 할당을 혼용할 수 있다.

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

// todos 배열의 두 번째 요소인 객체로부터 id 프로퍼티만 추출한다.
const [, { id }] = todos;
console.log(id); // ✅ 2

• 중첩 객체 또한 객체 디스트럭처링 할당을 사용할 수 있다.

const nestedObj = { a: { b: 2 } };

const { a: { b } } = nestedObj;

console.log(b); // ✅ 2