JavaScript에서 중첩된 객체 키의 값을 변경하는 방법

JavaScript에서 중첩된(nested) 객체 내부의 특정 키 값을 변경하려면 점(.) 표기법과 대괄호([]) 표기법을 함께 사용하면 됩니다.

객체의 속성에 접근할 때는 일반적으로 점 표기법을 사용하지만, 배열 요소나 동적인 키 이름에 접근할 때는 대괄호 표기법이 유용합니다. 이 두 가지 방식을 조합하면 깊이 중첩된 구조의 값도 쉽게 수정할 수 있습니다.

예제 코드

아래 예제는 여러 겹으로 중첩된 객체와 배열 안에 있는 isMarried 값을 모두 true로 변경하는 코드입니다.

var details = {
    "customer": {
        "customerDetails": {
            "otherDetails": [
                {
                    "customerDetails": {
                        "isMarried": false
                    },
                },
                {
                    "customerDetails": {
                        "isMarried": false
                    },
                },
                {
                    "customerDetails": {
                        "isMarried": false
                    }
                }
            ]
        }
    }
}
console.log("모든 값이 true로 변경됩니다=");
for (var index = 0; index < details.customer.customerDetails['otherDetails'].length; index++) {
    details.customer.customerDetails['otherDetails'][index].customerDetails['isMarried'] = true;
}
for (var index = 0; index < details.customer.customerDetails['otherDetails'].length; index++) {
    console.log("isMarried:" + details.customer.customerDetails['otherDetails'][index].customerDetails['isMarried']);
}

프로그램 실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 사용합니다.

node fileName.js

여기서는 파일 이름이 demo186.js라고 가정합니다.

실행 결과

위 코드를 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.

PS C:\Users\Amit\javascript-code> node demo186.js
모든 값이 true로 변경됩니다=
isMarried:true
isMarried:true
isMarried:true

코드 설명

동작 원리를 단계별로 살펴보면 다음과 같습니다.

1. details.customer.customerDetails['otherDetails']로 배열에 접근합니다. 점 표기법과 대괄호 표기법이 혼합되어 사용된 것을 볼 수 있습니다.
2. 첫 번째 for 반복문에서 배열의 길이만큼 순회하면서 각 요소의 customerDetails.isMarried 값을 true로 변경합니다.
3. 두 번째 for 반복문에서 변경된 값을 다시 읽어 콘솔에 출력하여 모든 값이 정상적으로 변경되었음을 확인합니다.

이처럼 점 표기법과 대괄호 표기법을 적절히 조합하면 아무리 깊게 중첩된 객체 구조라도 원하는 위치의 값을 손쉽게 조회하고 수정할 수 있습니다.