Object Destructuring

디스트럭처링은 오브젝트나 어레이, 그 외 요소들 안의
변수를 바깥으로 끄집어내서 사용할 수 있도록 하는 것.

 

 

 

 

 

See the Pen 200918-10 by hwd3004 (@hwd3004) on CodePen.

 

notifications - 유저알림
follow - 누군가 유저를 팔로우하면 notification을 보냄
alerts - 최근 소식같은게 있으면 알림을 보내주는 용도로 사용
unfollow - 누군가 언팔로우 했을때는 알림을 받고 싶지 않으니 false

만약 유저의 notifications에 alerts가 true로 되어있을 때,
follow도 true로 되어있다면, 이메일을 보내주려한다.
누군가 이 유저를 follow했을 때 이런 부분들을 체크하도록 하는 것.

이런걸 체크할때 예전에는 이렇게 해야만 했다.

이런식으로 체크 한다음에 이 안에서 send email 같은걸 해줘야한다.

 

이렇게 하면 만약의 경우에 문제가 생길수 있는데,
follow의 값이 아예 없을때, 혹은 notifications가 통채로 없을때.
그런 경우에는 이 부분이 undefined로 나온다.

 

 

 

See the Pen 200918-11 by hwd3004 (@hwd3004) on CodePen.

오브젝트이니까 오브젝트 디스트럭처링을 하여서 follow를 가져오고자 한다면,


한 스텝씩 해보자.

const follow = settings

타겟 오브젝트인 settings에서 구조상 follow가 나올때까지,
settings의 안을 찾아보는거다.


const {follow} = settings

먼저 중괄호로 follow를 감싸주고, follow에 도달하기전에
먼저 notifications로 접근하여야하니,


const {notifications: {follow}} = settings

settings 안의 notifications 안으로 접근하고, follow를 가져오면서 동시에 같은 이름의 변수를 만든다. 

참고로 여기서 console.log(follow) 하면 true가 뜨지만,

console.log(notifications) 하면

Uncaught ReferenceError: notifications is not defined 에러가 뜬다.

여기서 notifications는 변수로 만들면서 가져오는게 아니다.. notifications 안에 있는 follow를 가져온다.

notifications는 settings 오브젝트 밖으로 꺼내지지 않았다.

notifications 안으로 접근해서 follow만 가져온 것이다.

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

color 값을 통채로 가져오고 싶다면 그냥 이렇게 하면 된다.

color를 가져오면서 동시에 같은 이름의 변수를 만든다.

이런 방식은, 큰 오브젝트에서 특정 변수나, 그안에 속한 작은 오브젝트에
접근할 수 있도록 해준다.

 

 

 

See the Pen 200918-12 by hwd3004 (@hwd3004) on CodePen.

 

notofications 오브젝트만 가져오고 싶다면 이렇게 하면 된다.

 

const notifications = settings.notifications

이 코드와 같다.