36장. 구조분해 할당 (destructing assignment)

Happhee·2022년 1월 17일
0

JS : Depp Dive

목록 보기
31/35
post-thumbnail

destructuring assignment는 구조화된 배열과 같은 이터러블과 객체를 destructuring 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 방법

1. 배열 디스트럭처링 할당

배열 디스트럭처링 할당의 우변은 이터러블이어야 하며, 할당 기준은 배열의 인덱스이다

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

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

//순서대로 할당
const [a, , b] = arr
console.log(a, b); 				//1, 3

//기본값보다 할당값이 우선
const [c =5, d=12] = arr
console.log(c,d) 				//1, 2

//Rest요소 할당 -> 마지막 인수만 가능!!!!!!!
const [x, ...y] = arr
console.log(x, y) 				// 1, [2,3]

2. 객체 디스트럭처링 할당

객체 디스트럭처링 할당의 우변은 객체이어야 하며, 할당 기준은 프로퍼티 키이다

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

// ES6 객체 디스트럭처링 할당
// 변수 lastName, firstName을 선언하고 user 객체를 디스트럭처링하여 할당한다.
// 이때 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다. 순서는 의미가 없다.
const { lastName, firstName } = user;

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


만약 객체의 프로퍼티 키와 ```다른 변수의 이름```으로 프로퍼티 값을 할당받으려면,
```js
const user = { firstName: 'Ungmo', lastName: 'Lee' };

// 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다.
// 프로퍼티 키가 lastName인 프로퍼티 값을 ln에 할당하고,
// 프로퍼티 키가 firstName인 프로퍼티 값을 fn에 할당한다.
const { lastName: ln, firstName: fn } = user;

console.log(fn, ln); // Ungmo Lee

이외에도 중첩객체를 사용하여 이름 디스트럭처링 할당이 가능하다

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

// address 프로퍼티 키로 객체를 추출하고 이 객체의 city 프로퍼티 키로 값을 추출한다.
const { address: { city } } = user;
console.log(city); // 'Seoul'
profile
즐기면서 정확하게 나아가는 웹프론트엔드 개발자 https://happhee-dev.tistory.com/ 로 이전하였습니다

0개의 댓글