구조 분해 할당

구조 분해 할당

구조 분해 할당(Destructuring Assignment) 구문은 구조화된 배열이나 객체의 속성을 분해하여 그 값을 개별 변수에 담을 수 있게 하는 표현식이다. React, Hook, API 사용 시에 숨 쉬듯이 쓰는 문법이라고 한다😮‍💨

1. 배열 구조 분해 할당

const arr = ["one", "two", "three"];

const [red, yellow, green] = arr;
const [, , pink] = arr;
const [, blue] = arr;
console.log(red, yellow, green, pink, green);
// "one" "two" "three" "three" "two"

let a = "green"
let b = "yellow"
[b, a] = [a, b];

a; // "yellow"
b; // "green"

2. 객체 구조 분해 할당

배열의 구조 분해 할등은 요소들의 index를 기억해야만 했지만, 객체는 이와 달리 객체 프로퍼티의 키 이름을 잘 알아두면 구조 분해 할당이 가능하다!

const obj = {
    name : '우뎌디',
	age: 23,
  	hobby: "longboarding"
};

const { name, age, hobby } = obj;

console.log(name, age, hobby); 
// 우뎌디 23 longboarding

다만, 키 이름이 오타가 나는 경우 객체 안에 없는 프로퍼티를 부르게 되기 때문에 undefined가 반환되니 이를 조심하자!

하지만 키 이름을 다른 변수로 할당하여 값을 불러오는 것은 가능!!
이때는 받을 키 값의 오른쪽에 콜론을 붙여 원하는 변수의 이름을 적어주면 구조 분해 할당이 가능하다.

const obj = {
    name : '우뎌디',
	age: 23,
  	hobby: "longboarding"
};

const { name: one, age: tow } = obj;

console.log(one, two); 
// 우뎌디 23

3. 객체, 배열 혼합 상태에서의 구조 분해 할당

구조 분해 할당은 타입 및 깊이에 상관없이 분해가 가능

const complexObject = {
  props: [
          { id: 1, name: 'kim',  height: 182 },
          { id: 2, name: 'song', height: 145 },
          { id: 3, name: 'jeong',  height: 178 }
         ],
  desc: {
    scoreTable: [ 182, 145, 178 ]
  }
};

const {
  props: [ { name },
           { height },
           { name: card } ]
} = complexObject;

console.log(name, score, card); // kim 145 jeong

---

refernce https://blog.naver.com/enne123/222942125161