JavaScript에서 배열의 객체 필터링하기 – null 및 빈 문자열 값 제거 방법

회사 직원 정보를 담은 객체 배열이 있다고 가정해 봅시다. 그런데 이 배열에는 빈 문자열("")이나 null처럼 유효하지 않은 데이터가 섞여 있습니다. 이번 글에서는 배열을 인자로 받아 name 키의 값이 null, undefined 또는 빈 문자열인 객체를 걸러낸 뒤, 정리된 새로운 배열을 반환하는 함수를 작성해 보겠습니다.

문제가 되는 객체 배열은 다음과 같습니다.

let data = [{
    "name": "Ramesh Dhiman",
    "age": 67,
    "experience": 45,
    "description": ""
}, {
        "name": "",
        "age": 31,
        "experience": 9,
        "description": ""
}, {
        "name": "Kunal Dhiman",
        "age": 27,
        "experience": 7,
        "description": ""
}, {
        "name": "Raman Kumar",
        "age": 34,
        "experience": 10,
        "description": ""
}, {
        "name": "",
        "age": 41,
        "experience": 19,
        "description": ""
    }
]

해결 방법

배열 내장 메서드인 filter()를 사용하면 간단하게 해결할 수 있습니다. 콜백 함수에서 각 객체의 name 값을 반환하면, 자바스크립트는 이를 불리언 값으로 평가합니다. 따라서 "", null, undefined처럼 거짓(falsy)으로 판정되는 값은 자동으로 제외됩니다.

예제

let data = [{
    "name": "Ramesh Dhiman",
    "age": 67,
    "experience": 45,
    "description": ""
}, {
        "name": "",
        "age": 31,
        "experience": 9,
        "description": ""
}, {
        "name": "Kunal Dhiman",
        "age": 27,
        "experience": 7,
        "description": ""
}, {
        "name": "Raman Kumar",
        "age": 34,
        "experience": 10,
        "description": ""
}, {
        "name": "",
        "age": 41,
        "experience": 19,
        "description": ""
    }
]
const filterUnwanted = (arr) => {
    const required = arr.filter(el => {
        return el.name;
    });
    return required;
};
console.log(filterUnwanted(data));

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다. name 값이 빈 문자열인 두 개의 객체는 제거되고, 유효한 이름을 가진 객체만 남게 됩니다.

[
    { name: 'Ramesh Dhiman', age: 67, experience: 45, description: '' },
    { name: 'Kunal Dhiman', age: 27, experience: 7, description: '' },
    { name: 'Raman Kumar', age: 34, experience: 10, description: '' }
]

참고 사항

특정 키 하나가 아니라 여러 조건을 검사하고 싶다면, 콜백 안에 조건식을 명확히 작성하는 것이 좋습니다. 예를 들어 다음과 같이 작성하면 의도를 더 분명하게 드러낼 수 있습니다.

const required = arr.filter(el => {
    return el.name !== null && el.name !== undefined && el.name.trim() !== "";
});

이렇게 하면 공백으로만 이루어진 이름도 함께 걸러낼 수 있어 데이터 정제 과정에서 더욱 안전하게 활용할 수 있습니다.