36 디스트럭처링 할당

• 디스트럭처링 할당(destructuring assignment(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상 변수에 개별적으로 할당

배열 디스트럭처링 할당

• ES5 구조화된 배열을 디스트릭처링하여 1개 이상의 변수에 할당하는 방법

// ES5
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

• ES6 배열 디스트럭처링 할당의 대상은 이터러블이어야 하며, 할당 기준은 배열의 인덱스 (순서대로 할당)

// ex1)
// ES6
var arr = [1,2,3];
const [one, two, three] = arr;
console.log(one, two, three); // 1 2 3

// ex2)
// 우변을 이터러블을 할당하지 않으면 에러 발생
const [x, y]; // SyntaxError: Missing initializer in destructuring declaration
const [a, b] = {}; // TypeError: {} is not iterable

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

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

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 element ... 을 사용할 수 있음
• Rest 파라미터와 마찬가지로 반드시 마지막에 위치

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

---

객체 디스트럭처링 할당

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

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

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

// ES6
// 할당의 대상은 객체, 할당 기준은 프로퍼티 키
const { lastName, firstName } = user;
// const { lastName : user.lastName, firsName: user.firstName };
console.log(firstName, lastName); // Ungmo Lee

• 우변에 객체 또는 객체로 평가될 수 있는 표현식(문자열, 숫자, 배열 등)을 할당하지 않으면 에러 발생

const { lastName, firstName }; // SyntaxError
const { lastName, fristName } = null; // TypeError

// 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당
var user = { firstName: 'Ungmo', lastName: 'Lee' };

// 프로퍼티 키 기준으로 디스트럭처링 할당
// 프로퍼티 키가 lastName인 프로퍼티 값을 ln 할당
// 프로퍼티 키가 fristName인 프로퍼티 값을 fn 할당

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

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

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

const { fristName: 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({ 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); // 'Seoul'

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

// Rest 프로퍼티
// Rest 프로퍼티는 Rest 파라티머나 Rest 요소와 마찬가지로 반드시 마지막에 위치
const { x, ...rest } = { x: 1, y: 2, z: 3 };
console.log(x, rest); // 1 { y: 2, z: 3}

📖 참고도서 : 모던 자바스크립트 Deep Dive 자바스크립트의 기본 개념과 동작 원리 / 이웅모 저 | 위키북스