JavaScript 객체에서 원하는 속성만 골라 새 객체를 만드는 방법

JavaScript에서 객체의 일부 속성만 선택해서 새로운 객체를 만들고 싶다면 객체 구조 분해 할당(Destructuring)과 속성 단축 표기법(Property Shorthand)을 활용하면 됩니다. 이 방법은 코드가 간결하고 가독성이 뛰어나 실무에서도 널리 사용됩니다.

예제

다음과 같은 person 객체가 있다고 가정해 보겠습니다.

const person = {
    name: 'John',
    age: 40,
    city: 'LA',
    school: 'High School'
}

이 객체에서 name과 age 두 속성만 필요하다면, 아래와 같이 구조 분해 할당으로 값을 꺼낸 뒤 속성 단축 표기법을 사용해 새 객체를 생성할 수 있습니다.

const {name, age} = person;
const selectedObj = {name, age};
console.log(selectedObj);

실행 결과

위 코드를 실행하면 다음과 같은 출력 결과를 얻을 수 있습니다.

{
    name: 'John',
    age: 40
}

동작 원리

const {name, age} = person; 코드는 person 객체에서 name과 age 속성값을 각각 추출하여 같은 이름의 변수에 할당합니다. 이후 {name, age}는 변수 이름과 속성 이름이 동일하기 때문에 {name: name, age: age}를 축약한 형태로 동작합니다.

참고로 ES2019부터 도입된 객체 나머지 속성(Rest Properties)을 사용하면 반대로 특정 속성을 제외한 나머지로 새 객체를 만들 수도 있습니다.

const {city, school, ...rest} = person;
console.log(rest); // { name: 'John', age: 40 }

필요한 속성이 많을 때는 구조 분해 할당 방식이, 제외할 속성이 적을 때는 rest 연산자 방식이 더 편리하니 상황에 맞게 선택하시면 됩니다.