ECMA 스크립트: 객체의 생성과 속성 추가, 삭제, 수정

ECMA 스크립트: 객체의 생성과 속성 추가, 삭제, 수정

1. create 메서드를 이용한 객체의 생성과 속성 추가

ECMA 스크립트에서 객체를 생성하는 방법은 2가지가 있다.

1) 기존 방식인 생성자 함수를 이용하여 객체를 생성: 틀을 기반으로 객체를 찍어내 객체를 생성

Object object = new Object();

2) create 메서드를 이용하여 객체를 생성: 기존에 있던 객체를 복제하고 새로운 속성을 추가하여 객체를 생성

var object = Object.create({}, {추가할 속성 정의});

예제) create() 메서드로 객체를 생성하는 예

<script>

var object = Object.create({}, {

name:{value:'홍길동', enumerable:true},

region:{value:'서울특별시', enumerable:true}

});

// keys는 속성값들을 배열형태로 반환하게 하는 메서드

alert(Object.keys(object));

</script>

예제2) create() 메서드로 객체에 속성을 추가하는 예

<script>

var object = Object.create({}, {

name:{value:'홍길동', enumerable:true},

region:{value:'서울특별시', enumerable:true}

});

// 위의 객체에 새로운 속성을 추가 

var person = Object.create(object, {

gender:{value:'남자', enumerable:true},

hobby:{value:'수영', enumerable:true}

});

// getOwnPropertyNames 메서드와 keys 메서드의 비교

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

// person은 object를 상속받듯이 새로운 속성을 추가한 것이므로 object의 속성도 호출할 수 있다.

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

</script>

2. 객체에 동적으로 속성 추가하는 방법

1) 직접 추가하고 싶은 속성을 객체 위에 .을 붙여 넣는다.

var object = { };

object.region = '서울특별시';

2) ECMA script에서 추가된 defineProperty 메서드를 이용하여 추가

var object = { };

Object.defineProperty(object, 'name', {

value: '홍길동',

writable: true

});

3. 동적으로 속성을 추가하지 못하게 하는 방법

Object.preventExtensions: 동적으로 속성을 추가하지 못하게 하는 메서드

Object.isExtensible: 해당 객체가 동적으로 속성을 추가 가능 유무를 반환

<script>

var object = { };

object.region = '서울특별시';

Object.defineProperty(object, 'name', {

value: '홍길동',

writable: false

});

alert(Object.isExtensible(object));

// isExtensible: 해당 객체가 동적으로 속성을 추가 가능 유무를 반환

Object.preventExtensions(object);

// preventExtensions: 동적으로 속성을 추가하지 못하게 하는 메서드

alert(Object.isExtensible(object));

</script>

4. 동적으로 속성을 삭제, 수정 금지

Object.seal: 동적으로 속성을 삭제하지 못하게 하는 메서드

Object.isSealed: 해당 객체가 동적으로 속성을 삭제 가능 유무를 반환

Object.freeze(): 객체의 속성을 삭제를 금지와 동시에 수정도 금지

Object.isFrozen(): 객체의 속성을 삭제를 금지와 동시에 수정도 금지 유무 반환

<script>

var person = { 

name:'홍길동',

region:'서울특별시',

hobby:'수영'

};

Object.seal(person); // seal: 속성 삭제 금지

alert(Object.isSealed(person)); // isSealed 속성 삭제 가능 여부

// 자바스크립트의 속성 삭제 방법

delete person.name;

alert(person.name);

</script>

5. keys와 getOwnPropertyNames의 차이점

keys: 속성값들을 배열형태로 반환하게 하는 메서드 (defineProperty로 속성 추가시 enumerable값이 true인 경우)

getOwnPropertyNames: 속성값들을 배열형태로 반환하게 하는 메서드 (상관없이 무조건 반환)

<script>

var object = {name:'홍길동'};

Object.defineProperty(object, 'region', {

value:'서울특별시'

});

alert(Object.keys(object));

alert(Object.getOwnPropertyNames(object));

</script>

keys는 name을, getOwnPropertyNames는 name, region을 반환한다.

defineProperty로 속성을 추가한 경우, keys는 enumerable값이 true일 때에만 속성을 반환하고 

getOwnPropertyNames는 상관없이 속성을 반환한다.

6. 옵션 값의 확인

getOwnPropertyDescriptor: 속성을 매개변수로 전달

<script>

var object = {name:'홍길동'};

Object.defineProperty(object, 'region', {

value: '서울특별시'

});

var descriptors = [ ];

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

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

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>