비구조화 할당, 해체할당, 구조분해 destructuring assignment

비구조화 할당이란?

객체나 배열에서 값을 빼와서 새로운 변수에 할당하는 과정을 기존의 문법보다 좀 더 간결하고 깔끔하게 작성하는 방법.

 

[1] 배열의 해체 할당

let Arr = ['a', 'b', 'c'];
let [, second] = Arr;
console.log(second); // 'b'

- rest parameter와 섞어서 사용

const arr = [1,2,3,4,5];
const [a, ...b] = arr;
const [ , , ...c] = arr;

- 기본값 적용

const [a = 10, b = 20] = [];
// a = 10, b = 20

const [ c, d = c * 2] = [5];
// d = 10

- 값을 서로 바꿀 때

let a = 10;
let b = 20;
[b, a] = [a, b]
// a = 20, b = 10

[2] 객체의 해체 할당

const object = { a: 1, b: 2 };

const { a, b } = object;

console.log(a); // 1
console.log(b); // 2

- 기본값 적용

const object = { a: 1 };

const { a, b = 2 } = object;

console.log(a); // 1
console.log(b); // 2

- 이름 바꿀 때: 값이 아닌 새로운 변수를 지정하면 된다.

const animal = {
  name: '멍멍이',
  type: '개'
};

const { name: nickname } = animal
console.log(nickname);

- 깊은 값 비구조화 할당

const deepObject = {
  state: {
    information: {
      name: 'velopert',
      languages: ['korean', 'english', 'chinese']
    }
  },
  value: 5
};

const {
  state: {
    information: { name, languages }
  },
  value
} = deepObject;

const extracted = {
  name,
  languages,
  value
};

console.log(extracted);

 

===============

2019.12.04 수정