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

Hyodduru ·2022년 10월 23일
0
post-thumbnail

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

배열 디스트럭처링 할당

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

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

변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다.

const [c, d] = [1];
console.log(c, d); // 1 undefined 

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 

배열 디스트럭처링 할당은 배열과 같은 이터러블에서 필요한 요소만 추출하여 변수에 할당하고 싶을 때 유용하다.

배열 디스트럭처링 할당을 위한 변수에 Rest 파라미터와 유사하게 Rest 요소(Rest element) ...을 사용할 수 있음. Rest 요소는 Rest 파라미터와 마찬가지로 반드시 마지막에 위치해야한다.

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

객체 디스트럭처링 할당

ES5에서 객체의 각 프로퍼티를 객체로부터 디스트럭처링하여 변수에 할당하기 위해서는 프로퍼티 키를 사용해야 함.

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

var firstName = user.firstName;

ES6의 객체 디스트럭처링 할당 기준은 프로퍼티 키다. 객체 디스트럭처링 할다의 대상(할당문의 우변)은 객체이어야 함.

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

// ES6 객체 디스트럭처링 할당 
const { firstName, lastName } = user;
const { lastName, firstName } = { firstName : 'Ungmo', lastName : 'Lee' };
                                  

객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받으려면 다음과 같이 변수를 선언한다.

const { lastName : ln, firstName : fn } = user;

기본값 설정도 가능.

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

객체에서 프로퍼티 키로 필요한 키로 필요한 프로퍼티 값만 추출하여 변수에 할당하고 싶을 때 유용하다.

const str = 'Hello';
const { length } = str;
console.log(length); //5 

배열의 요소가 객체인 경우 배열 디스트럭처링 할당과 객체 디스트럭처링 할당을 혼용할 수 있다.

const todos = [
  { id : 1, content : 'HTML', completed : true },
  { id : 2, content : 'CSS', 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'

객체 디스트럭처링 할당을 위한 변수에 Rest 파라미터나 Rest 요소와 유사하게 Rest 프로퍼티 ...을 사용할 수 있다. 반드시 마지막에 위치해야 함!

// Rest 프로퍼티 
const { x, ...rest} = { x : 1, y : 2, z : 3 };
console.log(x, rest); // 1 { y : 2, z : 3 } 
profile
꾸준히 성장하기🦋 https://hyodduru.tistory.com/ 로 블로그 옮겼습니다

0개의 댓글