[Javascript] 해체 할당으로 키-값 할당을 축약하고 객체 생성하기 Destructuring assignment, Rest parameters

• 해체 할당으로 축약한 키-값 할당을 이용해 객체를 빠르게 만드는 방법을 알아보자.
• 본 포스팅의 예제와 설명은 자바스크립트 코딩의 기술 도서를 참고하였음을 밝힙니다.

우선, 사진 정보를 담고 있는 객체를 살펴보자.

const landscape = {
  title: 'Landscape',
  photographer: 'Nathan',
  location: [32.7122222, -103.1405556],
};

위 사진 객체에는 위치 정보로 위도와 경도를 가지고 있지만, 실제로 필요한 것은 지역의 이름이다. location 대신 지역정보를 포함한 새로운 객체를 만들어 보려 한다.

👶🏻 객체에서 키-값 쌍을 변경해보자

우리가 원하는 지역 정보를 얻기 위해 경도와 위도를 인수로 전달하면 지역의 이름을 포함한 몇 가지 정보를 반환하는 헬퍼 함수를 이용할 것이다. 헬퍼 함수의 구현은 여기서 중요하지 않으니 패스하겠다.

function determineCityAndState([latitude, longitude]) {
  // Geo lookup would happen here
  const region = {
    city: 'Hobbs',
    county: 'Lea',
    state: {
      name: 'New Mexico',
      abbreviation: 'NM',
    },
  };
  return region;
}

지역 정보를 가진 객체 region을 반환했다.

👨🏻 해체 할당을 이용해 값을 꺼내자.

function getCityAndState({ location }) {
  const { city, state } = determineCityAndState(location);
  return {
    city,
    state: state.abbreviation,
  };
  // {
  //   city: 'Hobbs',
  //   state: 'NM'
  // }
}

반환된 객체에서서 *해체 할당하여 city와 state의 값을 꺼낼 수 있으며 key와 같은 변수에 할당했다.

function setRegion({ location, ...details }) {
  const { city, state } = determineCityAndState(location);
  return {
    city,
    state: state.abbreviation,
    ...details,
  };
}

👨🏻‍🦳 나머지 매게변수로 나머지 값 가져오기

해체 할당으로 city와 state의 키-값 쌍을 할당할 때, 객체에 들어있던 location 이외의 모든 것을 *나머지 매게변수를 활용하여 변수 details에 할당했다.

즉,
(1)해체 할당을 통해 꺼낸 location을 헬퍼 함수에 전달해 지역 정보 객체를 가져왔고, (2)가져온 지역 정보 객체에서 바로 해체 할당을 통해 city와 state에 키-값 쌍을 할당했다. 그리고 (3)나머지 사진 정보는 details에 수집해 두었다가 (4)함수에서 return 하는 객체에 넣어주므로써. 우리가 처음에 만들고자 했던 객체를 생성할 수 있었다.

{
  title: 'Landscape',
  photographer: 'Nathan',
  city: 'Hobbs',
  state: 'NM',
};

이렇게 하면 객체를 복사하고 delete로 landscape.location을 삭제할 필요 없이 객체 생성이 가능하다.

* Rest parameters

* Destructuring assignment

👶🏻 읽어주셔서 감사합니다!!