구조분해(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);