Destructuring Assignment

• 데이터 뭉치(그룹화)를 쉽게 만들수 있음

• basic syntax

onst fruits = ['🍏','🥝','🍓','🍌'];
const [first, second, ...others] = fruits; // destructuring assignment
console.log(first);
console.log(second);
console.log(others);

const point = [1,2];
const [x,y, z=0] = point; // 기본값 설정도 가능
console.log(x);
console.log(y);

• function에서 사용

function creatEmoji() {
    return ['apple', '🍎'];
}

const [title, emoji] = creatEmoji(); // 배열의 요소에 의미있는 이름 부여 가능
console.log(title);
console.log(emoji);

• object에서 사용

const ellie = { name: 'Ellie', age: 20, job: 's/w engineer' };
function display({name, age, job}) {
    console.log('이름', name);
    console.log('나이', age);
    console.log('직업', job);
}
display(ellie);

const {name, age, job:occupation, pet='강아지'} = ellie;
console.log(name);
console.log(age);
console.log(occupation); // 기존 분해한 이름을 바꿀수 있음
console.log(pet); // 새로운 변수와 값을 할당할 수 있음

• Quiz - object 안의 object를 destructuring 하는 법

const prop = {
    name: 'Button',
    styles: {
        size: 20,
        color: 'black',
    },
};

function changeColor({name, styles: {size, color}}){
    console.log(color);
    //console.log(styles); // styles는 구조분해 접근이 안됨
}
changeColor(prop);