JS) 구조 분해 할당(Destructuring Assignment)이란?

구조 분해 할당은 객체나 배열을 해체하여 각각의 인자들을 한꺼번에 다른 변수의 값으로 설정해주는 문법이다.

 

 

한 배열의 인자들을 각기 다른 변수에 할당하고 싶을 때

구조 분해 할당을 이용하지 않을 시,

const arr = [1,2,3,4,5]
const arg1 = arr[0]
const arg2 = arr[1]
const arg3 = arr[2]
const arg4 = arr[3]
const arg5 = arr[4]

arr에 있는 값들을 하나하나 원하는 변수에 지정해줘야 한다...

 

 

그러나 구조 분해 할당을 이용한다면,

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

매우 간편하게 a,b,c,d,e라는 변수에 arr의 인자들을 할당할 수 있다!

 

 

이뿐만이 아니라,

arr = [1, 2, 3, 4, 5];

const [m, n] = arr;
//m = 1; n = 2;

const [w, , e] = arr;
// w = 1; e = 3;

원하는 변수의 위치만큼 지정하거나, 

 

 

arr = [1, 2, 3, 4, 5];
const [x, y, ...rest] = arr;

나머지 부분을 하나의 배열 묶음으로 할당할수도 있다!

 

 

 

 

배열 말고도 객체도 구조분해 할당이 가능하다.

const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 5,
};


const { a, c } = obj;
console.log(a, c);
//1, 3

중괄호에 해당 key를 입력하면 이를 다른 곳에서 독립된 변수로 사용 가능해진다.

 

 

 

const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 5,
};

const { b = 11, bumang = 10, z } = obj;
console.log(b, bumang, z);
// 2, 10, undefined

구조 분해 할당 시 기본값을 등호로 표기할 수 있다. (ex. "b = 11")

이 경우 원본 객체 안에 값이 없을 시 대안으로써 기본값이 할당된다. (ex. bumang = 10)

기본값도 없고, 원본 배열에도 없을 시 undefined가 할당된다.