자바스크립트 객체란?
자바스크립트에서 객체(Object)는 중괄호({}) 안에 키(key)와 값(value)의 쌍으로 데이터를 저장하는 자료구조입니다. 객체 표기법은 다음과 같습니다.
var car = {name:"Benz", "Brand": "Mercedes", model:"open roof"};위 예제는 name, Brand, model이라는 세 가지 속성을 가진 car 객체를 생성합니다. 그렇다면 여기에 벤츠 차량의 가격(price)이나 색상(color)처럼 새로운 요소를 추가하려면 어떻게 해야 할까요?
점 표기법으로 새로운 속성 추가하기
자바스크립트에서 객체에 새로운 요소를 추가하는 가장 간단한 방법은 점 표기법(dot notation)입니다. 객체명 뒤에 마침표(.)와 새로운 키 이름을 붙인 뒤 값을 할당하면, 해당 속성이 객체에 동적으로 추가됩니다.
car.price = "50,000$"; car.color = "Black";
예제
<html>
<body>
<p id="demo"></p>
<script>
var car = {name:"Benz", "Brand": "Mercedes", model:"open roof"};
car.price = "50,000$",
car.color = "Black"
document.write(JSON.stringify(car));
</script>
</body>
</html>출력 결과
{"name":"Benz","Brand":"Mercedes","model":"open roof","price":"50,000$","color":"Black"}정리
실행 결과를 보면 기존 객체의 맨 뒤에 price와 color 속성이 성공적으로 추가된 것을 확인할 수 있습니다. 이처럼 한 번 선언된 객체라도 언제든지 새로운 속성을 자유롭게 추가할 수 있습니다. 참고로 car["price"] = "50,000$"처럼 대괄호 표기법(bracket notation)을 사용해도 동일한 결과를 얻을 수 있으며, 키 이름에 공백이나 특수문자가 포함된 경우에는 대괄호 표기법이 더 유용합니다.