DESTRUCTURING - Object Destructuring

출처 : Nomadcoders ES6의 정석

이번파트는 object, array 등과 같은 데이터의 구조분해할당(destructuring)에 대해 알아보려한다.

구조분해할당이란 배열이나 객체의 속성을 해체하여 그 값을 원하는 변수에 다시 담을 수 있게 하는 표현식이다.

일단 기존엔 어떻게 사용했는지 예시를 보자.

// 대상오브젝트
const settings = {
  notification : {
    follow:true,
    alerts : true,
    unfollow: false
  },
  color:{
    theme:"dark"
  }
}

 if(settings.notification.follow){
  // send email
}

기존 우리는 오브젝트안의 데이터를 확인하기 위해서 위와같이 사용했었다. 기존과 같은 경우의 가장 두드러지는 문제점은 오브젝트안의 중간 데이터가 없을 시 에러를 표출한다.

그럼 구조분해할당 표현을 쓰면 어떤 이점이 있는가 살펴보자.

// 기존 접근방법
if(settings.notification.follow){
  // send email
}

// 구조분해할당로 접근
const {notification:{follow}} = settings;

비교해보면 기존엔 오브젝트 대상으로부터 차례로 진입하는 순서이지만, 구조분해할당은
타겟 오브젝트를 대상으로 왼쪽 {} 안에서 대상의 데이터모형을 파악하기 용이한 구조로 접근한다.
그리고 const 를 통해 바로 변수를 선언하여 재사용 가능하게한다.

주의점으로 구조분해 할당 시 마지막으로 접근한 데이터에 변수를 생성하는것이다. 위와 같은경우 follow만 변수선언이 된것이고 notification은 그저 follow가 notification안에 있다는걸 표시한다.

그리고 또 하나의 구조분해할당의 장점이 있다. 바로 기본값이 지정이 가능하다.

       // 대상 데이터의 접근 경로           = 타겟 오브젝트
const {notification:{follow=false} = {}} = settings;

이전에 우리는 기본값을 지정하는법을 배웠었다. 그때와 같이 기본값을 지정하면 혹여 데이터를 받지못해 undefined가 표출될 상황을 방지할 수 있다.

이를 one-line-statement라고 한다.