JavaScript에서 배열을 기반으로 객체 속성 필터링하는 방법

JavaScript를 사용하다 보면 배열에 담긴 특정 키만 남기고 객체의 나머지 속성을 제거해야 하는 경우가 종종 있습니다. 이번 글에서는 그 방법을 예제와 함께 살펴보겠습니다.

먼저 다음과 같이 하나의 배열과 하나의 객체가 있다고 가정해 보겠습니다.

const arr = ['a', 'd', 'f'];
const obj = {
    "a": 5,
    "b": 8,
    "c": 4,
    "d": 1,
    "e": 9,
    "f": 2,
    "g": 7
};

우리가 작성할 함수는 이 객체와 배열을 인자로 받아, 배열의 요소에 해당하지 않는 객체 속성을 모두 걸러내는 역할을 합니다. 따라서 최종 결과에는 "a", "d", "f" 세 개의 속성만 남아 있어야 합니다.

그럼 실제 동작하는 코드를 작성해 보겠습니다.

예제 코드

const arr = ['a', 'd', 'f'];
const obj = {
    "a": 5,
    "b": 8,
    "c": 4,
    "d": 1,
    "e": 9,
    "f": 2,
    "g": 7
};

const filterObject = (obj, arr) => {
    Object.keys(obj).forEach((key) => {
        if (!arr.includes(key)) {
            delete obj[key];
        }
    });
};

filterObject(obj, arr);
console.log(obj);

코드 동작 원리

이 코드의 핵심 로직은 다음과 같이 정리할 수 있습니다.

1. Object.keys(obj) — 객체의 모든 키를 배열 형태로 추출합니다. 위 예제에서는 ['a', 'b', 'c', 'd', 'e', 'f', 'g']가 반환됩니다.

2. forEach 순회 — 추출한 키 배열을 처음부터 끝까지 하나씩 순회합니다.

3. arr.includes(key) — 현재 키가 주어진 배열 arr에 존재하는지 검사합니다.

4. delete obj[key] — 배열에 포함되어 있지 않은 키라면 해당 속성을 객체에서 삭제합니다.

즉, 배열에 있는 키만 골라 남기고 나머지는 전부 제거하는 방식으로 객체가 필터링됩니다.

출력 결과

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

{ a: 5, d: 1, f: 2 }

원본 객체를 유지하고 싶다면?

위 방식은 기존 객체 자체를 변경(mutation)합니다. 원본 객체를 보존하면서 새로운 객체를 만들고 싶다면 Object.fromEntries()와 filter()를 조합하는 방법도 좋습니다.

const filtered = Object.fromEntries(
    Object.entries(obj).filter(([key]) => arr.includes(key))
);

이 방식은 불변성(immutability)을 지키기 때문에 React와 같은 라이브러리를 사용하는 환경에서 특히 유용합니다.