바닐라 자바스크립트로 객체 속성의 일부만 추출해 새 객체 만들기

자바스크립트에서 객체의 특정 속성만 골라내어 새로운 객체를 만들고 싶을 때가 있습니다. 이럴 때 외부 라이브러리 없이 객체 구조 분해 할당(Destructuring)과 속성 단축 표기법(Property Shorthand)을 활용하면 간단하게 해결할 수 있습니다.

예제: 원본 객체 준비하기

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

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

이 객체에서 name과 age 두 속성만 필요하다면, 아래와 같이 코드를 작성할 수 있습니다.

구조 분해 할당으로 새 객체 만들기

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

코드의 동작 방식을 살펴보면 다음과 같습니다.

• const {name, age} = person; — 객체 구조 분해 할당을 통해 person 객체에서 name과 age 값을 각각 추출하여 변수에 담습니다.
• const selectedObj = {name, age}; — 속성 단축 표기법을 사용해 변수 이름과 동일한 키를 가진 새 객체를 생성합니다. 즉, {name: name, age: age}와 같은 의미입니다.

실행 결과

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

{
    name: 'John',
    age: 40
}

추가 팁: 여러 객체에 재사용하기

이 패턴을 자주 사용한다면 함수로 만들어 재사용하는 것도 좋은 방법입니다.

function pick(obj, keys) {
    return keys.reduce((acc, key) => {
        if (key in obj) acc[key] = obj[key];
        return acc;
    }, {});
}

const selectedObj = pick(person, ['name', 'age']);
console.log(selectedObj); // { name: 'John', age: 40 }

이처럼 바닐라 자바스크립트만으로도 원하는 속성만 선택하여 깔끔하게 새 객체를 만들 수 있습니다. Lodash의 _.pick() 같은 유틸리티 없이도 구조 분해 할당 하나면 충분히 해결되는 경우가 많으니, 상황에 맞게 활용해 보시기 바랍니다.