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

Posted on Edited on In , Word count in article: 210 Reading time ≈ 1 mins.

오브젝트 생성

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

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"]
//]