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

이번 글에서는 객체와 문자열 배열을 인자로 받아, 배열에 포함된 키만 남긴 필터링된 새로운 객체를 반환하는 함수를 작성해 보겠습니다.

예를 들어, 객체가 {"a": [], "b": [], "c": [], "d": []}이고 배열이 ["a", "d"]라면, 결과는 다음과 같아야 합니다.

{"a": [], "d": []}

구현 아이디어

핵심 로직은 간단합니다. 객체의 모든 키를 순회하면서 해당 키가 배열에 존재하는지 확인하고, 존재한다면 그 키-값 쌍을 새로운 객체에 추가합니다. 순회가 끝나면 완성된 새 객체를 반환하면 됩니다.

코드 예제

const capitals = {
    "usa": "Washington DC",
    "uk": "London",
    "india": "New Delhi",
    "italy": "rome",
    "japan": "tokyo",
    "germany": "berlin",
    "china": "shanghai",
    "spain": "madrid",
    "france": "paris",
    "portugal": "lisbon"
};
const countries = ["uk", "india", "germany", "china", "france"];

const filterObject = (obj, arr) => {
    const newObj = {};
    for (key in obj) {
        if (arr.includes(key)) {
            newObj[key] = obj[key];
        }
    }
    return newObj;
};

console.log(filterObject(capitals, countries));

실행 결과

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

{
    uk: 'London',
    india: 'New Delhi',
    germany: 'berlin',
    china: 'shanghai',
    france: 'paris'
}

추가 팁: reduce를 활용한 더 간결한 방법

for...in 반복문 대신 reduce() 메서드를 사용하면 코드를 더욱 간결하게 만들 수 있습니다.

const filterObject = (obj, arr) =>
    arr.reduce((acc, key) => {
        if (key in obj) acc[key] = obj[key];
        return acc;
    }, {});

이 방식은 원본 객체를 변경하지 않고(불변성 유지) 새로운 객체를 생성하므로, 함수형 프로그래밍 스타일에 더 적합합니다. 상황에 맞게 두 가지 방법 중 편한 것을 선택해 사용하시면 됩니다.