비구조화할당 - 코드의 유연성 향상에 관한 예시

완두콩·2023년 4월 20일

react

목록 보기
7/10

앞선 포스팅에 비구조화 할당에 대해 정리했는데
그 중에서도 코드의 유연성 향상에 관한 예시에 대해 좀 더 설명이 필요해서 찾아봤다.

코드의 유연성 향상의 예시
1. 추출할 값의 이름 변경
2. 기본값 지정
3. 중첩된 객체에서 값 추출

비구조 할당을 하면 추출할 값의 이름을 변경해서 지정할 수 있다고 해서
코드의 유연성이 높아진다고 했는데 이 부분에 대해 좀 더 알아보고 싶었다.

추출할 값의 이름 변경

const { name: userName, age: userAge } = user;

이게 그에 대한 예시인데
말로 풀어보자면 user에서 name의 데이터를 userName이라고 명명하고,
age를 userAge라고 명명한다는 뜻이다.

공부를 하면서 강의에서 이렇게 썼던 부분이 있었는데
당시에는 이 부분에 대해 확실히 이해하고 넘어가지 못했고
대충 넘겼던 적이 있었다.
당시에는 이 부분을 뭐라고 찾아봐야할 지 몰랐기 떄문에 바로 찾아보지 못했다.

기본값 지정

값이 없거나 undefined이 경우에 기본 값을 지정할 수 있다.

const { name = 'Unknown', age = 0 } = user;

user의 name과 age에서 값이 없거나 undefined일 경우
name은 지정해준 기본 값 'Unknown'으로 age는 0으로 할당된다.

중첩된 객체에서 값 추출

const { data: { name, age } } = user;

data안에 name과 age의 값만 필요하다면 이런 식으로
필요한 값만 추출할 수 있다.

profile
공부하자. 기록하자. 쫌!

0개의 댓글