JavaScript 객체에서 특정 속성을 추출하는 방법

문제 상황

JavaScript에서는 한 객체에 담긴 여러 속성 중 필요한 것만 골라내야 하는 경우가 자주 발생합니다. 이번 글에서는 extract()라는 함수를 작성하여, 지정된 속성들을 한 객체에서 다른 객체로 옮기고 동시에 원본 객체에서는 삭제하는 방법을 알아보겠습니다.

예를 들어, obj1과 obj2라는 두 객체가 있다고 가정해 보겠습니다.

obj1 = {color:"red", age:"23", name:"cindy"}
obj2 = extract(obj1, ["color","name"])

extract 함수를 실행한 후에는 다음과 같은 결과가 나와야 합니다.

obj1 = { age:23 }
obj2 = {color:"red", name:"cindy"}

즉, 지정한 키(color, name)에 해당하는 속성은 새로운 객체 obj2로 이동하고, 나머지 속성(age)만 원본 객체에 남게 됩니다. 그럼 이제 실제 구현 코드를 살펴보겠습니다.

구현 예제

const obj = {
    name: "Rahul",
    job: "Software Engineer",
    age: 23,
    city: "Mumbai",
    hobby: "Reading books"
};
const extract = (obj, ...keys) => {
    const newObject = Object.assign({});
    Object.keys(obj).forEach((key) => {
        if(keys.includes(key)){
            newObject[key] = obj[key];
            delete obj[key];
        };
    });
    return newObject;
};
console.log(extract(obj, 'name', 'job', 'hobby'));
console.log(obj);

실행 결과

위 코드를 실행하면 콘솔에 다음과 같이 출력됩니다.

{ name: 'Rahul', job: 'Software Engineer', hobby: 'Reading books' }
{ age: 23, city: 'Mumbai' }

코드 동작 방식

함수의 동작 과정을 단계별로 정리하면 다음과 같습니다.

첫째, rest 파라미터(...keys)를 사용해 추출하고 싶은 키 이름들을 가변 인자로 전달받습니다. 덕분에 호출 시 키 개수에 제약 없이 유연하게 사용할 수 있습니다.

둘째, Object.keys()로 원본 객체의 모든 키를 순회하면서, 전달받은 keys 배열에 포함된 키인지 확인합니다.

셋째, 포함된 키라면 새 객체에 해당 값을 복사한 뒤, delete 연산자로 원본 객체에서 즉시 제거합니다.

넷째, 모든 순회가 끝나면 속성이 이동된 새 객체를 반환합니다.

마무리

이처럼 간단한 몇 줄의 코드만으로도 객체에서 원하는 속성만 깔끔하게 분리할 수 있습니다. 폼 데이터 정리, API 응답 필터링 등 실무에서도 유용하게 활용할 수 있는 패턴이니 참고해 보시기 바랍니다.