자바스크립트 - 구조분해 할당(destructuring assignment)

 

비구조화 할당(destructuring assignment - 구조분해 할당)

배열의 인덱스 혹은 객체의 키를 기준으로 변수의 값이 자동적으로 할당되는 방법이다.

(변수를 한번에 선언해주는 방법)

 

다음과 같은 객체가 있다고 가정해보자.

const song = {
    author : '비',
    date : '2020-05-31',
    title : '깡',
    body : '화려한 조명이 나를 감싸네에에에에에'
};

여기서 song 이라는 객체를 destructuring 한다면 다음과 같이 코드를 작성해 줄 수 있다.

const {author, date, title, body} = song;
console.log(author, date, title, body);

결과 : 비 2020-05-31 깡 화려한 조명이 나를 감싸네에에에에에

 

위의 결과를 보면 객체의 각 키 값에 해당하는 속성값이 각 변수에 정상적으로 할당된 것을 확인할 수 있다.

 

그렇다면 여기서 질문, 구조분해 할당을 통해 객체의 각 속성값을 변수로 받아올 때, 반드시 키 값의 이름과 일치하는 변수에 값을 적재해줘야 할까?

아래의 코드를 한번 보도록 하자.

const {author : name, date : time, title : jaemok, body : lyrics} = song;
console.log(name, time, jaemok, lyrics);

결과 : 비 2020-05-31 깡 화려한 조명이 나를 감싸네에에에에에

 

위와 같이 구조분해 할당을 할 때 {키 이름 : 할당받고 싶은 변수 이름} 과 같은 형태로 속성값을 받으면 원래 객체의 키 이름이 아닌, 할당받고 싶은 다른 변수의 이름으로 속성값을 할당 받을 수 있다.

 

구조분해 할당에서 가장 중요한 건 어떤 상황에서 어떻게 이 문법을 쓰게 되느냐이다.

만약 웹 서비스를 만들고 있다고 가정해보자.

이 웹 서비스를 제공할 때, 웹 서비스 자체에서 생성한 정보도 있겠지만 웹 서비스 바깥에서 가져온 정보를 가공해서 보열주고 싶을 수도 있다.

 

예를 들어 외부 API 를 통해 받아온 정보와 같은 것들을 말한다.

특히나 API 같은 경우 JSON 형태로 데이터를 받아오게 되는데, 이 경우 중첩된 객체의 형태를 띄고 있는 경우가 많다.

(pro.gg 프로젝트를 할 때 소환사 최근 전적과 같은 데이터를 JSON 으로 받아올 때, 객체가 서로 중첩된 형태로 넘어왔던 것으로 기억한다. 즉, 객체 안에 또 다른 객체가 있는 형태인 것이다.)

그런데 보통 이렇게 외부 API 를 통해 정보를 가져올 때, 그 방대한 정보들을 전부 다 사용할 필요는 없다.

정확하게 필요한 정보만 쏙쏙 골라서 뽑아내면 되는 것이다.

 

구조분해 할당의 장점

구조분해 할당의 가장 큰 장점은 외부 API 를 통해 받아온 복잡한 객체 정보에서 원하는 정보만 빼내서 활용할 수 있다는 점이다.

 

만약 카카오에서 제공하는 API 에서 원하는 정보를 빼내려면 다음과 같은 형태로 뽑아낼 수 있을 것이다.

var kakaoResponse = {
    // 각종 JSON 객체 정보들이 있다고 가정한다.
}
const {item_name, approved_at} = kakaoResponse;

그런데 여기서 객체 내부에 객체가 있는 형태인 중첩 객체 데이터의 경우엔 어떻게 정보를 뽑아 올 수 있을까?

다음과 같이 코드를 작성해 줄 수 있다.

const {item_name, approved_at, amount.total} = kakaoResponse;
console.log(item_name, approved_at, amount.total);
// amound 라는 내부 중첩 객체안에 있는 속성인 total 속성을 가져온다.

그런데 중첩 객체 내부에 있는 속성을 쓰고 싶을 때마다 매번 이렇게 작성하면 조금 귀찮을 수도 있다.

하나의 이름으로서 데이터를 받고 싶으면 어떻게 해야할까?

const {item_name, approved_at, amount : {total}} = kakaoResponse;
console.log(item_name, approved_at, total);

위와 같이 amount 객체의 total 속성을 가져오면 굳이 amount.total 과 같이 표현할 필요 없이 곧장 total 필드를 쓰는것이 가능하다.

 

그럼 이제 이걸 각 속성의 이름을 그대로 사용하는 것이 아닌, 직접 만든 변수 안에 적재해보자.

const {item_name : name, approved_at : date, amount : {total : totalPrice}} = kakaoResponse;
console.log(name, date, totalPrice);

 

 

 

참조 : https://edu.goorm.io/learn/lecture/19879/%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC%EB%A5%BC-%EC%9C%84%ED%95%9C-javascript-es6

프레임워크를 위한 JavaScript ES6 - 구름EDU