자바스크립트 오브젝트 Object 특징

오브젝트 생성

오브젝트는 브레이스 {} 로 생성합니다.

1
2
3
4
const ecom = {
name: 'coupang',
developer: 'CPNG'
};

속성 추가 삭제

1
2
3
ecom.year = 2021;

delete ecom.year;

속성 접근방법

1
2
console.log(ecom.name);
console.log(ecom["name"]);

toString() 으로 변동적인 key 값을 줄 수 있습니다.

1
2
3
4
5
6
7
const getKey = {
toString() {
return 'developer'
}
}

console.log(ecom[getKey]);

상속

object 는 Object 를 상속 받습니다

1
2
3
4
5
6
7
8
9
10
11
ecom.__proto__ === Object.prototype;

console.log(ecom.toString);
console.log(ecom.toLocaleString);

const prototypeObj = {};
const obj = Object.create(prototypeObj);
console.log(obj.__proto__ === prototypeObj);

const obj = Object.create(null);
console.log(obj.__proto__ === undefined);

현재오브젝트를 수정해도 prototype 는 영향을 받지 않습니다

1
2
3
4
5
const obj = {};
console.log(obj.toString);

delete obj.toString
console.log(obj.toString);

클래스 접근방법

1
2
3
4
5
6
7
class Ecom{
constructor(name){
this.name = name;
}
}
const ecom = new Ecom('Coupang');
console.log(ecom.__proto__ === Ecom.prototype);

다른 오브젝트와 function을 속성으로 가질 수 있습니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//다른 오브젝트 추가 예제
const ecom = {
name : 'Coupang',
developer: {
name: 'CPNG',
country: 'Korea'
}
};
//function 추가 예제
const ecom = {
name : 'Coupang',
toString: function(){
return this.name;
}
};
console.log(ecom.toString());

frozen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const ecom = Object.freeze({
name: 'Coupang',
});
ecom.name = "LotteOn";
//read only

//prototype freeze
const prototype = Object.freeze({
toString : function (){
return this.name;
}
});

const ecom = Object.create(prototype);
ecom.name = 'Coupang';
ecom.toString = function (){
return `Ecom: ${this.name}`;
};

keys, values, entries

keys

1
2
3
4
5
6
const ecom = {
name: 'coupang',
developer: 'CPNG'
};
console.log(Object.keys(ecom));
//["name", "developer"]

values

1
2
console.log(Object.values(ecom));
//["coupang", "CPNG"]

entries

1
2
3
4
5
console.log(Object.entries(game));
//[
//["name", "coupang"],
//["developer", "CPNG"]
//]