구조분해(Destructing)
디스트럭칭
배열과 객체에 적용하는 방법이 다름
1. 배열
2. 객체
=======================
배열보깅
// 배열의 일반적인 할당 방법
const rank = ["연아", "연아2", "연아3",]
const macbook = rank[0]
const macbook1 = rank[1]
const macbook2 = rank[2]
console.log(macbook);
console.log(macbook1);
console.log(macbook2);
// 구조 분해 할당 방법
const rank = ["연아", "연아2", "연아3"]
const [macbook, macbook1, macbook2] = rank;
console.log(macbook);
console.log(macbook1);
console.log(macbook2);
const rank = ["연아", "연아2", "연아3", "연아4", "연아5"]
const [macbook, macbook1, macbook2, ...res] = rank;
console.log(macbook);
console.log(macbook1);
console.log(macbook2);
console.log(res); // ["연아4", "연아5"]
========================================
const rank = ["연아", "연아2"]
const [macbook, macbook1, macbook2] = rank;
console.log(macbook);
console.log(macbook1);
console.log(macbook2); // undefined
// 두 개의 값을 바꿔보깅
1. 일반적인 방법
let macbook = "연아1";
let ipad = "연아2";
console.log("맥북당첨자", macbook); // 연아1
console.log("아이패드 당첨자", ipad); // 연아2
// 맥북과 아이패드를 교환해보자
let temp = macbook;
macbook = ipad;
ipad = temp;
console.log("맥북당첨자", macbook); // 연아2
console.log("아이패드 당첨자", ipad); // 연아1
2. 디스트럭칭
let macbook = "연아1";
let ipad = "연아2";
console.log("맥북당첨자", macbook); // 연아1
console.log("아이패드 당첨자", ipad); // 연아2
[macbook, ipad] = [ipad, macbook];
console.log("맥북당첨자", macbook); // 연아2
console.log("아이패드 당첨자", ipad); // 연아1
===============================================
2. 객체
// 일반 사용법
const macbook = {
title: '맥북프로 14',
price: 3000000,
owner: '조연아',
};
const title = macbook.title;
const price = macbook.price;
console.log(title); // 맥북프로 14
console.log(price); // 3000000
// 디스트럭팅 사용
const macbook = {
title: '맥북프로 14',
price: 3000000,
owner: '조연아',
};
const {title, price} = macbook;
console.log(title); // 맥북프로 14
console.log(price); // 3000000
===============
const {title, color} = macbook;
console.log(title); // 맥북프로 14
console.log(color); // undefined
=====================
const {title, color = 'silver'} = macbook;
console.log(title); // 맥북프로 14
console.log(color); // siliver
===============
const macbook = {
title: '맥북프로 14',
price: 3000000,
owner: '조연아',
memory: '16GB',
storage: '1TB SSD 저장장치'
};
const {title, ...res} = macbook;
console.log(title); // 맥북프로 14
console.log(res); // {price: 3000000, owner: '조연아', memory: '16GB', storage: '1TB SSD 저장장치'}
// 객체 프러퍼티 이름 바꾸기
// 기존의 프러퍼티 값이었던 title를 쓰면은 오류남
const {title:product, ...res} = macbook;
console.log(product); // 맥북프로 14
==============================
const macbook = {
title: '맥북프로 14',
price: 3000000,
owner: '조연아',
memory: '16GB',
storage: '1TB SSD 저장장치' ,
'serial-num' : "ABCDEFG",
};
// 프러퍼티 네임을 꼭 사용해야 하는 경우?!
// - serial-num 처럼 중간에 하이픈이 있는 경우
const {title : product, 'serial-num': serialNum } = macbook;
=====================
const macbook = {
title: '맥북프로 14',
price: 3000000,
owner: '조연아',
memory: '16GB',
storage: '1TB SSD 저장장치' ,
'serial-num' : "ABCDEFG",
};
// 또 다른 이름 바꾸기 방법
const propertyName = 'title';
const { [propertyName]: product} = macbook;
console.log(product);