디스트럭처링은 객체나 배열에서 값을 쉽게 가지고 오는 방법입니다. 디스트럭처링이 없을 때는 객체나 배열에서 값을 가지고 올 때 다소 코드가 길었지만, 아래 예들 처럼 디스트럭처링을 사용한다면, 코드가 상당히 간결해 질 것 입니다.

객체

기존에는 아래와 같이 사용해 값들을 가지고 왔습니다.

<script>

    const hotel = {
        door:3,
        light:6
    };

    const door = hotel.door;
    const light = hotel.light;

    console.log(door, light);

</script>

하지만 아래와 같이 디스트럭처링을 하면 길이가 상당히 짧아 집니다. 아래 처럼 변수를 또 나눌 일은 없지만, 함수에서 결과로 객체를 받을 경우에 사용한다면 상당히 효과적입니다.

<script type="module">

    const hotel = {
        door:3,
        light:6
    };

    const {door, light} = hotel;
    console.log(door, light);

</script>

배열

기존의 방법

<script type="module">

    const soldier = ['jake', 'jun', 'jane', 'Paul'];

    const soldier_0 = soldier[0];
    const soldier_2 = soldier[2];
    console.log(soldier_0, soldier_2);

</script>

디스트럭쳐

<script type="module">

    const soldier = ['jake', 'jun', 'jane', 'Paul'];
    const [soldier_0, , soldier_2,] = soldier;
    console.log(soldier_0, soldier_2);

</script>

중첩된 디스트럭쳐

객체 속에 배열이 있는 경우 아래와 같은 방법으로 가지고 올 수 있습니다.

<script type="module">

    const jade = {
        mountain:["한라산","백두산"],
        river:["한강","낙동강"]
    };
    const {mountain:[choice_m],river:[,river_nak]} = jade;
    console.log(choice_m, river_nak);

</script>

디스트럭처와 스프래드는 궁합이 좋으므로, 같이 사용하면 매우 간결한 코딩이 가능합니다.