[typescript] 객체 분해 할당 시 나머지 프로퍼티 받기

12 Dec 2023

typescript

TypeScript에서 객체 분해 할당(destructuring assignment)을 사용하여 객체의 일부 프로퍼티를 추출하면서, 나머지 프로퍼티를 쉽게 받을 수 있습니다. 이 기능을 사용하면 코드를 간결하게 작성할 수 있고, 필요한 프로퍼티를 명시적으로 지정하여 가독성을 높일 수 있습니다.

객체 분해 할당 기본 문법

const person = {
  name: 'John',
  age: 30,
  gender: 'male',
  city: 'New York'
};

const { name, age } = person;

위의 예시에서 person 객체에서 name과 age 프로퍼티를 분해하여 새로운 변수에 할당했습니다. 이제 name 변수는 ‘John’을, age 변수는 30을 갖습니다.

나머지 프로퍼티 받기

이제 객체 분해 할당을 활용하여 일부 프로퍼티를 추출하고, 나머지 프로퍼티를 새로운 객체로 받는 방법을 알아보겠습니다.

const person = {
  name: 'John',
  age: 30,
  gender: 'male',
  city: 'New York'
};

const { name, age, ...additionalInfo } = person;

위의 예시에서 { name, age, ...additionalInfo }를 사용하여 name과 age를 추출한 후, 나머지 프로퍼티를 additionalInfo 객체에 담았습니다. 이제 additionalInfo 객체는 { gender: 'male', city: 'New York' }와 같이 {} 안에 남은 프로퍼티가 할당됩니다.

활용 예시

이렇게 분해된 객체로부터 필요한 정보를 추출하고, 나머지 정보를 다른 용도로 활용할 수 있습니다. 예를 들어, 함수에서 필요한 인자를 추출하고 나머지 인자를 다른 함수에 전달하는 등의 용도로 활용할 수 있습니다.

function printPersonInfo({ name, age, ...additionalInfo }) {
  console.log(`Name: ${name}, Age: ${age}`);
  console.log('Additional Info:', additionalInfo);
}

위의 예시에서 printPersonInfo 함수는 name과 age를 받아서 출력하고, additionalInfo에는 나머지 프로퍼티가 담겨 출력됩니다.

나머지 프로퍼티를 활용하여 코드를 더 간결하고 가독성 있게 작성할 수 있는 TypeScript의 객체 분해 할당은 다양한 상황에서 유용하게 활용될 수 있습니다.

참고 자료

MDN web docs - Destructuring assignment