5년 이상 전

자바스크립트 객체

자바스크립트의 기본 데이터 타입은 객체다. 객체는 일종의 복합체로 원시 타입의 값 또는 다른 객체들을 묶어 이름으로 저장하고, 값을 가져올 수 있다. 다시 말해 객체는 이름과 값으로 구성된 프로퍼티들의 정렬되지 않은 집합 이다.

객체는 고유 프로퍼티를 유지하는 것 외에 프로토타입이라고 하는 다른 객체의 프로퍼티를 상속받는다. 객체의 메서드들은 일반적으로 상속받은 프로퍼티이고, 이를 프토로타입 상속이라고 한다.

객체 속성

  • prototype은 상속받은 프로퍼티들을 가진 객체들을 참조한다.
  • class는 객체의 자료형(타입)을 특정짓는 문자열이다.
  • extensible 속성(ECMAScript 5)은 객체에 새 프로퍼티를 추가할 수 있는지를 결정한다.

프로퍼티 속성

  • 쓰기(Writable) 속성은 프로퍼티 값의 수정 가능 여부를 결정한다
  • 열거(enmerable) 속성은 프로퍼티의 이름을 for/in루프에서 읽을수 있는지를 결정한다.
  • 설정(cofigurable) 속성은 프로퍼티의 삭제 가능 여부와 프로퍼티의 속성 변경 가능 여부를 설정한다.

선언

리터럴 문법
var empty = {};

var hotelsInfo = {
  cityName: '오사카',
  hotelName: '오사카안에있는호텔',
  data: new Date().toISOString().substr(0,10)
}
new
var o = new Object();
var a = new Array();
var d = new Date();
var r = new RegExp("js");
  1. new 연산자는 객체를 만들고 반드시 초기화한다.
  2. new 키워드 다음에는 반드시 함수 호출문이 와야한다.
  3. 이때 호출되는 함수를 생성자(constructor)라고 한다.
  4. 코어자바스크립트는 기본 타입에 대한 생성자를 내장하고 있다.
프로토타입
  1. 자바스크립트의 모든 객체인 또 다른 자바스크립트의 객체인 prototype과 연관되어있다.
  2. 객체는 프로토타입으로부터 프로퍼티들을 상속받는다.
  3. 객체 리터럴로 생성된 모든 객체는 프로토타입 객체가 같으며, Object.prototype으로 참조할 수 있다.
  4. new 키워드를 사용해 생성자를 호출하면 생성자 함수의 프로토타입이 생성된 객체의 프로토타입이 된다.
  5. Object.prototype은 아무 프로토타입도 상속받지 않는다.
  6. 다른 프로토타입 객체들은 모두 Object.prototype을 상속받는다.
  7. 이렇게 프로토타입 객체들이 연결된 것을 프로토타입 체인이라고 한다.
var a = new Date();
var b = {};

console.log(a.__proto__); // Date 객체 프로토타입
console.log(a.__proto__.__proto__); // Object 프로토타입
console.log(b.__proto__); // Obeject 프로토 타입

Object.creat()
function inherit(p) {
  if(p == null) throw TypeError();
  if(Object.create)
    return Object.create(p);
  var type = typeof p;

  if(type !== object && t !== "function") throw TypeError();

  function f() {};
  f.prototype = p;
  return new f();
} 

접근 && 삭제

일반적인 접근 방법
var hotelsInfo = {
  cityName: '오사카',
  hotelName: '오사카안에있는호텔',
  data: new Date().toISOString().substr(0,10)
}


console.log(hotelsInfo.cityName) // '오사카'
console.log(hotelsInfo['hotelName']) // '오사카안에있는호텔'

delete hotelsInfo.cityName;

console.log(hotelsInfo.cityName); // undefined

for(let key in hotelsInfo) {
  console.log(key);
}

Object.keys(hotelsInfo);

Object.getOwnPropertyNames(hotelsInfo);
  • for...in 루프 -> 이 방법은 객체와 객체의 프로토타입 체인 상의 열거 가능한 모든 프로퍼티를 순회한다.
  • Object.keys(o) -> 이 메소드는 객체 자체에 속한(즉 프로토타입 체인 상에 있는 것은 제외) 열거 가능한 프로퍼티 이름들("keys")의 배열을 반환한다.
  • Object.getOwnPropertyNames(o) -> 이 메소드는 객체 자체의 모든 프로퍼티(열거 가능 여부에 무관) 이름들의 배열을 반환한다.

참고

리터럴 문법 속도 비교

자바스크립트 상속의 역사