자바스크립트 구조분해할당(Destructuring) 개념과 팁

 

MDN Web Docs

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
정의: 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

 

기본적인 Destructuring의 사용법은 위 MDN 링크에서 참고하세요.
이 글을 쓴 목적은 실무에서 코드 개선 및 이슈가 발생했을 때, 대처했던 내용을 토대로 개인적인 팁을 공유하기위해 작성했습니다.

 

서버에서 응답받은 response 예시다.

const response = {
    notifications: {
        follow: true,
        alerts: true,
        unfollow: false
    },
    user: {
        lastName: 'park',
        firstName: 'jin'
    }
};

// follow 상태가 true 이면 이메일을 발송하고, false이면 not follow or server problem가 실행됨.
if (response.notifications.follow) {
    console.log('sending email...');
} else {
    console.log('not follow or server problem');
}

 

위 코드의 문제점

1. Object의 key value의 depth가 깊어질수록 가독성이 떨어짐(response.notifications.follow....)
2. 런타임 환경에서 서버에서 응답받은 response에 notifications가 없으면 follow에 접근하자마자 undefined 참조 에러가 발생한다.

 

에러가 발생하는 코드

const response = {
    // 서버에서 notifications 객체를 안넘겨줌
    // notifications: {
    //     follow: true,
    //     alerts: true,
    //     unfollow: false
    // },
    user: {
        lastName: 'park',
          firstName: 'jin'
    }
};

// notifications를 조회하면 undefined이고 follow 접근하자마자 런타임상에서 에러가 터짐.
// Uncaught TypeError: Cannot read property 'follow' of undefined
if (response.notifications.follow) {
    console.log('sending email...');
} else {
    console.log('not follow or server problem');
}

 

1차 개선(일반적인 해결 방법)

const follow = response.notifications === undefined ? 
                  false : response.notifications.follow;

if (follow) {
    console.log('sending email...');
} else {
    console.log('not follow or server problem');
}

1차 개선 작업에서 삼항연산자로 오브젝트를 undefined 체크를 한다. response의 notifications가 undefined이면 false, 존재시 상태에 따라 true or false 상태가 될 것이다.

 

하지만 삼항연산자 같은 경우 하나의 조건을 기준으로 단순히 true or false 상태체크할 때 편리하나, 만약 response에 notifications말고 user나 기타 오브젝트까지 default key value까지 검증해야한다면 코드의 복잡도나 가독성 측면에서 피로도가 높아진다.

 

 

response.notifications === undefined ? false : true
response.user === undefined ? false : true
response.info === undefined ? false : true
response.group === undefined ? false : true
......
......
......

이처럼 조건이 추가 될 때마다 그 이상의 코드 라인수가 증가하게되는데 이 방법을 회피하기 위해선 Destructuring으로 코드를 개선해보자

 

Destructuring Default Value 선언을 통한 에러회피 기법

const response = {
    // 서버에서 notifications 객체를 안넘겨줌
    // notifications: {
    //     follow: true,
    //     alerts: true,
    //     unfollow: false
    // },
    user: {
        lastName: 'park',
          firstName: 'jin'
    }
};

const {
    notifications: { follow = false }
} = response;

if (follow) {
    console.log('sending email...');
} else {
    console.log('not follow or server problem');
}

 

response에 notifications의 follow가 없을 시, 대비하기위해 다시한번 const에 오브젝트를 감싼 후 동일한 JSON 구조를 만들어 최종 follow에 default값을 선언을 통해서 에러를 회피하였다.

 

디스트럭처링에 대해서 잘모른다면 일반적인 개발자는 다음과 같이 생각할 수 있다.

 

 

그럼 notifications의 데이터들이 정상이라면 최종 follow가 false인데 무조건 false 상태일까요?

const response = {
    notifications: {
        follow: true,
        alerts: true,
        unfollow: false
    },
    user: {
        lastName: 'park',
          firstName: 'jin'
    }
};

const {
    notifications: { follow = false }
} = response;

if (follow) {
    console.log('sending email...');
} else {
    console.log('not follow or server problem');
}

결론말 말하자면 정상적으로 notifications의 follow가 true인 상태면 아래에 follow를 재할당한 false를 무시하고 true 상태가 되며, console.log('sending email...'); 이 실행하게됩니다.