Destructuring이란?

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

어떻게 사용할 것인가?

The destructuring assignment uses on the left-hand side of the assignment to define what values to unpack from the sourced variable.

Object Destructuring

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

    const { notification: {follow},
            color,} = settings;

    console.log(follow) // true
    console.log(color) // {theme: 'dark'}

Array Destructuring

    const days = ["Mon", "Tue", "Wed"];

    const [mon, tue, wed, thu="Thu"] = days;
    console.log(mon, tue, wed, thu) // Mon Tue Wed Thu

Renaming

• chosen_color의 변수명을 chosenColor로 바꾸고 chosen_color값이 존재하지 않을 경우 light을 출력한다.

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

    const{
        color: {chosen_color: chosenColor = "light"},
    } = settings;
    console.log(chosenColor); // dark

Function destructuring

    function saveSettings(settings) {
        console.log(settings); // {followAlert: true, mrkAlert: true}
    }

    saveSettings({
        followAlert: true,
        mrkAlert: true,
    })

• 변수 color의 값을 default 값으로 설정 함으로 써 함수 호줄 시 발생할 수 있는 오류를 해결할 수 있다.

    function saveSettings({Alert, popup, color = false}) {
        console.log(color); // false
    }

    saveSettings({
        Alert: true,
        popup: true,
    }); 

Swapping and Skipping

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

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

    console.log(mon, sat); // Mon Sat

	// Skipping
    const days = ["mon", "tue", "wed", "thu", "fri"];
    const [, , , thu, fri] = days;

    console.log(thu, fri); // thu fri

출처
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment