destructuring

비구조화는 객체나 배열 혹은 그 외 요소들 안에 있는 변수를 바깥으로 꺼내 사용할 수 있도록 해주는 것이다

const settings = {
  notifications:{
    follow:true,
    alerts:true,
    unfollow:false
  },
  color:{
    theme:"dark"
  }
}

//과거의 코딩방식
if(settings.notifications.follow){
  //실행할 함수내용
}

const {
  notifications: {follow},
  color
} = settings;

console.log(follow);
//true

지금 쓰면서도 @_@??? 싶은데 잠깐잠깐….

그러니까 지금…

{} 을 써주면 객체안에 있는 변수들을 바로 접근가능하다는거지..?

뭐.뭐.뭐 할 필요없이…?

오…

신기하군…

또한 안으로 한단계 들어갈때마다 변수:{ 한 단계 아래의 변수명 } 을 써주면 하위의 변수에 접근가능하다

but 이 경우에는 변수 는 바로 접근할 수 없다. 왜냐면 한 단계 아래의 변수명 에 접근하기 위한 용도로만 사용되기 때문!

그러니까..

const {
  notifications: {follow},
  color
} = settings;

console.log(notifications);
//에러

이렇게 하면 에러가 뜬다는 거시다

console.log(follow) 를 하면 true가 찍힐것이고..

버뜨 만약에 followㄱㅏ 없다면?

const settings = {
  notifications:{
    alerts:true,
    unfollow:false
  },
  color:{
    theme:"dark"
  }
}

const {
  notifications: {follow},
  color
} = settings;

console.log(follow);
//undefined

undefined이 떠버리니

만약 값이 없을때는 디폴트값이 뜨라고 기본값을 설정해 줄 수 있다

바로 이렇게

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

이러면 undefined일때는 무조건 false로 뜨게된다

하나더!

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

위 코드를 해석해보자면

notifications 안으로 가서 follow 를 찾고 없으면 false 로 기본값을 설정한다.

근데 만약 notifications도 없으면 빈 오브젝트가 된다.

와 진짜….

개신기…그리고 코드 효율성봐… 진짜 개좋네…

이거시 바로 one-line-statement 라는 것이다

노마드코더의 ‘ES6의 정석’을 듣고 정리 =)