[JS] 디스트럭처링 할당

디스트럭처링 할당(구조 분해 할당)

• 이터러블 or 객체를 1개 이상의 변수에 개별적으로 할당하는 것
• 이터러블 or 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용

배열 디스트럭처링 할당

• 할당 대상: 이터러블
• 할당 기준: 배열의 인덱스

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

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

// 변수에 기본값 설정 가능
// 기본값보다 할당된 값이 우선시 됨
const [one = -1, two, three, four = 4] = arr;
console.log(one, two, three, four);	// 1 2 3 4

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

객체 디스트럭처링 할당

• 할당 대상: 객체
• 할당 기준: 프로퍼티 키
  -> 변수 이름과 프로퍼티 키가 일치하면 할당 됨
  

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

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

// 프로퍼티 키와 다른 변수 이름 설정 가능
const { lastName: ln, firstName: fn } = user;
console.log(fn, ln);	// Mina Lee

// 변수에 기본값 설정 가능
const { lastName: ln, firstName: fn = 'Kim' } = user;
console.log(fn, ln);	// Mina Lee

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