2023. 2. 2. 00:59
객체(Object)
- 정의
객체는 관련된 데이터와 함수의 집합이다. 여러 데이터와 함수로 이루어져 있으며
객체 내부에 존재할때는 주로 "프로퍼티" 또는 "메소드"라 부른다. - 속성
여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입으로
Key / Value 를 Pair로 저장할 수 있는 구조이다.
추가내용: Javascript는 객체기반의 스크립트 언어이다.
객체 만들기
객체를 만들때는 변수를 선언해주고 {} 를 할당해주면 된다.
let obj = {};
표기법
- 마침표 표기법 (dot notation)
프로퍼티 접근 연산자 . 을 사용한다. - 대괄호 표기법 (bracket notation)
프로퍼티 접근연산자 [ ] 를 사용한다.
프로퍼티를 반드시 문자열로 표기해야 동작한다.
let obj = {
name: 'bob smith'
};
// dot notation
console.log(obj.name); // bob smith
// bracket notation
console.log(obj['name']); // bob smith
// bracket notation은 프로퍼티를 반드시 문자열로 표기해주어야 한다.
- 우선 여러 기능을 사용해보기 위해서 예시데이터를 넣어 줬다.
let obj = {
name: [
"bob", "smith",
{bob: {smith: {bobSmith: "is name"}}},
],
age: 32,
gender: 'male',
interests: ['music', 'skiing'],
bio: function() {
alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
},
greeting: function() {
alert('Hi! I\'m ' + this.name[0] + '.');
}
};
1. obj객체에 프로퍼티 추가
/* 객체변수.새로만들어줄key = value; */
obj.tall = 179;
/* 함수형 프로퍼티 추가도 쉽게 가능하다 */
const sayY = obj.sayYeah = () => { alert( 'Yeah~~~!!!' ) }; //새로운 객체멤버 생성
obj.sayYeah(); // Yeah~~~!!!
2. 객체 ↔ 스트링 변환
const changeString = JSON.stringify(obj.name); // 객체를 스트링으로 변환.
console.log("객체 => 스트링",changeString);
// JSON.객체 => 스트링 ["bob","smith",{"bob":{"smith":{"bobSmith":"is name"}}}]
const stringToJsonObject = JSON.parse(`{ "name": "John Doe", "age":30 }`); //스트링을 객체로 변환.
console.log("스트링 => 객체",stringToJsonObject);
// {name: 'John Doe', age: 30}
// age: 30
// name: "John Doe"
// ▶ [[Prototype]] : Object
3. 객체 프로퍼티 삭제하기
예제 1
console.log("name 삭제전, name:",obj.name);
// name 삭제전, name: ["bob", "smith", {...}]
delete obj.name[0]; //프로퍼티 삭제
console.log("name 삭제후, name:",obj.name);
// name 삭제후, name: ["비어있음", "smith", {...}]예제2
console.log("name 삭제전, name:",obj.name);
/*
name 삭제전, name:
0: "bob"
1: "smith"
2:
bob:
smith:
*/
delete obj.name[2].bob.smith.bobSmith; //해당프로퍼티 삭제
console.log("name 삭제후, name:",obj.name);
/*
name 삭제후, name:
0: "bob"
1: "smith"
2:
bob:
smith:
*/
실습 해보면서 특이한 점을 발견했다. 분명 삭제를 하기전과 삭제 후의 콘솔로그가 달라야할텐데...?
이상하게도 둘은 같은 로그를 나타내고 있었다. 이를 통해서 name 프로퍼티에 겹객체를 넣어 둔 것이
이러한 작동을 일으켰다는 것을 유추할 수 있었다.
- 이를 통해 유추할 수 있는 내용...
가장 먼저 선언된 일반적인 키를 삭제하는 경우엔 콘솔로그와 동기적으로 작동하지만
객체 내부의 객체키(겹객체)를 삭제하는경우. 내부의 키가 모두 삭제된 이후에 콘솔로그가
작동하는 것을 알 수 있었다. (콘솔로그와 비동기적으로 작동)
이 현상에 대한 원인은 추 후 학습하게 된다면 따로 내용을 추가해야겠다.
혹시 이 게시글을 보고 계신분들중 원인을 알고 계신분은 댓글로 남겨주시면 감사드리겠습니다!
4. 구조분해할당을 통한 프로퍼티 분류
const { name, ...others } = obj;
console.log("name array :",name); // name array : (3) ['bob', 'smith', {…}]
console.log("name :",name[0] + " " + name[1]); // name : bob smith
console.log("others :",others);
// others : {age: 32, gender: 'male', interests: Array(2), bio: ƒ, greeting: ƒ, …}구조분해할당을 사용하여 name을 받고 spread연산자를 사용하여 name을 제외한
obj내의 모든 프로퍼티의 집합을 others라는 새로운 변수로서 할당시켜준 것이다.
5. 객체의 모든 key와 value
const objKeys = Object.keys(obj);
const objValues = Object.values(obj);
console.log( objKeys );
// (7) ['name', 'age', 'gender', 'interests', 'bio', 'greeting', 'sayYeah']
console.log( objValues );
/*
(7) [Array(3), 32, 'male', Array(2), ƒ, ƒ, ƒ]
0: (3) ['bob', 'smith', {…}]
1: 32
2: "male"
3: (2) ['music', 'skiing']
4: ƒ ()
5: ƒ ()
6: () => { alert( 'Yeah~~~!!!' ) }
length: 7
*/
6. 프로퍼티의 존재여부 확인하기
// includes를 통한 존재여부 확인
const isExist_name = Object.keys(obj).includes('name');
const isExist_hobby = Object.keys(obj).includes('hobby');
console.log("------------------------------------");
console.log("includes를 통한 존재여부 확인!");
console.log("name의 존재여부 :",isExist_name,"\nhobby의 존재여부: ",isExist_hobby);
console.log("------------------------------------");
/*
------------------------------------
includes를 통한 존재여부 확인!
name의 존재여부 : true
hobby의 존재여부: false
------------------------------------
*/
// key in obj를 통한 존재여부 확인
obj.hobby = undefined; //undefined값을 가진 프로퍼티 추가
const isExist_name_in = 'name' in obj;
const isExist_hobby_in = 'hobby' in obj;
console.log("key in obj를 통한 존재여부 확인!");
console.log("name의 존재여부 :",isExist_name_in,"\nhobby의 존재여부: ",isExist_hobby_in);
console.log("------------------------------------");
/*
------------------------------------
key in obj를 통한 존재여부 확인!
name의 존재여부 : true
hobby의 존재여부: true
------------------------------------
*/
//undefined 값을 가진다고 프로퍼티가 존재하지 않는 것이 아니다. 그러므로 true를 반환한다
// 가장 정확한 존재여부 확인 방법은 hasOwnProperty함수를 사용하는 것이다.
// 해당 객체의 직접적인 속성만을 검사하기 때문이다.
const hasOwnName = obj.hasOwnProperty('name');
const hasOwnHobby = obj.hasOwnProperty('hobby');
console.log("hasOwnProperty를 통한 존재여부 확인!");
console.log("name의 존재여부 :",hasOwnName,"\nhobby의 존재여부: ",hasOwnHobby);
console.log("------------------------------------");
/*
------------------------------------
hasOwnProperty를 통한 존재여부 확인!
name의 존재여부 : true
hobby의 존재여부: true
------------------------------------
*/위 내용에서 key in obj는 과거에 Object의 prototype 마저도 체크하기 때문에
프로퍼티의 존재여부를 크게 착각할 수도 있었다. 하지만 학습을 하는 과정에서는
적용 되지 않았고, Javascript Document에서 찾아보니 현재는 프로토타입체크를
지원하지 않게 되어 더 이상 상관없게 되었다.
마치며...
객체에 대해서 더 자세하게 학습을 진행하면서 웹개발이 주목적인 자바스크립트에선 학습우선순위 0순위이지 않을까? 라는 생각이 들었다. 그리고 데이터를 다루는 데에 있어 아주 유용한 기능들이 매우 편리하게 사용할 수 있도록 구현되어 있어 더욱 마음에 들었다. 다음포스팅은 객체와 마찬가지로 데이터다루기에 적합한 배열에 대해서 포스팅을 해봐야겠다.
'Frontend > JavaScript' 카테고리의 다른 글
| [ Javascript - Array ] 여러 객체를 가진 배열에서 중복 체 제거 (2) | 2024.04.04 |
|---|---|
| [ Javascript ES6 ] 변수 값 교환하기 (2) | 2024.01.01 |
| [ Javascript - Operator ] 자바스크립트 연산자 (0) | 2023.02.05 |
| [ Javascript - Array ] 배열 (2) | 2023.02.04 |
