JavaScript ES6 (구조 분해 할당)

구조 분해 할당

구조 분해 할당이란?

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다

그럼 예제를 통해 바로 알아보자

const human = {
  name: "seokjin",
  club: "bamdoliro",
  address: {
    city: "incheon"
  }
};

이렇게 human이라는 객체 안에 name, club, address, city와 같은 데이터들이 있다
보통 human 안에 있는 데이터들에 접근할 때 구조 분해 할당을 쓰지 않는다면

console.log(human.name); // seokjin
console.log(human.address.city); // incheon

이와 같이 접근하게 될 것이다 만약 이것을 변수에 저장한다고 했을 때 코드는 어떻게 될까?

const name = human.name;
const city = human.address.city;

이런 식으로 하나하나 값을 저장해 줘야 할 것이다 지금은 두 개의 변수밖에 담지 않았지만 과연 이것이 5개 10개가 된다면 코드는 길어지고 보기 좋지 않아질 것이다

우리는 이럴 때 구조 할당 분해를 써서 깔끔하게 코드를 짤 수 있다

구조 분해 할당 사용법은 다음과 같다

const {name, club, address, address: { city } } = human;

console.log(name); // seokjin
console.log(city);

아까와 같이 하나하나 변수에 넣게 되었다면 분명히 코드가 길어졌을 것이다
하지만 구조 분해 할당을 쓰게 되면 깔끔하게 한 줄로 깔끔하게 쓸 수 있다

하지만 이것이 꼭 객체에서만 쓸 수 있는 건은 아니다 배열에서도 쓸 수 있다

const [one, two, three] = ["하나", "둘", "셋"];

console.log(one); // 하나
console.log(two) // 둘
console.log(three) // 셋

이와 같이 배열에서도 쓸 수 있다

예제

직접 프로젝트에 적용해 보았다!

const { accessToken, refreshToken } = res;
const { authority, schoolName, username } = res.user;

나는 서버에서 토큰과 데이터들을 받아올 때 구조 분해 할당 쓰고 있었지만
안에 있는 객체에 한 번 더 들어가 데이터들을 또 불러올 수 있는 것들은 몰랐었다

그래서 나는 배운 것을 바탕으로 2줄짜리 코드를 1줄로 줄였다

const {
  accessToken,
  refreshToken,
  user: { authority, schoolName, username },
} = res;

훨씬 간결해지고 보기도 편해졌다

이제 구조 분해 할당으로 깔끔한 코드 만들자!