[딥다이브] 36장 디스트럭처링 할당

36장 디스트럭처링 할당

---

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

 

배열 디스트럭처링 할당

ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다. 이때 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스이다. 즉 순서대로 할당된다.

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 [i,j=4,k=3] = [1,2]
console.log(i,j,k); // 1 2 3

const [l,...m] = [1,2,3,4,5,6]
console.log(l,m); // 1 [2,3,4,5,6]

 

객체 디스트럭처링 할당

ES6의 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당한다. 이때 객체 디스트럭처링 할당의 대상(할당문의 우변)은 객체이어야 하며, 할당 기준은 프로퍼티 키다. 즉, 순서는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.

const obj = {b:2,a:3};
const {a,b} = obj
console.log(a,b) // 3 2

// 기본 값 설정
const {firstName = 'HWANG', lastName:ln} = {lastName:'LEE'}
console.log(firstName,ln) // HWANG LEE

// 원하는 정보만 가져올 때
const {age} = {name:'Hwnag', age:20}
console.log(age) // 20

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

 

---

문제

 

빈칸을 알맞게 채워 원하는 출력값이 나오게 해주세요.

const {         문제 1          } = {lastName:'졸려'}
console.log(firstName,ln) // 히히 졸려

const { 문제2 } = {name:'Hwnag', age:20}
console.log(age) // 20

const {  문제3  } = {x:1,y:2,z:3}
console.log(x,all) // 1 {y:2, z:3}

---

답

 

1. firstName = '히히', lastName:ln      ||        기본값 설정

2. age

3. x, ...all         ||         Rest 프로퍼티 사용

// 기본 값 설정
const {firstName = '히히', lastName:ln} = {lastName:'졸려'}
console.log(firstName,ln)

// 원하는 정보만 가져올 때
const {age} = {name:'Hwnag', age:20}
console.log(age)

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