JavaScript로 중첩된 JSON 객체에서 키 값을 조회하는 방법

중첩된 JSON 객체에서 특정 키의 값 찾기

실제 개발 환경에서는 다음과 같이 객체 배열이 중첩된 JSON 구조를 자주 다루게 됩니다.

const obj = {
    "prop": [
        {
            "key": "FOO",
            "value": "Foo is wonderfull, foo is great"
        },
        {
            "key": "BAR",
            "value": "Bar is bad, really bad"
        }
    ]
};

여기서 우리가 작성해야 할 함수는 두 개의 인자를 받습니다. 첫 번째 인자는 위와 같은 중첩된 JSON 객체이고, 두 번째 인자는 찾고자 하는 키 문자열입니다.

함수는 전달받은 키에 해당하는 요소를 찾아, 그 요소가 가진 value 속성의 값을 반환해야 합니다. 만약 일치하는 키가 존재하지 않는다면 빈 문자열을 반환하도록 처리하면 안전합니다.

구현 예제

이를 구현한 코드는 다음과 같습니다.

const obj = {
    "prop": [
        {
            "key": "FOO",
            "value": "Foo is wonderfull, foo is great"
        },
        {
            "key": "BAR",
            "value": "Bar is bad, really bad"
        }
    ]
};
const findByKey = (obj, key) => {
    const arr = obj['prop'];
    if(arr.length){
        const result = arr.filter(el => {
            return el['key'] === key;
        });
        if(result && result.length){
            return result[0].value;
        }
        else{
            return '';
        }
    }
}
console.log(findByKey(obj, 'BAR'));

실행 결과

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

Bar is bad, really bad

코드 설명

동작 과정을 단계별로 살펴보면 다음과 같습니다.

먼저 obj['prop']로 객체 배열에 접근한 뒤, 배열의 길이가 0보다 큰지 확인합니다. 이후 filter() 메서드를 사용하여 각 요소의 key 속성이 두 번째 인자로 전달된 키와 일치하는 항목만 걸러냅니다.

필터링된 결과 배열에 요소가 하나 이상 존재하면 첫 번째 요소의 value 값을 반환하고, 그렇지 않으면 빈 문자열을 반환합니다.

find() 메서드를 활용한 더 간결한 방법

참고로, 일치하는 단 하나의 요소만 필요하다면 filter() 대신 find() 메서드를 사용하는 것이 더 효율적입니다. find()는 조건을 만족하는 첫 번째 요소를 발견하는 즉시 순회를 중단하기 때문입니다.

const findByKey = (obj, key) => {
    const found = obj.prop.find(el => el.key === key);
    return found ? found.value : '';
};
console.log(findByKey(obj, 'FOO'));

이 방식은 코드도 간결해지고 불필요한 배열 생성을 피할 수 있어 성능 면에서 유리합니다.