5. 비구조화

비구조화란 복잡한 구조의 객체를 단순화 하여 접근하도록 만들어 주는 것이다.

5.1 객체 비구조화

=> 기존에 객체 내부에 접근하던 방법

const settings = {
    notifications:{
        follow : true,
        alerts : true,
        unfollow : false
    },
    color : {
        theme : "dark"
    }
}

if(settings.notifications.follow){
//이렇게 최상위부터 자삭 프로퍼티까지 도달하였다.    
}

아래처럼 복잡한 객체 구조에서 간단하게 const 변수를 생성할 수 있도록 해준다.

const {
    notifications : {follow = false},
    color
} = settings;

console.log(follow);
//true 가 리턴됨

아래와 같이 inline statement로 쓰면서 default value 도 적용할 수 있다.

const settings = {
    color : {
        theme : "dark"
    }
}

const {notifications : {follow = false} = {}} = settings;
//매우 코드가 간결해진다.
console.log(follow);

5.2 배열 비구조화

배열의 데이터를 비구조화 한다. 데이터를 가공하지 않고 배열 데이터를 활용할 때 유용하다.
예) Api 로부터 수신한 데이터

=> 기존에 배열에서 데이터를 조회하는 방법
변수화 하기 위해 배열에 직접 접근해야 했다.

const days = ["월","화","수","목","금","토", "일"];

const mon = days[0];
const tue = days[1];
const wed = days[2];
...

console.log(mon, tue, wed);

아래와 같이 [ ] 를 이용하여 바로 변수에 매핑할 수 있다.

const days = ["월","화","수","목","금","토", "일"];

const [mon, tue, wed] = days;

console.log(mon, tue, wed);
//월 화 수 가 출력된다.

const days = ["월","화","수"];

const [mon, tue, wed, thu = "목"] = days;
//여기서도 default value 적용이 가능하다.

console.log(mon, tue, wed, thu);

5.3 Renaming

객체내 항목을 비구조화 할 때 이름을 바꿔 사용하는 방법이다.
=> 기존 방법

const chosenColor  = settings.color.choosen_color || "light";

비구조화는 유지하면서 이름을 chosenColor 로 변경해 주었다.
: 를 사용하여 사용하고자 하는 이름을 재정의 하였다.

const settings = {
    color : {
        chosen_color : "dark"
    }
};

const {
    color : { chosen_color : chosenColor = "light" }
} = settings;

console.log(chosenColor);

아래와 같이 기존 변수에 매핑하는 것도 가능하다.
비구조화 시에 const 를 선언하지 않고 ( )로 묶어주면 기존의 변수를 사용한다.

let chosenColor = "blue";

({
    color : { chosen_color : chosenColor = "light" }
} = settings);

console.log(chosenColor);

5.4 Function 비구조화

function 에서의 비구조화에 대해 알아본다.
=> 기존방법

function saveSettings(settings){
    if(settings.mkt === false){
    
    }
    saveColor(settings.color);
}

saveSettings({
    follow : true,
    alert : true,
    mkt : true, 
    color : "green"
});

아래와 같이 function 파라미터 부분에 객체 비구조화를 사용하여 간단하게 정의할 수 있다.

function saveSettings({notification, color : {theme}}){
    console.log(theme);
}

saveSettings({
    notification : {
        follow : true,
        alert : true,
        mkt : true
    },
    color : {
       theme : "green"
    }
});

5.5 value 단축

변수명과 객체의 key값이 같을 때 값을 할당시에 축약이 가능하다.

const follow = checkFollow();
const alert = checkAlert();

const settings = {
    notification : {
        follow : follow,
        alert : alert
    }
};
//notification 의 follow 를 선언하면서 follow 라는 const 변수값을 할당하였다.

const follow = checkFollow();
const alert = checkAlert();

const settings = {
    notification : {
        follow,
        alert
    }
};
//변수명과 key명이 동일할 경우 위와 같이 단축하여 사용 할 수 있다.

5.6 Swapping and Skipping

• 잘못된 데이터를 swipping 하기
  배열 비구조화를 이용해 값 변경이 가능하다.

let mon = "Sat";
let sat = "Mon";

[sat, mon] = [mon, sat];

console.log(mon, sat);