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

프로퍼티의 속성

프로퍼티의 속성

프로퍼티는 키와 값이 한 쌍을 이룬 것, 그리고 별개로 내부적인 속성을 가지고 있다.
ES5기준으로 쓰기가능(writable), 열거 가능(enumerable), 재정의 가능(configurable)의 내부 속성을 가진다. 속성의 값은 논리값이다.

1. writable
   프로퍼티에 쓰기가 가능한지를 뜻하는 속성.
2. enumerable
   프로퍼티가 for/in문이나 Object.keys등의 반복문으로 찾을 수 있는 대상인지를 뜻하는 속성.
3. configurable
   프로퍼티의 내부 속성을 수정할 수 있는지 뜻하는 속성.

객체에 새로운 프로퍼티를 추가하면 기본적으로 쓰기 가능/ 열거 가능/ 재정의 가능/으로 설정된다.
내장 생성자가 가지고 있는 프로토타입 객체의 프로퍼티 대부분의 내장 속성은 쓰기 가능/ 열거 불가능/ 재정의 가능 이다.

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

프로퍼티 디스크립터

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

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

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

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

프로퍼티 디스크립터 가져오기 (Object.getOwnPropertyDescriptor)

Object.getOwnPropertyDescriptor 메서드는 객체 프로퍼티의 프로퍼티 디스크립터를 가져온다.
첫 번째 인수는 객체의 레퍼런스, 두 번째 인수는 키를 뜻하는 문자열
프로토타입으로 상속받은 프로퍼티 또는 없는 프로퍼티를 지정하면 undefined를 반환

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

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

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

객체의 프로퍼티 설정하기 (Object.defineProperty)

Object.defineProperty 메서드는 프로퍼티 디스크립터를 설정한다.
첫 번째 인수는 객체 레퍼런스, 두 번째 인수는 키, 세 번째 인수는 프로퍼티 디스크립터 레퍼런스
실행 후에는 수정한 객체의 레퍼런스를 리턴해준다.

const obj = {};

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

디스크립터의 각 프로퍼티는 생략 가능하다.

객체의 프로퍼티 속성 한꺼번에 설정하기(Object.defineProperties)

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);

/*
	{ get: [Function: get],
          set: [Function: set],
          enumerable: true,
          configurable: true }
          
        { _name: 'Kim', name: [Getter/Setter] }
*/

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

위와같이 Object.create 메서드를 사용하면 프로토타입, 프로퍼티 값, 속성을 모두 설정한 객체 생성이 가능하다.