프로퍼티 속성을 설정하면 사용자 내장 객체와 유사하게 동작하는 객체를 정의할 수 있다. 라이브러리 개발에서 굉장히 유용하게 사용할 수 있다.

프로퍼티의 속성

속성

프로퍼티는 Key, Value로 한 쌍을 이룬것으로, ES5 기준으로 writable, enumerable, configurable 한 특징을 가지고 있다.

enumerable: 속성이 대상 객체의 속성 열거시 노출된다면 true

configurable: 속성의 값을 변경할 수 있고, 대상 객체에서 삭제할 수도 있으면 true

이상 Data Descriptors 와 Accessor Descriptors 가 공통으로 가지는 키

writable: 할당 연산자로 속성의 값을 바꿀 수 있다면 true

value : 속성에 연관된 값, 아무 유효한 값이나 가능, Default undefined

이상 데이터 서술자(Data descriptors)

get : 속성 접근자로 사용할 함수

set : 속성 설정자로 사용할 함수

이상 접근자 서술자(Accessor Descriptors) -> this와 바인딩

객체에 새로운 프로퍼티를 추가하면 기본적으로 쓰기, 열거, 재정의 가 가능하다고 이해하면 된다.

프로퍼티 디스크립터와 읽고 쓰는 메서드

프로퍼티 디스크립터란
프로퍼티 디스크립터는 프로퍼티의 속성 값을 뜻하는 갯체, 이 객체가 가진 프로퍼티 이름은 프로퍼티가 가진 속성 이름과 같다.

{
	value: 프로퍼티의 값,
    writable: true / flase,
    enumerable: true / flase,
    configurable: true / flase,
}

ex) 접근자 프로퍼티의 디스크립터

{
	get:getter(),
    set:setter(),
    enumerable:true/ false,
    configurable :true / false,
}

프로퍼티 디스크립터 존재여부

const kim = { name: 'Kim' };
console.log(Object.getOwnPropertyDescriptor(kim, 'name')); // true

/*
{ 
	value: 'tom',
  	writable: true,
  	enumerable: true,
	configurable: true 
}
	*/

Object.getOwnPropertyDescriptor(kim,'toString'); // undefined

Object.defineProperties를 이용한 객체의 프로퍼티 설정

const obj = {};

Object.defineProperties(obj, 'age', {
	value: 20,
	writable: true,
	enumerable: false,
	configurable: true,
});

Object.defineProperties를 이용한 객체의 프로퍼티 한꺼번에 설정하기

const person = {};
Object.defineProperties(person, {
	_name: {
		value: 'Kim',
		writable: true,
		enumerable: true,
		configurable: true,
	},
	name: {
		get: function() {
			return this._name;
		},
		set: function(value) {
			let str = value.cahrAt(0).toUppercase() + value.substring(1);
			this._name = str;
		},
		enumerable: true,
		configurable: true,
	},
});

console.log(Object.getOwnPropertyDescriptor(person, 'name'));
console.log(person);

Object.create을 이용한 프로퍼티 추가

const Iphone = {
	madeBy: 'Apple',
	sayBrandName() {
		return 'Belong to ' + this.madeBy;
	},
};

const iphoneX = Object.create(Iphone, {
	name: {
		value: 'iphone X',
		writable: true,
		enumerable: true,
		configurable: true,
	},
	age: {
		value: 2,
		writable: true,
		enumerable: true,
		configurable: true,
	},
	sayName: {
		value() {
			return `This is ${this.name}`;
		},
		writable: true,
		enumerable: false,
		configurable: true,
	},
});

console.log(iphoneX);  	//{ name: 'iphone X', age: 2 }
console.log(Iphone.madeBy);	//Apple
console.log(iphoneX.sayBrandName());	//Belong to Apple
console.log(iphoneX.sayName());		//This is iphone X```