JavaScript에서 객체 분해란 무엇입니까?

Destructuring은 복잡한 구조를 더 간단한 부분으로 나누는 방법입니다.

여러 번 복잡한 데이터 구조의 일부를 변수에 할당하려고 합니다.

이전에는 지루한 작업이었지만 JS Object Destructuring을 사용하면 작업이 훨씬 간단해졌습니다.

예제를 통해 알아보자

구조에서 필요한 데이터에 액세스하기 위해 동일한 코드를 반복하는 것이 얼마나 나쁜지 봅시다.

const mytask = {
    procedure: 'addition',
    numbers: {
        a: 4,
        b: 5,
        c: 6
    }
};

function calculate() {
    return mytask.numbers.a + mytask.numbers.b + mytask.numbers.c;
}

옛날 방식으로 확인하자

디스트럭처링 없이, 우리는 다음과 같이 할 것입니다:

const mytask = {
    procedure: 'addition',
    numbers: {
        a: 4,
        b: 5,
        c: 6
    }
};

function calculate() {

    const a  = mytask.numbers.a;
    const b  = mytask.numbers.b;
    const c  = mytask.numbers.c;
    return a + b + c;
}

분해로 확인하자

이제 객체 분해를 통해 현대적인 방식으로 이 작업을 수행하는 방법을 살펴보겠습니다.

const mytask = {
    procedure: 'addition',
    numbers: {
        a: 4,
        b: 5,
        c: 6
    }
};

function calculate() {
    const { a , b , c }  = mytask.numbers;
    return a + b + c;
}

기본값으로 확인하자

또 다른 기능은 기본값입니다. 구조를 분해하기 전에 일부 속성이 존재하는지 확인할 필요가 없습니다. 이것을 구현하십시오.

const mytask = {
    procedure: 'addition',
    numbers: {
        a: 4,
        b: 5,
        c: 6
    }
};

function calculate() {
    const { a , b , c , d = 0 }  = mytask.numbers;
    return a + b + c + d;
}

이름을 변경하여 구현하자

구조에서와 동일한 이름을 사용하지 않으려는 경우. 그것들을 바꾸자.

const mytask = {
    procedure: 'addition',
    numbers: {
        a: 4,
        b: 5,
        c: 6
    }
};

function calculate() {
    const { one: a , two: b , three: c , four: d = 4 }  = mytask.numbers;
    return one + two + three + four;
}

Destruction으로 구현하자

우리는 파괴 내부를 파괴할 수도 있습니다. 이것은 더 복잡한 상황에서 많은 코드를 줄이는 데 유용할 수 있습니다. 확인 해보자.

const mytask = {
    procedure: 'addition',
    numbers: {
        a: 4,
        b: 5,
        c: 6
    }
};

function calculate() {
    const { procedure , numbers: { a , b , c , d = 0 } }  = mytask;

    if(procedure === 'addition')
        return a + b + c + d;

    return null;
}

Object Destructuring에 대한 경험은 어떻습니까?