[JS] 디스트럭처링 할당

📌 디스트럭처링 할당

• 디스트럭처링 할당(Destructuring Assignment, 구조 분해 할당): 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것
• 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용함

 

📌 배열 디스트럭처링 할당

• ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당함
• 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스임
  (우변에 이터러블을 할당하지 않으면 에러가 발생함)
• 배열 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 값을 할당받을 변수를 선언해야 하며, 변수는 배열 리터럴 형태로 선언함
• 베열 디스트럭처링 할당의 기준은 배열의 인덱스(즉, 순서대로 할당)며, 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없음
• 베열 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있음
• 베열 디스트럭처링 할당은 배열과 같은 이터러블에서 필요한 요소만 추출하여 변수에 할당하고 싶을 때 유용함

const arr = [1, 2, 3];

// 배열 디스트럭처링 할당
const [one, two, three] = arr;
console.log(one, two, three); // 1 2 3

// 할당 기준은 배열의 인덱스
const [a, b] = [1, 2, 3];
console.log(a, b); // 1 2

// 변수에 기본값 설정
const [x, y = 2, z = 30] = [10, 20];
console.log(x, y, z); // 10 20 30

// 이터러블에서 필요한 요소만 추출
const [, name, age] = [7830, 'Kim', 42, '010-1234-5678'];
console.log(name, age); // Kim 42

 

• 베열 디스트럭처링 할당을 위한 변수에 Rest 파라미터와 유사하게 Rest 요소 ... 을 사용할 수 있음
• Rest 요소는 Rest 파라미터와 마찬가지로 반드시 마지막에 위치해야 함

// Rest 요소
const [x, ...y] = [1, 2, 3, 4];
console.log(x, y); // 1 [2, 3, 4]

 

📌 객체 디스트럭처링 할당

• ES6의 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당함
• 객체 디스트럭처링 할당의 대상(할당문의 우변)은 객체여야 하며, 할당 기준은 프로퍼티임
• 변수의 순서는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 됨
• 객체 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 프로퍼티 값을 할당받을 변수를 선언해야 하며, 변수는 객체 리터럴 형태로 선언함
• 우변에 객체 또는 객체로 평가될 수 있는 표현식(문자열, 숫자, 배열 등)을 할당하지 않으면 에러가 발생함

const user = { firstName: 'Gildong', lastName: 'Hong' };

// 객체 디스트럭처링 할당
const { lastName, firstName } = user;
console.log(firstName, lastName); // Gildong Hong

 

• 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받으려면 아래와 같이 변수를 선언함

const user = { firstName: 'Gildong', lastName: 'Hong' };

const { lastName: ln, firstName: fn } = user;
console.log(fn, ln); // Gildong Hong

 

• 객체 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있음
• 객체 디스트럭처링 할당은 객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출하여 변수에 할당하고 싶을 때 유용함
• 객체 디스트럭처링 할당은 객체를 인수로 전달받는 함수의 매개변수에도 사용할 수 있음
• 배열의 요소가 객체인 경우 배열 디스트럭처링 할당과 객체 디스트럭처링 할당을 혼용할 수 있음

// 변수에 기본값 설정
const user = { firstName: 'Gildong', lastName: 'Hong' };

const { firstName = 'Kim', middleName = 'Park', lastName } = user;
console.log(firstName, middleName, lastName); // Gildong Hong

// 객체에서 필요한 요소만 추출
const todo = { id: 5, content: 'Coding', completed: true };

const { content } = todo;
console.log(content); // Coding

// 객체를 인수로 전달받는 함수의 매개변수에 사용
function printTodo({ content, completed }) {
  console.log(`할일 ${content}은 ${completed ? '완료' : '비완료'} 상태입니다.`);
}

printTodo({ id: 5, content: 'Coding', completed: true }); // 할일 Coding은 완료 상태입니다.

// 배열과 객체 디스트럭처링 할당 혼용
const todos = [
  { id: 1, content: 'HTML', completed: false },
  { id: 2, content: 'CSS', completed: true },
  { id: 3, content: 'JS', completed: true }
];

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

 

• 객체 디스트럭처링 할당을 위한 변수에 Rest 파라미터나 Rest 요소와 유사하게 Rest 프로퍼티 ... 을 사용할 수 있음
• Rest 프로퍼티는 Rest 파라미터나 Rest 요소와 마찬가지로 반드시 마지막에 위치해야 함

// Rest 프로퍼티
const { x, ...rest } = { x: 1, y: 2, z: 3 };
console.log(x, rest); // 1 {y: 2, z: 3}

 

 

 

참고문헌 및 출처 : 모던 자바스크립트 Deep Dive (이웅모)