JavaScript에서 JSON 객체 key를 동적으로 다루는 방법

API 연동 작업을 하다 보면
대부분의 경우 응답 구조는 명확한 편이다.

보통은 이런 형태였다.

name, age, phone

 

그래서 프론트 쪽에서는
고정된 key로 접근하는 방식에 크게 고민할 일이 없었다.

그런데 이번에는 다른 업체의 API를 연동하는 과정에서
처음 보는 형태의 응답을 받게 됐다.

---

처음 받아본 API 응답 구조

해당 업체 API에서 내려온 응답은
같은 의미의 값이 숫자를 붙인 key로 반복되는 구조였다.

const keyName = "name";

const data = {
    name1: "aa",
    name2: "bb",
    name3: "cc",
    name4: "dd"
};

---

반복되는 부분이 있어서 동적으로 처리했다

응답을 살펴보니
name1, name2, name3처럼
같은 패턴의 key가 반복되고 있었다.

 

그래서 특정 key를 하나씩 직접 접근하기보다는,
반복문을 이용해 동적으로 처리하는 쪽이 더 자연스럽다고 판단했다.

---

반복되는 key를 동적으로 접근하기

for (let i = 1; i <= 4; i++) {
    console.log(data[keyName + i]);
}

 

keyName + i는 문자열로 결합되어
"name1", "name2" 같은 실제 key가 된다.

 

이 방식으로
API 응답에 들어 있는 값을 순서대로 처리할 수 있었다.

 

외부 업체 API처럼
응답 구조를 그대로 받아야 하는 상황에서는
빠르게 적용하기 좋은 방법이었다.

---

쓰다 보니 보였던 개선 포인트

처음에는 문제없이 잘 동작했다.
다만 코드를 다시 보면서 한 가지가 눈에 들어왔다.

반복 횟수가 코드에 고정돼 있다.

 

지금은 name1부터 name4까지만 내려오지만,
업체 API에서 name5가 추가되면
이 부분은 다시 손봐야 한다.

---

반복 횟수를 데이터 기준으로 처리하기

그래서 이후에는
반복 횟수를 직접 쓰지 않고
실제 응답 데이터 기준으로 처리하는 쪽으로 정리했다.

 

Object.keys(data)
    .filter(key => key.startsWith(keyName))
    .forEach(key => {
        console.log(data[key]);
    });

 

이렇게 하면
외부 업체 API에서 key가 늘어나더라도
JavaScript 쪽 코드는 그대로 유지된다.

 

응답 구조는 그대로 두고,
처리 로직만 조금 더 안전하게 만든 셈이다.

---

정리

• 반복되는 키에 동적 key 접근이 필요했다.
• key 하나씩 처리하기보다 패턴 기준으로 묶는다.