객체에 대한 이해

6장 객체에 대한 이해

이 포스팅은 "프론트엔드 개발자를 위한 자바스크립트(2013 인사이트, 한선용 옮김)"에서 발췌 요약한 것입니다.
 

6.1.1 프로퍼티타입
6.1.2 다중 프로퍼티 정의
6.1.3 프로퍼티 속성 읽기

객체지향(Object-oriented) 언어는 일반적으로 클래스를 통해 같은 프로퍼티와 메서드를 가지는 객체를 여러개 만드는 특징이 있는데 ECMAscript는 객체를 "프로퍼티 순서 없는 컬렉션이며 각 프로퍼티는 원시 값이나 객체, 함수를 포함한다" 는 것이다.
이것은 객체가 특별한 순서없이 값의 배열이라는 의미로 ECMAscript객체를 이름-값 쌍의 그룹이며 각 값은 데이터나 함수가 되는 해시 테이블이라고 이해하면 된다.

객체를 만드는 가장 단순한 방법은 Object의 인스턴스를 만들고 여기에 프로퍼티와 메서드를 추가하는 방법이다.

var person = {
  name : "nicholas",
  age " 29",
  sayName : function(){
    console.log(this.name);
  }
}

6.1.1 프로퍼티타입
프로퍼티의 특징은 내부적으로만 유효한 속성에 따라 자바스크립트 엔진 내부에서 구현하는 것으로 정의했으므로 이들 속성에 직접적으로 접근할수 있는 방법은 없다.
프로퍼티에는 데이터 프로퍼티와 접근자 프로퍼티 두가지 타입이 있고 이들 속성은 [[Enumerable]] 처럼 이름을 대괄호로 감싸서 나타낸다.


데이터 프로퍼티
데이터 프로퍼티는 데이터 값에 대한 단 하나의 위치를 포함하여 이 위치에서 값을  읽고 쓴다.

[[Configurable]] - 해당 프로퍼티가 delete를 통해 삭제하거나 프로퍼티 속성을 바꾸거나 접근자 프로퍼티로 변환할수 있음을 나타내고 기본 속성은 true이다.
[[Enumerable]] - for-in 루프에서 해당 프로퍼티로 반환함을 나타내고 기본속성은 true이다.
[[Writable]] - 프로퍼티의 값을 바꿀수 있음을 나타내고 기본 속성을 true이다.
[[Value]] - 프로퍼티의 실제 데이터 값을 포함하고 기본 속성 값은 undefined이다.

기본 프로퍼티 속성을 바꾸려면 반드시 Object.defineproperty()메서드를 써야하고 이 메서드는 프로퍼티를 추가하거나 수정할 객체, 프로퍼티 이름, 서술자 객체 세가지를 매개변수로 받는다.

접근자 프로퍼티
접근자 프로퍼티에는 데이터 값이 들어있지 않고 대신 getter 함수와 setter 함수로 구성된다
접근자 프로퍼티를 읽을 때는 getter 함수가 호출되며 유효한 값을 반환할 책임은 이 함수에 있고 접근자 프로퍼티에 쓰기 작업을 할 때는 새로운 값과 함께 함수를 호출하며 이 함수가 데이터를 어떻게 사용할지 결정한다.

[[Configurable]] - 해당 프로퍼티가 delete를 통해 삭제하거나 프로퍼티 속성을 바꾸거나 접근자 프로퍼티로 변환할수 있음을 나타내고 기본 속성은 true이다.
[[Enumerable]] - for-in 루프에서 해당 프로퍼티로 반환함을 나타내고 기본속성은 true이다.
[[Get]] - 프로퍼티를 읽을 때 호출할 함수로 기본값은 undefined이다.
[[Set]] - 프로퍼티를 바꿀 때 호출할 함수로 기본값은 undefined이다.

접근자 프로퍼티를 명시적으로 정의할수 없으며 반드시 Object.defineproperty()를 써야한다.
프로퍼티의 값을 바꿨을 떄 해당 프로퍼티만 바꾸는게 아니라 부수적인 절차가 필요한 경우에 사용한다.


6.1.2 다중 프로퍼티 정의
객체에서는 프로퍼티를 동시에 여러개 수정해야할 가능성이 높으므로 Object.defineProperties() 메서드를 제공한다. 

var book = {};
Object.defineProperties(book, {
  _year : {
    value : 2004
  },


  edition : {
    value : 1
  },

  year : {
    get : function(){
      return this._year;
    },
    set : function(newValue){
      if(newValue > 2004){
        this._year = newValue;
        this.edition += newValue - 2004;
      }
    }
  }
})

 


이 코드는 book 객체에 _year 와 edition 두 가지 데이터 프로퍼티와 접근자 프로퍼티 year 를 생성한다.

6.1.3 프로퍼티 속성 읽기
ECMAscript5의 Object.getOwnPropertyDescriptor() 메서드를 이용해 원하는 프로퍼티의 서술자 프로퍼티를 읽을수 있고 읽어올 프로퍼티가 포함된 객체, 서술자를 가져올 프로퍼티 이름 두 가지 매개변수를 받는다.