안녕하세요. Tay 입니다.
이전 글에서 객체 개념과 생성에 대해 배웠습니다.
이번에는 객체의 프로퍼티에 접근하여 읽기 , 쓰기 , 수정 , 삭제 에 대해 알아보겠습니다.
객체 프로퍼티 접근 방법
- 대괄호 [ ] 표기법
예시) console.log(person["name"]); - 마침표 . 표기법
예시) console.log(person.name);
프로퍼티 읽기
1) index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- <script src="objects.js"></script> -->
<script src="property.js"></script>
</body>
</html>원하면 주석빼고 새롭게 만들어도 되고, 필자는 이전의 Objects 의 html 을 그대로 사용했다.
2) property.js
// make object
let kim = {
name : "geuntae",
favFood : "chicken"
}
// read property
console.log(kim.name); // 1
console.log(kim['name']); // 2
console.log(kim.hateFood); // 3
1, 2 는 각각 마침표, 대괄호 접근 법을 사용했다.
3은 없는 프로퍼티를 읽어봤다. 과연 결과는 어떻게 될까?
결과 :
1 번과 2번의 결과는 같다.
3번은 존재하지 않는 객체의 프로퍼티 라서 undefined 값이 출력 됐다.
프로퍼티 수정
1) property.js
// make object
let kim = {
name : "geuntae",
favFood : "chicken"
}
// read property
console.log(kim.name);
console.log(kim['name']);
console.log(kim.hateFood);
// modify property
kim.favFood = "pizza";
console.log(kim.favFood);
console.log(kim["favFood"])kim.favFood 를 chicken 에서 pizza로 수정했다.
결과를 확인해보자.
결과 :
이제는 좋아하는 음식이 pizza 로 변경됐다.
프로퍼티 생성(쓰기)
1) property.js
// make object
let kim = {
name : "geuntae",
favFood : "chicken"
}
// read property
console.log(kim.name);
console.log(kim['name']);
console.log(kim.hateFood);
// modify property
kim.favFood = "pizza";
console.log(kim.favFood);
console.log(kim["favFood"])
// make property
kim.favColor = "black"
console.log(kim.favColor);프로퍼티 favColor 를 동적 생성 해봤다.
결과는 어떻게 될까?
결과 :
kim 객체에 동적으로 생성한 favColor 가 정상적으로 출력 되는 것을 확인할 수 있다.
※ 프로퍼티 수정 과 생성 의 형식은 같지만, 이미 있는 프로퍼티의 경우 수정이되고 없는 프로퍼티의 경우 새로운 프로퍼티가 동적으로 생성된 후 값이 할당 되는 것을 알 수 있다!
프로퍼티 삭제
객체의 프로퍼티를 delete 연산자를 이용해서 즉시 삭제할 수 있다.
1) property.js
// make object
let kim = {
name : "geuntae",
favFood : "chicken"
}
// read property
console.log(kim.name);
console.log(kim['name']);
console.log(kim.hateFood);
// modify property
kim.favFood = "pizza";
console.log(kim.favFood);
console.log(kim["favFood"])
// make property
kim.favColor = "black"
console.log(kim.favColor);
// delete property
console.log(kim);
delete kim.favFood; // 1
console.log(kim);
delete kim;
console.log(kim); // 2삭제를 하기 전에 console.log 로 kim 객체를 출력하고 아래 두개를 실행한 결과를 확인해보자.
- delete 연산자로 favFood 프로퍼티를 삭제해본다.
- delete 연산자로 kim 객체를 삭제해본다.
결과 :
- kim 은 name , favFood , favColor 프로퍼티들을 가지고 있다.
- delete kim.favFood 로 favFood 프로퍼티가 삭제 됐다.
- delete kim 으로 객체를 삭제하려고 했으나, 삭제되지 않는다.
즉, delete 연산자는 프로퍼티를 삭제하지만, 객체 자체를 삭제하지는 못한다.
이 글은 개인 공부목적으로 작성되었습니다.
정보가 잘못 되거나 궁금한 사항은 댓글로 부탁드립니다!! 읽어주셔서 감사합니다.
'JavaScript > Basic-Javascript' 카테고리의 다른 글
| 자바스크립트 정리하며 배우기[09] - 참조(reference) 타입 개념 및 특성 (0) | 2020.01.07 |
|---|---|
| 자바스크립트 정리하며 배우기[08] - for in 문 객체 출력 (0) | 2020.01.06 |
| 자바스크립트 정리하며 배우기[06] - 객체 개념 및 프로퍼티 생성, 리터럴 형식, 생성자 함수 (0) | 2020.01.03 |
| 자바스크립트 정리하며 배우기[05] - Data type[참조 타입(reference) - 객체 , 배열 , 함수] 간단 개념 정리 (0) | 2020.01.02 |
| 자바스크립트 정리하며 배우기[04] - Data type[기본 타입(primitive) - null 과 undefined 개념 및 차이] (0) | 2020.01.02 |
