javascript : 데이터 프로퍼티와 접근자 프로퍼티의 속성, get, set, getter, setter, 객체프로퍼티

결론 :

객체리터럴(메소드 프로퍼티가 있는)이라는 공간에서,,, set과 get을 넣을수 있는데,,,

set은 외부에서 가져와 장착 / get은 꺼내서 외부로 

-----------------------------------------------

https://vnthf.github.io/blog/javascript_property/

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

--------------------------------------------------------------------

defineProperty는 객체의 속성을 정교하게 추가하거나 수정할 수 있습니다. 할당을 통해 속성을 추가하는 일반적인 방법을 사용하면 속성 열거enumeration(for...in 반복문이나 Object.keys 메서드)를 통해 노출되고 값을 변경할 수 있으며 delete 연산자로 삭제할 수도 있습니다. defineProperty를 사용하면 이런 부분을 상세하게 조절할 수 있습니다. Object.defineProperty()로 추가한 속성은 기본적으로 불변합니다.

객체로 표현하는 속성 서술자Property descriptors는 데이터 서술자data descriptors와 접근자 서술자accessor descriptors의 두 가지 유형을 갖습니다. 데이터 기술자는 덮어쓰거나 쓸 수 없는 하나의 값을 가지는 속성입니다. 접근 기술자는 접근자getter-설정자setter 한 쌍으로 기술하는 속성입니다. 서술자는 두 유형 중 하나여야 하며, 동시에 두 유형일 수는 없습니다.

데이터 서술자와 접근자 서술자 모두 객체이며 다음과 같은 키를 공유합니다.

configurable

이 속성의 값을 변경할 수 있고, 대상 객체에서 삭제할 수도 있다면 true.
기본값은 false.

enumerable

이 속성이 대상 객체의 속성 열거 시 노출된다면 true.
기본값은 false.

데이터 서술자는 다음 키를 선택사항으로 가집니다.

value

속성에 연관된 값. 아무 유효한 JavaScript 값(숫자, 객체, 함수 등)일 수 있습니다.
기본값은 undefined

writable

할당 연산자로 속성의 값을 바꿀 수 있다면 true.
기본값은 false.

접근자 서술자는 다음 키를 선택사항으로 가집니다.

get

속성 접근자로 사용할 함수, 또는 접근자가 없다면 undefined. 속성에 접근하면 이 함수의 this를 속성을 가진 객체(상속으로 인해 원래 정의한 객체가 아닐 수 있음)로 설정하고, 매개변수 없이 호출합니다. 반환 값이 속성의 값으로 사용됩니다.
기본값은 undefined.

set

속성 설정자로 사용할 함수, 또는 설정자가 없다면 undefined. 속성에 값을 할당하면 이 함수의 this를 속성을 가진 객체로 설정하고, 할당하려는 값을 유일한 매개변수로 해 호출합니다.
기본값은 undefined.

서술자가 value, writable, get, set 키를 모두 지니고 있지 않으면 데이터 서술자로 간주합니다. 반면 value 또는 writable과 동시에 get 또는 set 키를 함께 가지고 있으면 오류가 발생합니다.

각 설정 값이 서술자 스스로의 속성일 필요는 없습니다. 따라서 서술자가 상속받은 값도 영향을 줍니다. 기본 설정 값을 확실하게 보존하려면 Object.prototype을 먼저 동결하거나, 모든 속성을 명시적으로 지정하거나, Object.create(null)로 null을 가리키세요.

----------------------------------------------------------------------

Javascript 프로퍼티 속성

ECMA script5에는 프로퍼티의 내부속성에 접근 할 수 있는 방법이 몇가지 추가 되었다. 데이터 프로퍼티와 접근자 프로퍼티의 속성에 대해 살펴보자

공통속성

Enumerable

• 프로퍼티가 열거 가능한지 정하는 속성

Configurable

• 프로퍼티를 변경할 수 있는지 정하는 속성
• true일 경우 delete연산자를 통해 프로퍼티를 제거하거나 변경이 가능하다.
• 기본값은 모두 true

이러한 프로퍼티의 속성을 바꾸려면 Object.defineProperty() 메소드를 통해서 변경한다.

var client = {
    name : "amumu"
};
//인수 : 변경할 객체, 프로퍼티 이름, 프로퍼티 속성 값 
Object.defineproperty(client, "name", {
    enumerable : false
});
Object.defineProperty(client, "name", {
    configurable : false
});
//이후에는 더 이상 defineProperty를 통해 수정이 불가능하다. 

데이터 프로퍼티 속성

value

• 프로퍼티의 값을 저장
• 객체에 프로퍼티를 만들면 이 속성에 값이 저장

Wirtable

• 프로퍼티에 값을 저장 할 수 있는지

var client = {};
Object.definePropertry(client, "name", {
value:"amumu",
writable : true
});

위와 같이 작성하면 cleient의 객체에 name프로퍼티가 자동으로 생성되고 값이 설정된다. 다만 defineProperty를 하게 되면 설정하지 않은 속성들은 모두 false가 되기 때문에 공통속성에서 예로 들었던 enumerable과 같은 속성들은 모두 false로 변경이 된다.

접근자 프로퍼티 속성

get과 set

접근자 프로퍼티에는 get과 set 2가지 속성이 있다. get과 set을 객체 리터럴 형식으로 접근하려면 아래와 같이 객체를 생성할 때 정의해주면 된다.

var client = {
    _name : 'amumu',
    get name(){
        return this._name;
    }
    set name(value){
        this._name = value;
    }
};
Object.defineProperty() 를 사용 하면 위 속성들을 함수형태로 작성할 수 있다.
var client = {
    _name : 'amumu'
};
Object.defineProperty(client, "name", {
    get : function(){
        return this._name;
    },
    set: function(value){
        this._name = value;
    }
});

위와 같이 정의하면 Enumerable, Configurable과 같은 속성이 false이므로 열거불가능하고 쓰기 불가능한 프로퍼티가 된다. 또한, 접근자 프로퍼티와 데이터 프로퍼티를 동시에 설정할 순 없다.

Object.defineProperties()

여러 프로퍼티를 동시에 설정 할 수 있다.

Object.defineProperties(client, {
    property1 : {
    },
    property2 : {
    }
});

Object.getOwnPropertyDescriptor()

프로퍼티의 속성을 가지고 있는 객체를 반환해준다. (고유프로퍼티 속성만)

• 이 포스팅은 객체지향 자바스크립트의 원리(니콜라스 C. 자카스지음, 김태곤 옮김)의 일부를 읽고 정리한 내용입니다.