자바스크립트의 디스트럭처링

Destructuring 할당은 최신 JavaScript에서 가장 유연하고 간단한 기능 중 하나입니다. 배열의 값, 개체의 속성 또는 함수 매개 변수를 개별 변수로 압축해제할 수 있게 해주는 JavaScript 표현식입니다.

객체 파괴

우리는 종종 코드베이스의 여러 위치에서 동일한 변수를 참조하며 동일한 변수를 반복해서 선언하지 않는 것을 선호합니다. 예를 들어 서버에 요청을 하려면 헤더 요청에 인증(토큰)이 필요할 수 있습니다. 예를 들어 session 및 token 키를 보유하는 refresh_token 개체가 있다고 가정합니다.

ES5:

const token = session.token;
const refreshToken = session.refresh_token;

ES6:

const {
  token,         // ↓ alias ↓
  refresh_token: refreshToken
} = session;

위의 ES6 스니펫에서 구문이 더 명확해집니다. 단일let 명령문으로 여러 개의 쉼표로 구분된 변수를 선언할 수 있는 것처럼 구조 분해 식의 중괄호 안에 여러 변수를 선언할 수도 있습니다. 또한 속성 이름을 다른 이름으로 바꾸고 싶은 경우도 있습니다. 이 경우 : amAlias 를 사용합니다. 위에서 우리는 속성 이름을 snake-case에서 camelCase로 변경하기 위해 별칭을 사용했습니다.

기능 매개변수

함수 매개변수에서 구조 분해를 사용하여 함수 매개변수로 전달된 객체에서 필드를 압축 해제할 수 있습니다. 매개변수의 특정 속성만 고려하는 함수를 구현하려는 경우 미리 구조를 분해하여 해당 속성을 명시적으로 참조하는 것이 좋습니다. 모든 것을 미리 분해하여 입력이 함수의 계약을 준수하지 않을 때 쉽게 발견할 수 있습니다.

const getFullName = ({ user }) => 
  user && `${user.firstName} ${user.lastName}`;

const state = {
    user: {
        firstName: 'Mahmoud',
        lastName: 'Elmahdi'   
    }
};

getFullName(state); // Mahmoud Elmahdi

함수에서 반환된 값 구문 분석

객체나 배열을 반환하는 함수가 있을 때마다 구조 분해를 통해 반환된 값을 사용하여 보다 간결하게 상호 작용할 수 있습니다. 다음 예는 사용자 데이터가 포함된 개체를 반환하는 getUser 함수를 보여줍니다. 여기서 관심 있는 항목만 가져오고 isAdmin 나머지는 무시합니다.

const getUser = () => ({
    id: 156,
    isAdmin: true,
    fullName: 'Mahmoud Elmahdi',
    email: '[email protected]',
    languages: ['Arabic', 'English', 'Russian']
});

const { isAdmin } = getUser();
isAdmin && retrieveSensitiveData();

배열 구조 분해

Destructuring 배열은 중괄호 대신 대괄호를 사용합니다. 코드에 x = arr[0] 와 같은 구현 세부 정보를 사용하는 대신, 구조 분해를 사용하면 명시적으로 인덱스를 참조하지 않고 대신 값의 이름을 지정하여 의미를 명확하게 전달할 수 있습니다.



배열을 분해할 때 참조할 필요가 없는 속성을 건너뛸 수도 있습니다.

유용한 팁

속성에 대한 스프레드 연산자를 사용하여 개체 리터럴 내에 조건부로 속성을 추가합니다.



요소가 true(null/undefined가 아니거나 비어 있는 경우에만 배열 리터럴 내부에 요소 추가)