구조 분해 할당. Destructuring

객체나 배열의 값으로 변수를 할당하거나 필요한 값을 추출하고 싶을때 사용.

 

•  : 으로 키 값을 변수에 할당하고 있다.
• 나머지 값에 대한 변수를 지정하면 나머지값을 가진 배열이나 객체를 할당한다.
• 존재하지 않는 인덱스나 키에 대한 값을 할당할 수 있다.

const song = {"author":'비', "date":'2020-05-31',"title":'깡',"body":'화려한 조명이 나를 감싸네에'};

const {author, date , title ,body} = song;

console.log(author, date, title, body);

// 다른 변수에 할당

const {author:author1, date:date1 , title:title1 ,body:body1} = song;

console.log(author1, date1, title1, body1);
//배열 할당

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

const [one, two, three, four, five, six=6, ...others] = arr;

console.log(one,two, three, four, five, six, others);

---

사용 방법의 핵심은 Json 데이터 추출이나 거대한 객체의 값 추출이다.

• 할당 과정에서 할당된 객체에 진입하려면 : {키} 을 사용하여 진입한다.
• 할당된 객체에 진입 후 키와 다른 이름으로 변수를 할당하라면 : {키:이름} 으로 접근한다.

가만보면 : (콜론) 으로 접근하는 것으로 보인다. 복잡한 객체 구조도 : 으로 계속 진입할 수 있다.

 

콜론으로 원하는 객체까지 진입 > { 키 : 이름 } 으로 할당.

//디스트럭쳐링의 핵심 사용은 json 데이터 추출에 있다.
var kakaoResponse = {
 "tid": "T1234567890123456789",
 "cid": "TC0ONETIME",
 "status": "SUCCESS_PAYMENT",
 "partner_order_id": "partner_order_id",
 "partner_user_id": "partner_user_id",
 "payment_method_type": "MONEY",
 "item_name": "초코파이",
 "quantity": 1,
 "amount": {
  "total": 2200,
  "tax_free": 0,
  "vat": 200,
  "point": 0,
  "discount": 0
 },
 "canceled_amount": {
  "total": 0,
  "tax_free": 0,
  "vat": 0,
  "point": 0,
  "discount": 0
 },
 "cancel_available_amount": {
  "total": 2200,
  "tax_free": 0,
  "vat": 200,
  "point": 0,
  "discount": 0
 },
 "created_at": "2016-11-15T21:18:22",
 "approved_at": "2016-11-15T21:20:48",
 "payment_action_details": [
   {
    "aid": "A5678901234567890123",
    "payment_action_type": "PAYMENT",
    "payment_method_type": "MONEY",
    "amount": 2200,
    "point_amount": 0,
    "discount_amount": 0,
    "approved_at": "2016-11-15T21:20:48"
   }
  ]
}
// 추출하려고 하는것은 구매품목(item_name) 가격(amount.total), 구매날짜(approved_at)
const {item_name:itemName, amount:{total:totalPrice}, approved_at:approvedAt} = kakaoResponse;

console.log(itemName, totalPrice, approvedAt);