모던 자바스크립트 Deep Dive 36장-디스트럭처링 할당

구조 분해 할당
구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당
필요한 값만 추출하여 변수에 할당할 때 유용

배열 디스트럭처링 할당

배열은 인덱스 기준으로 순서대로 할당됨
변수를 배열 리터럴 형태로 선언해야함

const arr = [1,2,3,4,5];
const [a,b] = arr; // 배열 리터럴 마냥 변수를 선언
const [x,y,z,w,q] = arr; 
const [,,,,k] = arr;
console.log(a,b); // 1 2
console.log(x,y,z,w,q); // 1 2 3 4 5
console.log(k); // 5

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

객체 디스트럭처링 할당

변수를 객체 리터럴 형태로 선언
배열은 인덱스가 할당기준인데 객체는 프로퍼티 키가 기준
조금 이상함

const user = {firstName: 'peter', lastName:'parker'};

const {firstName,lastName} = user; // 프로퍼티 축약 표햔
const {firstName:firstName, lastName:lastName} = user; // 위에랑 동치

const {firstName:이름,lastName:성} = user; // 키,벨류 위치가 바뀐거 같은데 이게 맞음
// user객체의 firstName 프로퍼티를 이름 변수에 할당

이름; // peter
성; // parker

함수에서 객체를 인수로 받을 때 필요한 것만 골라서 쓰는 식으로 매개변수 선언 가능

const user = {name:'Sam', age:20, height:175};

function hi(person){
	console.log(`hi ${person.name}`);
}

function bye({name}){
	console.log(`bye ${name}`);
}


hi(user); // hi Sam
bye(user); // bye Sam

이웅모, 『모던 자바스크립트 Deep Dive』, 위키북스(2021)