JavaScript에서 객체(Object)는 키(key)와 값(value)의 쌍으로 데이터를 저장하는 자료구조입니다. 객체를 생성한 이후에도 언제든지 새로운 속성(property)을 동적으로 추가하거나, 기존 속성의 값을 읽고, 더 이상 필요하지 않은 속성은 삭제할 수 있습니다.
객체 속성 다루기의 세 가지 기본 작업
- 속성 추가: 점 표기법(
obj.key = value) 또는 대괄호 표기법(obj['key'] = value)을 사용합니다. - 속성 접근:
obj.key또는obj['key']형태로 값을 읽어올 수 있습니다. - 속성 삭제:
delete연산자를 사용하면 객체에서 해당 속성이 제거됩니다.
예제
다음은 JavaScript 객체 속성을 추가하고, 접근한 뒤, 삭제하는 전체 예제 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript 객체 속성 추가, 접근, 삭제</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="Btn">CHECK</button>
<h3>위 버튼을 클릭하면 속성이 추가되고, 접근된 후 삭제됩니다.</h3>
<script>
let resEle = document.querySelector(".result");
let obj = {
firstName: 'Rohan',
lastName: 'Sharma',
Age: '22',
}
document.querySelector(".Btn").addEventListener("click", () => {
obj.school = 'Ryan International';
resEle.innerHTML = 'school 속성 추가 : ' + obj.school + '<br>';
resEle.innerHTML += '속성 접근 : obj.firstName = ' + obj.firstName + '<br>';
delete obj.firstName;
resEle.innerHTML += 'firstName 속성 삭제 : ' + obj.firstName + '<br>';
});
</script>
</body>
</html>
출력
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
CHECK 버튼을 클릭하면 아래와 같이 속성의 추가, 접근, 삭제 결과가 초록색 영역에 순서대로 표시됩니다.
핵심 정리
obj.school = 'Ryan International'처럼 값을 할당하기만 해도 새로운 속성이 객체에 동적으로 추가됩니다.obj.firstName처럼 점 표기법을 사용하면 속성 값에 간편하게 접근할 수 있습니다.delete obj.firstName을 실행하면 firstName 속성이 객체에서 완전히 제거되며, 이후 해당 속성에 접근하면undefined가 반환됩니다.