ECMAScript 5 추가 속성

유럽 컴퓨터 제조 협회의 표준에 따르면 자바스크립트는 ECMAScript이다. 하지만 자바스크립트라는 말을 오래써왔으므로 자바스크립트라는 말을 많이 사용한다. HTML5가 나오면서 ECMAScript 5라는 표준안이 생겨났다. ECMAScript 5표준안은 익스플로러 9 아래에서는 동작하지 않는다. 그러므로 다른 브라우저나 익스플로러 9 이상 버젼으로 테스트해야한다.

1. ECMAScript 5 객체속성 추가

메서드 이름	설명
Object.defineProperty()	객체에 속성을 추가한다.
Object.defineProperties()	객체에 속성을 추가한다.

defineProperty()

var object = {};

Object.defineProperty(object, 'name', { 속성 옵션 });

속성옵션을 살펴보면

옵션 이름	설명
value	속성의 값을 의미한다.
whiteable	객체의 속성값을 변경할 수 있는지 의미한다.
get	게터를 의미한다.
set	세터를 의미한다.
configurable	속성의 설정을 변경할 수 있는지를 의미한다.
enumerable	for in반복문으로 검사할 수 있는지를 의미한다.

value, writeable, enumerable옵션

<script>

// 변수를 선언합니다.

var object = {};

Object.defineProperty(object, 'name', {

value: 'RintIanTta',

writeable: false,

enumerable: false

});

// 화인합니다.

object.name = 'Other';

for (var i in object) {

alert(i + ' : ' + object[i]);

}

// 출력합니다.

alert(object.name);

</script>

get, set 옵션: 자동으로 get, set 함수를 호출한다.

<script>

// 변수를 선언합니다.

var object = {};

var value = 'RINTIANTTA';

Object.defineProperty(object, 'name', {

get: function () {

alert('GETTER..!');

return value;

},

set: function (newValue) {

alert('SETTER: ' + newValue);

value = newValue;

}

});

// 출력합니다.

object.name = 'ALPHA';

alert(object.name);

</script>

configurable 옵션: 기본값은 false이다.

<script>

// 변수를 선언합니다.

var object = {};

var value = 'RINTIANTTA';

Object.defineProperty(object, 'name', {

get: function () { return value; },

set: function (newValue) { value = newValue; },

configurable: true

});

Object.defineProperty(object, 'name', {

enumerable: true

});

</script>

<script>

// 변수를 선언합니다. defineProperties()로 여러개의 속성을 한번에 지정.

var object = {};

Object.defineProperties(object, {

name: {

value: 'RintIanTta'

},

gender: {

value: 'Male'

}

});

// 출력합니다.

alert(object.name);

</script>

2. 객체 생성

메서드 이름	설명
Object.create()	객체에 생성한다.

생성자 함수와 용도는 다르다. 생성자 함수는 틀을 기반으로 찍어내는데 create()는 객체를 복사하고 새로운 속성을 추가해 객체를 생성한다. 

<script>

// 변수를 선언합니다.

var object = Object.create({}, {

name: { value: 'RintIanTta', enumerable: true },

gender: { value: 'Male', enumerable: true }

});

// 출력합니다.

alert(Object.keys(object));

</script>

create()는 기존의 객체를 기반으로 새로운 속성을 지정할 수 있으므로 상속이라고 볼 수 있습니다.

<script>

// 변수를 선언합니다.

var object = Object.create({}, {

name: { value: 'RintIanTta', enumerable: true },

gender: { value: 'Male', enumerable: true }

});

var person = Object.create(object, {

region: { value: 'Seoul Korea', enumerable: true },

hobby: { value: 'Guitar', enumerable: true }

});

// 출력합니다.

alert(Object.getOwnPropertyNames(person) + '\n' + Object.keys(person));

alert(person.name + ' : ' + person.gender);

</script>

살펴볼점은 getOwnPropertyNames()나 keys() 메서드를 사용하여 새로 지정한 객체만 출력할 수 있는 점이다. 그러나 부모객체의 속성은 그대로 사용할 수 있다.

3. 동적 속성 추가 제한

기존 자바스크립트의 모든 객체는 동적으로 추가, 삭제가 가능하다. 하지만 ECMAScript 5 부터 제한하는 기능이 생겼다. 

메서드 이름	설명
Object.preventExtensions()	객체의 속성 추가를 제한한다.
Object.isExtensible()	객체에 속성 추가가 가능한지 확인한다.

preventExtensions() 를 사용하기전과 후를 비교해보자. 마지막에 확장 불가 오류가 나온다. dream 속성은 오류가 나지 않으나 값이 추가되지 않는다. 확인해보자.

<script>

// 변수를 선언합니다.

var object = {};

// 간단한 객체 속성 추가 방법

object.gender = 'Male';

// 복잡한 객체 속성 추가 방법

Object.defineProperty(object, 'name', {

value: 'RintIanTta',

writeable: false

});

alert(Object.isExtensible(object));

Object.preventExtensions(object);

alert(Object.isExtensible(object));

// 간단한 객체 속성 추가 방법

object.dream = '생명공학자';

// 복잡한 객체 속성 추가 방법

Object.defineProperty(object, 'showMeTheMoney', {

value: true

});

</script>

4. 동적 속성 삭제 제한

메서드 이름	설명
Object.seal()	객체의 속성 삭제를 제한한다.
Object.isSealed()	객체에 속성 삭제가 가능한지 확인한다.

<script>

// 변수를 선언합니다.

var person = {

name: 'RintIanTta',

gender: 'Male',

region: 'Seoul, Korea',

hobby: 'Guitar'

};

Object.seal(person);

delete person.name;

// 출력합니다.

alert(person.name);

</script>

preventExtensions()와 비슷하다. 그리고 수정 및 삭제를 제한하는 메서드도 있다.

메서드 이름	설명
Object.freeze()	객체의 속성 삭제와 수정을 제한한다.
Object.isFrozen()	객체에 속성 삭제와 수정이 가능한지 확인한다.

5. 객체 보조 메서드

메서드 이름	설명
Object.keys()	반복적으로 순환 가능한 객체 자신 소유의 속성을 배열로 만든다.
Object.getOwnPropertyNames()	모든 각체 자신 소유의 속성을 배열로 만듭니다.
Object.getOwnPropertyDescriptor()	특정 속성의 옵션 객체를 추출한다.

defineProperty()는 enumerable이 기본적으로 false이다. keys()는 enumerable이 true인 속성만 배열로 만들고 getOwnPropertyNames()는 enumerable에 상관없이 스스로 가지고 있는 모든 속성을 배열로 만들어준다.

<script>

// 변수를 선언합니다.

var object = { name: 'RintIanTta' };

// 속성을 추가합니다.

Object.defineProperty(object, 'gender', {

value: 'Male'

});

// 출력합니다.

alert(Object.keys(object));

alert(Object.getOwnPropertyNames(object));

</script>

getOwnPropertyDescriptor()를 이용한 옵션 확인

<script>

// 변수를 선언합니다.

var object = { name: 'RintIanTta' };

Object.defineProperty(object, 'gender', { value: 'Male' });

// 설정 배열을 추출합니다.

var descriptors = [];

descriptors.push(Object.getOwnPropertyDescriptor(object, 'name'));

descriptors.push(Object.getOwnPropertyDescriptor(object, 'gender'));

// 출력합니다.

var output = '';

for (var i in descriptors) {

var item = descriptors[i];

for (var key in item) {

output += key + ' : ' + item[key] + '\n';

}

output += '--------------------\n';

}

alert(output);        

</script>