소년코딩의 자바스크립트 강좌 31. 프로퍼티 타입

자바스크립트 객체의 프로퍼티는 모두 프로퍼티의 행동을 정의하는 특징에 따라 생성된다.

이러한 프로퍼티 타입은 데이터 프로퍼티와 접근자 프로퍼티 두 가지 타입이 있다.

---

1. 데이터 프로퍼티

데이터 프로퍼티는 데이터 값에 대한 단 하나의 위치를 포함하여 이 위치에서 값을 읽고 쓴다.

• [[Configurable]]: 해당 프로퍼티가 delete를 통해 삭제하거나, 프로퍼티 속성을 바꾸거나, 접근자 프로퍼티로 변환할 수 있음을 나타낸다. (default: true)

• [[Enummerable]]: for-in 루프에서 해당 프로퍼티를 반환함을 나타낸다. (default: true)
• [[Writeable]]: 프로퍼티의 값을 바꿀 수 있음을 나타낸다. (default: true)
• [[Value]]: 프로퍼티의 실제 데이터 값을 포함한다. 프로퍼티의 값을 읽는 위치이며, 새로운 값을 쓰는 위치이다. (default: undefined)

var blog = {
     name : 'Oppa'
};

name이라는 프로퍼티 값에 'Oppa'를 할당했다. 즉, [[Value]] 속성이 'Oppa'로 지정되며 값이 바뀐다면 모두 이 위치에 저장이 된다.

---

1) Object.defineProperty()

기본 프로퍼티 속성을 바꾸려면 반드시 Object.defineProperty() 메서드를 써야한다.

이 메서드는 프로퍼티를 추가하거나 수정할 객체, 프로퍼티 이름, 서술자(descriptor) 객체 세 가지를 매개변수로 받는다.

---

var blog = {};
Object.defineProperty(blog, 'name', {
     writable: false,
     value: 'Oppa'
});
 
console.log(blog.name);   // 'Oppa'
blog.name = 'hong';
console.log(blog.name);   // 'Oppa

name이라는 읽기 전용 프로퍼티를 만들고 그 값을 'Oppa'로 할당했다. 이 프로퍼티의 값은 바꿀 수 없으며, 새로운 값을 할당하려 하면 무시된다.

---

bar blog = {};
Object.defineProperty(blog, 'name', {
     configurable: false,
     value: 'Oppa'
});
 
console.log(blog.name);   // 'Oppa'
delete blog.name;
console.log(blog.name);   // 'Oppa'

configurable을 false로 설정하면 해당 프로퍼티를 객체에서 제거할 수 없게 된다. 해당 프로퍼티에서 delete를 호출하면 무시된다. 또한 일단 false로 지정하면 다시는 수정할 수 없게 된다.

---

var blog = {};
Object.defineProperty(blog, 'name', {
     configurable: false,
     value: 'Oppa'
});
 
// 에러 발생
Object.defineProperty(blog, 'name', {
     configurable: true,
     value: 'Hong'
});

또한 같은 프로퍼티에서 Object.defineProperty()를 여러 번 호출할 수는 있지만, [[configurable]]을 false로 지정하면 제한이 생긴다.

대게는 Object.defineProperty()처럼 강력한 옵션을 사용할 일이 드물겠지만 자바스크립트 객체를 잘 이해하려면 이 개념을 알아야 한다.

---

2. 접근자 프로퍼티

접근자 프로퍼티에는 데이터 값이 들어 있지 않고 getter 함수와 setter함수로 구성되어있다.

• [[Get]]: 프로퍼티를 읽을 때 호출할 함수이다. (default: undefined)

• [[Set]]: 프로퍼티를 수정할 때 호출할 함수이다. (default: undefined)

var blog = {
     _age : 25,
     addCount : 0
}
 
Object.defineProperty(blog, 'age', {
     get: function() {
          return '제 나이는 ' + this._age + ' 입니다.';
     },
     set: function(newValue) {
          if  (newValue > 25) {
               this._age = newValue;
               this.addCount += 1;
          }
     }
});
 
console.log(blog.age);   // '제 나이는 25 입니다.'
blog.age = 26;
console.log(blog);   // {_age: 26, addCount: 1}

접근자 프로퍼티는 일반적으로 프로퍼티의 값이 바뀌었을 때 해당 프로퍼티만 바꾸는게 아니라 부수적인 절차가 필요한 경우에 사용한다.

---

3. 다중 프로퍼티 정의

객체에서 프로퍼티 여러 개를 동시에 수정해야 할 경우 자바스크립트에서는 Object.defineProperties() 메서드를 제공한다. 이 메서드는 서술자를 이용해 여러 프로퍼티를 한번에 정의한다.

var blog = {};
 
Object.defineProperties(blog, {
     addCount: {
          value: 0
     },
     _age: {
          value: 25,
          configurable: true,
          writable: true
     },
     age : {
          get: function() {
               return '제 나이는 ' + this._age + ' 입니다.';
          },
 
          set: function(newValue) {
               if (newValue > 24) {
                    this._age = newValue;
                    this.addCount += 1;
               }
          }
     }
});

---

4. 프로퍼티 타입 읽기

Object.getOwnPropertyDescriptor() 메서드를 이용해 원하는 프로퍼티의 서술자 프로퍼티를 일을 수 있다. 이 메서드는 읽어올 프로퍼티가 포함된 객체, 서술자를 가져올 프로퍼티 일므 두 가지 매개변수를 받는다.

var descriptor = Object.getOwnPropertyDescriptor(blog, '_age');
 
console.log(descriptor.value);            // 24
console.log(descriptor.configurable);  // true
console.log(descriptor.get);  // 'undefined'
 
var descriptor = Object.getOwnPropertyDescriptor(blog, 'age');
 
console.log(descriptor.value);            // undefined
console.log(descriptor.configurable);  // false
console.log(descriptor.get);  // 'function'

---

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.