JSON 객체 안에 포함된 배열을 수정하는 방식은 일반 객체의 속성을 수정하는 것과 동일합니다. 즉, 점 표기법(dot notation)이나 대괄호 표기법으로 해당 배열에 접근한 뒤, 원하는 인덱스에 새로운 값을 할당하면 됩니다.
예제
아래 예제에서는 companies 배열의 첫 번째 요소가 처음에는 'Tesla'입니다. 하지만 첫 번째 요소를 'SolarCity'로 수정한 후, 변경 전과 변경 후의 결과를 화면에 출력하여 비교합니다.
<html>
<body>
<script>
var res1 = "";
var res2 = "";
var obj = {
"name":"Elon musk",
"age":48,
"companies": [
"Tesla", "Spacex", "Neuralink"
]
}
for (var i in obj.companies) {
res1 += obj.companies[i] + "</br>"
}
document.write("Before change: " +" "+res1);
obj.companies[0] = "SolarCity";
for (var i in obj.companies) {
res2 += obj.companies[i] + "</br>"
}
document.write("After change:" +" "+res2);
</script>
</body>
</html>코드 설명
먼저 obj라는 객체를 정의하고, 그 안에 companies라는 이름의 배열을 넣습니다. 이후 for...in 반복문을 사용해 배열의 모든 요소를 순회하며 문자열로 조합한 뒤 출력합니다.
핵심은 obj.companies[0] = "SolarCity"; 구문입니다. 이처럼 인덱스를 지정해 값을 직접 대입하면 배열의 특정 요소가 간단히 수정됩니다. 수정이 완료되면 다시 한번 반복문으로 배열을 순회하여 변경된 결과를 확인할 수 있습니다.
출력 결과
Before change: Tesla Spacex Neuralink After change: SolarCity Spacex Neuralink
출력 결과를 보면 변경 전에는 'Tesla'였던 첫 번째 요소가, 수정 후에는 'SolarCity'로 바뀐 것을 확인할 수 있습니다. 나머지 요소인 'Spacex'와 'Neuralink'는 그대로 유지됩니다.
정리
JSON 객체 내부의 배열 요소를 수정하려면 다음 단계만 기억하면 됩니다.
1. 점 표기법(obj.companies)으로 배열에 접근합니다.
2. 수정하고 싶은 요소의 인덱스를 지정합니다.
3. 새로운 값을 대입 연산자(=)로 할당합니다.
이 방법은 중첩된 객체나 더 깊은 구조의 데이터에서도 동일하게 적용할 수 있으므로, 실무에서 API 응답 데이터를 다룰 때 매우 유용하게 활용됩니다.