JavaScript 객체에서 빈 객체를 모두 제거하는 방법

JavaScript로 개발을 하다 보면 객체 안에 값이 없는 빈 객체({})가 포함된 경우가 종종 있습니다. 이번 글에서는 이러한 빈 객체를 손쉽게 찾아 제거하는 방법을 알아보겠습니다.

문제 상황

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

const details = {
    name: 'John',
    age: {},
    marks: { marks: {} }
}

위 객체에는 age와 marks 내부의 marks처럼 아무런 값도 담고 있지 않은 빈 객체가 존재합니다. 우리의 목표는 이러한 빈 객체들을 모두 제거하는 것입니다.

해결 방법

빈 객체를 제거하려면 forEach()와 typeof, 그리고 delete 연산자를 함께 사용하면 됩니다. 핵심 아이디어는 재귀 함수를 활용해 객체의 각 속성을 순회하면서, 해당 속성이 객체인지 확인하고 재귀 호출 후에도 비어 있다면 삭제하는 것입니다.

예제 코드

다음은 전체 코드입니다.

const details = {
    name: 'John',
    age: {},
    marks: { marks: {} }
}

function removeAllBlankObjects(detailsObj) {
    Object.keys(detailsObj).forEach(k => {
        if (detailsObj[k] && typeof detailsObj[k] === 'object' && removeAllBlankObjects(detailsObj[k]) === null) {
            delete detailsObj[k];
        }
    });
    if (!Object.keys(detailsObj).length) {
        return null;
    }
}

removeAllBlankObjects(details);
console.log(details);

코드 동작 원리

이 코드는 다음과 같은 순서로 동작합니다.

1. Object.keys()로 객체의 모든 키를 가져온 뒤 forEach()로 하나씩 순회합니다.
2. 현재 속성의 값이 존재하고(null, undefined가 아니며), 타입이 'object'인 경우 재귀적으로 자기 자신을 호출합니다.
3. 재귀 호출의 반환값이 null이라면 해당 하위 객체가 완전히 비어 있다는 의미이므로 delete로 속성을 제거합니다.
4. 마지막으로 객체에 남은 키가 하나도 없으면 null을 반환하여 상위 호출 단계에 "빈 객체"임을 알립니다.

실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 입력합니다.

node fileName.js

여기서는 파일 이름이 demo283.js라고 가정하겠습니다.

실행 결과

프로그램을 실행하면 콘솔에 다음과 같은 출력이 표시됩니다.

PS C:\Users\Amit\javascript-code> node demo283.js
{ name: 'John' }

출력 결과를 보면 빈 객체였던 age와 marks가 모두 제거되고, 실제 값을 가진 name 속성만 남은 것을 확인할 수 있습니다. 이처럼 재귀 함수를 활용하면 중첩된 구조의 객체에서도 빈 객체를 깔끔하게 정리할 수 있습니다.