JavaScript에서 중첩(nested) 객체의 속성을 수정하는 방법은 크게 두 가지가 있습니다. 하나는 점 표기법(Dot Notation)이고, 다른 하나는 대괄호 표기법(Bracket Notation)입니다. 두 방식의 기능은 완전히 동일하며, 차이는 오직 표기 방식뿐입니다.
아래에서 각각의 방법을 예제와 함께 자세히 살펴보겠습니다.
점 표기법(Dot Notation)
점(.)을 이용해 객체의 경로를 순서대로 연결하여 원하는 깊이의 속성에 접근하고 값을 변경할 수 있습니다. 코드가 간결하고 가독성이 좋아 가장 널리 사용되는 방식입니다.
예제
다음 예제에서 person 객체의 address 내부에 있는 country 속성은 처음에 'England'로 설정되어 있습니다. 점 표기법을 사용해 이 값을 'India'로 변경해 보겠습니다.
<html>
<body>
<script>
var person;
var txt = '';
person = {
"name":"Ram",
"age":27,
"address": {
"houseno":123,
"streetname":"Baker street",
"country":"England"
}
}
document.write("Before change : " + " " + person.address.country);
person.address.country = "India";
document.write("</br>");
document.write("After change : " + " " + person.address.country);
</script>
</body>
</html>실행 결과
Before change : England After change : India
person.address.country처럼 최상위 객체부터 하위 속성까지 점으로 연결하기만 하면, 몇 단계를 중첩했더라도 손쉽게 값에 접근하고 수정할 수 있습니다.
대괄호 표기법(Bracket Notation)
대괄호([]) 안에 속성 이름을 문자열로 넣어 접근하는 방식입니다. 속성 이름에 공백이나 특수문자가 포함된 경우, 또는 변수에 담긴 동적인 키로 속성에 접근해야 할 때 특히 유용합니다.
예제
다음 예제에서는 대괄호 표기법을 사용해 country 속성의 값을 'England'에서 'India'로 변경합니다.
<html>
<body>
<script>
var person;
var txt = '';
person = {
"name":"Ram",
"age":27,
"address": {
"houseno":123,
"streetname":"Baker street",
"country":"England"
}
}
document.write("Before change : " + " " + person.address["country"]);
person.address.country = "India";
document.write("</br>");
document.write("After change : " + " " + person.address["country"]);
</script>
</body>
</html>실행 결과
Before change : England After change : India
정리
두 방식 모두 중첩 객체의 속성을 읽고 쓰는 데 동일하게 사용할 수 있습니다. 일반적인 경우에는 간결한 점 표기법을, 속성 이름이 동적으로 결정되거나 공백·특수문자를 포함하는 경우에는 대괄호 표기법을 사용하는 것이 좋습니다.