JS (36) - 디스트럭처링 할당

디스트럭처링 할당
구조화된 배열과 같은 이터러블 또는 객체를 destructuring하여 1개 이상의 변수에 개별적으로 할당하는 것

36.1 배열 디스트럭처링 할당

• 배열 디스트럭처링 할당 대상(우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스
  • 우변에 이터러블을 할당하지 않으면 에러 발생

var arr = [1, 2, 3];

var one = arr[0];
var two = arr[1];
var three = arr[2];

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

const arr = [1, 2, 3];
const [one, two, three] = arr;

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

• 배열 디스트럭처링 할당의 기준은 배열의 인덱스 (순서대로 할당됨)
  • 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다

const [a, b] = [1, 2];
console.log(a, b);	// 1 2

const [c, d] = [1];
console.log(c, d);	// 1 undefined

const [e, f] = [1, 2, 3];
console.log(e, f);	// 1 2

const [g, , h] = [1, 2, 3];
console.log(g, h);	// 1 3

• 배열 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있음

const [a, b, c = 3] = [1, 2];
console.log(a, b, c);	// 1 2 3

const [e, f = 10, g = 3] = [1, 2];
console.log(e, f, g);	// 1 2 3

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

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

-> 배열 디스트럭처링 할당은 배열과 같은 이터러블에서 필요한 요소만 추출하여 변수에 할당하고 싶을 때 유용

---

36.2 객체 디스트럭처링 할당

• 객체의 각 프로퍼티를 객체로부터 디스트럭처링하여 변수에 할당하기 위해서는 프로퍼티 키를 사용해야 함

var user = { firstName: 'Ungmo', lastName: 'Lee' };

var firstName = user.firstName;
var lastName = user.lastName;

console.log(firstName, lastName);	// Ungmo Lee

• 객체 디스트럭처링 할당 대상(우변)은 객체이어야 하며, 할당 기준은 프로퍼티 키
  • 순서는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당됨
  • 우변에 객체 또는 객체로 평가될 수 있는 표현식을 할당하지 않으면 에러 발생

const user = { firstName: 'Ungmo', lastName: 'Lee' };
const { lastName, firstName } = user;

console.log(firstName, lastName);	// Ungmo Lee

• 할당자 왼쪽에 프로퍼티 값을 할당받을 변수를 선언 (객체 리터럴 형태)

const { firstName, lastName } = { firstName: 'Ungmo', lastName: 'Lee' }

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

const user = { firstName: 'Ungmo', lastName: 'Lee' };

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

• 객체 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있음

const { firstName = 'Ungmo', lastName } = { lastName: 'Lee' };
console.log(firstName, lastName);	// Ungmo Lee

const { firstName: fn = 'Ungmo', lastName: ln } = { lastName: 'Lee' };
console.log(fn, ln);	// Ungmo Lee

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

const str = 'Hello';

const { length } = str;
console.log(length);	// 5

const todo = { id: 1, content: 'HTML', completed: true };
const { id } = todo;
console.log(id);		// 1

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

function printTodo(todo) {
  console.log(`할일 ${todo.content}은 ${todo.completed ? '완료': '비완료'} 상태입니다.`);
}

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

▾ 간단하고 가독성 좋은 표현

function printTodo(content, completed) {
  console.log(`할일 ${content}은 ${completed ? '완료': '비완료'} 상태입니다.`);
}

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

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

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

const [, { id }] = todos;
console.log(id);	// 2

• 중첩 객체의 경우

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

const [ address: { city }] = user;
console.log(city);	// 2

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

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