Blog

6.1 객체에 대한 이해

April 11, 2014

6.1 객체에 대한 이해

이 글은 자바스크립트 제대로 배우기 스터디 그룹의 활동으로 «프론트엔드 개발자를 위한 자바스크립트»(2013 인사이트, 한선용 옮김)에서 요약한 글임을 밝힙니다.

객체지향(Object-oriented: OO) 언어는 일반적으로 클래스를 통해 같은 프로퍼티와 메서드를 가지는 객체를 여러 개 만든다는 특징이 있음, ECMAScript에는 클래스라는 개념이 없으며 객체는 다른 클래스 기반 언어와 다름

ECMA-262는 객체를 “프로퍼티의 순서 없는 컬렉션이며 각 프로퍼티는 원시 값이나 객체, 함수를 포함한다”라고 정의하며, 특별한 순서가 없는 값의 배열이란 의미

ECMAScript 객체를 해시 테이블이며, 이름-값 쌍의 그룹이며 각 값은 데이터나 함수가 될 수 있다고 생각하면 이해하기 쉬움

모든 객체는 참조 타입을 바탕으로 생성됨

객체에 대한 이해

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

var person = new Object();
person.name = "Kleini";
person.age = 30;
person.job = "Newbie";

person.sayName = function(){
    alert(this.name);
};

객체 리터럴 패턴이 더 많이 쓰임

var person = {
    name: "Kleini",
    age: 30,
    job: "Newbie",

    sayName: function(){
        alert(this.name);
    }
};

프로퍼티 타입

ECMA-262 5판에서는 프로퍼티의 특징을 내부적으로만 유효한 속성에 따라 설명함, 자바스크립트에서 직접적으로 접근할 수 있는 방법은 없음

프로퍼티에는 데이터 프로퍼티와 접근자 프로퍼티 두 가지 타입이 있음

데이터 프로퍼티

데이터 프로퍼티는 데이터 값에 대한 단 하나의 위치를 포함하여 이 위치에서 값을 읽고 씀
* [[Configurable]] – delete를 통해 삭제하거나, 프로퍼티의 속성을 바꾸거나나, 접근자 프로퍼티로 변환될 수 있음 (기본값: true)
* [[Enumerable]] – for-in 루프에서 해당 프로퍼티를 반환 (기본값: true)
* [[Writable]] – 값을 바꿀 수 있음 (기본값: true)
* [[Value]] – 실제 데이터 값을 포함 (기본값: undefined)

접근자 프로퍼티

접근자 프로퍼티에는 데이터 값이 들어 있지 않고 대신 getter 함수와 setter 함수로 구성됨
* [[Configurable]] * [[Enumerable]] * [[Get]] – 프로퍼티를 읽을 때 호출할 함수 (기본값: undefined)
* [[Set]] – 프로퍼티를 바꿀 때 호출할 함수 (기본값: undefined)

접근자 프로퍼티를 명시적으로 정의할 수는 없으며 반드시 Object.defineProperty()를 써야 함

getter와 setter는 꼭 지정해야 하는 것은 아님, getter 함수만 지정하면 해당 프로퍼티는 읽기 전용이 되고 이 프로퍼티를 수정하려는 시도는 모두 무시됨 (스트릭트 모드에서는 에러가 발생), setter 함수만 지정된 프로퍼티를 읽으려 하면 스트릭트 모드가 아닐 때는 undefined를 반환 (스트릭트 모드에서는 에러가 발생)

다중 프로퍼티 정의

객체에서 프로퍼티 여러 개를 동시에 수정해야 할 가능성이 높으므로 ECMAScript 5판에서는 Object.defineProperty() 메서드를 제공, 서술자를 이용해 여러 프로퍼티를 한 번에 정의

프로퍼티 속성 읽기

ECMAScript 5의 Object.getOwnPropertyDescriptor() 메서드를 이용해 원하는 프로퍼티의 서술자 프로퍼티를 읽을 수 있음

읽어올 프로퍼티가 포함된 객체, 서술자를 가져올 프로퍼티 이름 두 가지 매개변수를 받으며, 반환 값은 해당 프로퍼티의 성격에 따라, 접근자 프로퍼티 또는 데이터 프로퍼티를 포함하는 객체를 반환