ECMAScript 5 객체 속성 추가

ECMAScript 5 객체 속성 추가

 - HTML5와 함께 출현한 javascript 표준안을 ECMAScript 5라고 부른다.

 - ECMAScript 5는 IE 8 이하에서는 지원하지 않는다.

 

메서드 이름                                        설명

Object.defineProperty()                         객체에 속성을 추가

Object.defineProperties()                       객체에 속성을 추가

 

1. defineProperty(속성을 추가하려는 객체, 속성의 이름, 속성과 관련된 옵션 객체)

var aaa = {};
Object.defineProperty(aaa, 'name', {
});

 

1.1 객체 속성 관련 옵션

옵션이름                            설명

value                                속성의 값을 의미

writeable                           객체의 속성 값을 변경 할 수 있는지를 의미

get                                   getter

set                                   setter

configurable                       속성의 설정을 변경 할 수 있는지를 의미

enumerable                        for in 반복문으로 검사할 수 있는지를 의미

 

옵션을 입력하지 않으면 false 또는 undefined가 입력된다.

 

1.1.1 writeable, enumerable

var aaa = {};
Object.defineProperty(aaa, 'name', {
	value: 'masami',
	writeable: false,
	enumerable: false
});

// code 1
aaa.name = "OTHER";

// code 2
for(var i in aaa) {
	alert(i + " : " + aaa[i]);
}

// code 3
alert(aaa.name);

 

위의 코드를 실행하면 'masami'라는 메시지( code 3에 해당 )만 출력되는 것을 볼 수 있다.

code 1에 의해서 name속성이 'OTHER'로 바뀌어야 하지만 writeable: false 로 인해 변경이 되지 않았다.

또한, enumerable: false에 의해서 code 2도 실행되지 않는다.

 

1.1.2 get, set

var aaa = {};
var value = 'masami';
Object.defineProperty(aaa, 'name', {
	get: function() {
		alert('getter');
		return value;
	},
	set: function(v) {
		alert('setter : ' + value);
		value = v;
	}
});

aaa.name = 'okui';
alert(aaa.name);

위의 코드를 실행하면 1) setter : masami 2) getter 3) okui 와 같은 순서로 출력한다. 이를 통해 객체를 사용할 때 자동으로 getter와 setter를 사용한다는 점을 알 수 있다.

 

1.1.3 configurable

var aaa = {};
var value = 'masami';
Object.defineProperty(aaa, 'name', {
	get: function() { return value; },
	set: function(v) { value = v; }
	configurable: true
});

Object.defineProperty(object, 'name', {
	enumerble: true;
});

 

위의 코드를 configurable: false로 하고 실행하면 error 발생

 

2. Object.defineProperties(속성을 추가하려는 객체, 속성의, 속성과 관련된 옵션 객체)

 

var aaa = {};
Object.defineProperties(aaa, {
	name: {
		value: 'masami';
	},
	gender: {
		value: 'female';
	}
});

defineProperties() method는 한꺼번에 여러 개의 속성을 지정할 수 있다.