JavaScript에서 id 속성으로 중첩된 복잡한 객체 검색하기

문제 정의

실제 개발 환경에서는 다음과 같이 subList 배열 안에 또 다른 객체들이 중첩되어 있는, 여러 계층 구조를 가진 복잡한 JSON 객체를 자주 접하게 됩니다.

const obj = {
    "id": "0001",
    "fieldName": "sample1",
    "fieldValue": "0001",
    "subList": [
        {
            "id": 1001,
            "fieldName": "Sample Child 1",
            "fieldValue": "1001",
            "subList": []
        },
        {
            "id": 1002,
            "fieldName": "Sample Child 2",
            "fieldValue": "1002",
            "subList": []
        }
    ]
}

우리가 작성해야 하는 것은 이러한 객체와 하나의 키-값 쌍(반드시 "id" 키-값 쌍)을 인자로 받아, 해당 키/값 쌍을 포함하고 있는 전체 하위 객체를 반환하는 JavaScript 함수입니다.

해결 접근 방식

객체의 중첩 깊이가 정해져 있지 않기 때문에 재귀(recursion)를 활용하는 것이 가장 효율적입니다. 함수의 동작 순서는 다음과 같습니다.

1. 검색 조건 객체에서 첫 번째 키("id")를 추출합니다.
2. 현재 객체의 해당 키 값이 검색 값과 일치하면 현재 객체를 그대로 반환합니다.
3. 일치하지 않으면 subList의 각 자식 객체에 대해 재귀적으로 검색을 수행합니다.
4. Array.prototype.some() 메서드를 사용해 결과를 찾는 즉시 탐색을 중단하고, 최종 결과를 반환합니다.

구현 코드

이 로직을 적용한 전체 코드는 다음과 같습니다.

function searchById(searchKey, obj) {
    let key = Object.keys(searchKey)[0];
    let res;
    if (obj[key] === searchKey[key]) {
        return obj;
    };
    obj.subList.some(function (a) {
        res = searchById(searchKey, a);
        return res;
    });
    return res;
}
console.log(searchById({id: 1002}, obj));

실행 결과

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

{
    id: 1002,
    fieldName: 'Sample Child 2',
    fieldValue: '1002',
    subList: []
}

출력 결과를 보면, 최상위 객체에는 존재하지 않지만 subList 안에 중첩되어 있는 id: 1002인 객체가 성공적으로 검색되어 반환된 것을 확인할 수 있습니다. 이 함수는 재귀적으로 동작하기 때문에 subList가 몇 단계로 깊게 중첩되어 있더라도 원하는 객체를 빠짐없이 탐색하여 찾아낼 수 있다는 장점이 있습니다.