[STUDY] ECMAScript5 / ES5 (2009) :: Object

 

01. ES5 / ECMAScript 5 (2009) :: Object

반응형

 

 

Object

· Javascript 데이터 유형 중 하나로 다양한 키 모음 및 복잡한 속성들을 저장하는데 사용한다.

※ https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object

 

 

Object.create()

· 지정된 프로토타입 객체 및 속성(property)을 갖는 새 객체를 생성하여 반환한다.

 

Object.create(proto [, propertiesObject])

proto

새로 만든 객체의 프로토타입이어야 할 객체

propertiesObject

자신의 속성이 열거가능한 객체는 해당 속성명으로 새로 만든 객체에 추가될 속성 설명자(descriptor)를 지정한다. 

 

브라우저 호환성

※ 참조 (+Poliyfill) : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create

Object.create() 브라우저 호환성

 

Object.defineProperty()

· 정적 메서드. 객체에 새로운 속성을 직접 정의하거나 이미 존재하는 속성을 수정한 후, 해당 객체를 반환 한다.

 

Object.defineProperty(obj, prop, descriptor)

obj

속성을 정의할 객체

proto

새로 정의하거나 수정하려는 속성의 이름 또는 심볼(Symbol)

descriptor

새로 정의하거나 수정하려는 속성을 기술하는 객체

 

Example. 기본 예제

const object1 = {};

Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false
});

object1.property1 = 77;  // throws an error in strict mode
console.log(object1.property1);  // 42

 

브라우저 호환성

※ 참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

Object.defineProperty() 브라우저 호환성

 

Object.defineProperties()

· 객체에 새로운 속성을 정의하거나 기존의 속성을 수정하고, 해당 객체를 반환한다.

 

Object.defineProperties(obj, props)

obj

속성을 정의하거나 수정할 객체

proto

정의하거나 수정할 속성의 이름을 키로, 그 속성을 서술하는 객체를 값으로 갖는 객체. props의 각 값은 데이터 서술자(data descriptor) 혹은 접근자 서술자(accessor descriptor) 중 하나여야 하며, 동시에 두 유형을 포함할 수 없다

 

Example. 기본 예제

const object1 = {};

Object.defineProperties(object1, {
  property1: {
    value: 42,
    writable: true
  },
  property2: {}
});

console.log(object1.property1);  // 42

 

브라우저 호환성

※ 참조 (+Poliyfill) : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties

Object.defineProperties() 브라우저 호환성

 

Object.getOwnPropertyDescriptor()

· 주어진 객체 자신의 속성에 대한 속성 설명자(descriptor)를 반환한다.

 

Object.getOwnPropertyDescriptor(obj, prop)

obj

속성을 찾을 대상 객체

proto

설명이 검색될 속성명

 

브라우저 호환성

※ 참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor

Object.getOwnPropertyDescriptor() 브라우저 호환성

 

Object.getOwnPropertyNames()

· 전달된 객체의 모든 속성을 배열로 반환한다.

 

Object.getOwnPropertyNames(obj)

obj

반환 받을 열거형 속성과 열거형이 아닌 속성을 가진 객체

 

Example. 기본 예제

const object1 = {  a: 1, b: 2, c: 3 };
console.log(Object.getOwnPropertyNames(object1));  // Array ["a", "b", "c"]

 

브라우저 호환성

※ 참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames

Object.getOwnPropertyNames() 브라우저 호환성

 

Object.getPrototypeOf()

· 지정된 객체의 프로토타입( [[Prototype]] 속성값 ) 을 반환한다.

 

Object.getPrototypeOf(obj)

obj

자신의 프로토타입이 반환되는 객체

 

Example. 기본 예제

var proto = {};
var obj = Object.create(proto);
Object.getPrototypeOf(obj) === proto;  // true

 

브라우저 호환성

※ 참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf

Object.getPrototypeOf() 브라우저 호환성

 

Object.keys()

· 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환한다.

 

Object.keys(obj)

obj

열거할 수 있는 속성 이름들을 반환 받을 객체

 

Example. 기본 예제

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.keys(object1));  // expected output: Array ["a", "b", "c"]

 

브라우저 호환성

※ 참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Object.keys() 브라우저 호환성

 

Object.preventExtensions()

· 새로운 속성이 이제까지 객체에 추가되는 것을 방지한다. (객체의 확장을 막는다.)

 

Object.preventExtensions(obj)

obj

확장 불가로 해야 할 객체

 

Example. 기본 예제

const object1 = {};

Object.preventExtensions(object1);

try {
  Object.defineProperty(object1, 'property1', {
    value: 42
  });
} catch (e) {
  console.log(e);  // expected output: TypeError: Cannot define property property1, object is not extensible
}

 

브라우저 호환성

※ 참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions

Object.preventExtensions() 브라우저 호환성

 

Object.isExtensible()

· 객체가 확장 가능 여부를 판별 결과(Boolean)를 반환한다.

 

Object.isExtensible(obj)

obj

판별할 객체

 

Example. 기본 예제

const object1 = {};

console.log(Object.isExtensible(object1));  // true

Object.preventExtensions(object1);
console.log(Object.isExtensible(object1));  // false

 

브라우저 호환성

※ 참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/isExtensible

Object.isExtensible() 브라우저 호환성

 

Object.seal()

· 객체를 밀봉한다. 밀봉된 객체는 새로운 속성의 추가 및 기존 속성의 변경이 불가능하다. 쓰기 가능한 속성은 변경이 가능하다. ( Object.freeze() 와 차이점 )

 

Object.seal(obj)

obj

봉인할 객체

 

Example. 기본 예제

const object1 = {
  property1: 42
};

Object.seal(object1);
object1.property1 = 33;
console.log(object1.property1);  // 33

delete object1.property1;  // cannot delete when sealed
console.log(object1.property1);  // 33

 

브라우저 호환성

※ 참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/seal

Object.seal() 브라우저 호환성

 

Object.isSealed()

· 객체가 봉인됐는지 판별 결과(Boolean)를 반환한다.

 

Object.isSealed(obj)

obj

판별할 객체.

 

Example. 기본 예제

const object1 = {
  property1: 42
};

console.log(Object.isSealed(object1));  // false

Object.seal(object1);
console.log(Object.isSealed(object1));  // true

 

브라우저 호환성

※ 참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/isSealed

Object.isSealed() 브라우저 호환성

 

Object.freeze()

· 객체를 동결한다. 동결된 객체는 더 이상 변경될 수 없다.

 

Object.freeze(obj)

obj

동결할 객체

 

Example. 기본 예제

const obj = {
  prop: 42
};

Object.freeze(obj);

obj.prop = 33;  // Throws an error in strict mode
console.log(obj.prop);  // 42

 

브라우저 호환성

※ 참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze

Object.freeze() 브라우저 호환성

 

Object.isFrozen()

· 객체가 동결됐는지 판별 결과(Boolean)를 반환한다.

 

Object.isFrozen(obj)
obj

판별할 객체

 

Example. 기본 예제

const object1 = {
  property1: 42
};

console.log(Object.isFrozen(object1));  // false

Object.freeze(object1);
console.log(Object.isFrozen(object1));  // true

 

브라우저 호환성

※ 참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/isFrozen

Object.isFrozen() 브라우저 호환성

 

---

 

[STUDY] ECMAScript - 연혁(버전) 및 정리

[STUDY] ECMAScript - 연혁(버전) 및 정리

 

[STUDY] ECMAScript5 / ES5 (2009)

[STUDY] ECMAScript5 / ES5 (2009)