JavaScript 중첩 객체의 깊이(Depth)를 계산하는 재귀 함수 구현 방법

중첩 객체에 깊이 속성 할당하기

실무에서는 다음과 같이 객체 배열 안에 또 다른 객체들이 중첩되어 있는 트리 형태의 데이터 구조를 자주 다루게 됩니다.

const arr = [{
    id: 0, children: []
}, {
        id: 1, children: [{
        id: 2, children: []
}, {
        id: 3, children: [{
            id: 4, children: []
        }]
    }]
}];

여기서 우리가 해야 할 작업은 assignDepth()라는 재귀 함수를 작성하여, 이 배열을 입력받고 각 중첩 객체마다 depth 속성을 부여하는 것입니다.

예를 들어, id가 0인 객체는 최상위 레벨이므로 depth가 0입니다. id가 1인 객체도 마찬가지로 최상위에 있으므로 depth는 0이며, 그 안에 중첩된 id 2와 id 3은 depth 1을 갖습니다. 그리고 id 3 안에 한 단계 더 중첩된 id 4는 depth 2를 가지게 됩니다.

재귀 함수로 해결하기

이 문제는 재귀(Recursion)로 아주 깔끔하게 해결할 수 있습니다. 함수가 하위 객체들을 반복적으로 순회하다가 더 이상 처리할 요소가 없으면 종료되도록 구현하면 됩니다.

const arr = [{
    id: 0, children: []
}, {
        id: 1, children: [{
        id: 2, children: []
}, {
        id: 3, children: [{
            id: 4, children: []
        }]
    }]
}];
const assignDepth = (arr, depth = 0, index = 0) => {
    if(index < arr.length){
        arr[index].depth = depth;
        if(arr[index].children.length){
            return assignDepth(arr[index].children, depth+1, 0);
        };
        return assignDepth(arr, depth, index+1);
    };
    return;
};
assignDepth(arr);
console.log(JSON.stringify(arr, undefined, 4));

코드 동작 원리

• 기본 매개변수(default parameter)를 활용해 depth와 index의 초기값을 각각 0으로 설정합니다.
• 현재 인덱스의 객체에 depth 값을 먼저 할당합니다.
• 해당 객체에 children이 존재하면, 깊이를 1 증가시킨 상태로 하위 배열을 대상으로 재귀 호출을 진행합니다.
• children이 없다면 같은 배열의 다음 인덱스로 이동하며 순회를 계속합니다.
• 배열의 끝에 도달하면 재귀가 종료됩니다.

실행 결과

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

[
    {
        "id": 0,
        "children": [],
        "depth": 0
    },
    {
        "id": 1,
        "children": [
            {
                "id": 2,
                "children": [],
                "depth": 1
            },
            {
                "id": 3,
                "children": [
                    {
                        "id": 4,
                        "children": [],
                        "depth": 2
                    }
                ],
                "depth": 1
            }
        ],
        "depth": 0
    }
]

이처럼 각 객체에 올바른 depth 값이 자동으로 할당된 것을 확인할 수 있습니다. 이러한 재귀 접근 방식은 트리 구조의 메뉴, 카테고리, 파일 시스템처럼 계층형 데이터를 다룰 때 매우 유용하게 활용됩니다.