Javascript 프로퍼티 정의하기

 

자바스크립트(Javascript) 기초에서 나오는 개념 입니다.

자바스크립트에서 프로퍼티 정의는 프로퍼티를 추가하면서 해당 프로퍼티의 속성(attribute) 명시적으로 정의하거나 기존 프로퍼티의 속성을 재 정의하는 것을 의미 합니다.

 

쉽게 이해하기 위해 코드를 살펴보아야 하겠습니다!

아래와 같은 객체가 존재한다 가정하여 봅니다.

let data = {};

 

data라는 변수에 속성을 정의하려면 일반적으로 아래처럼 할 수 있습니다.

let data = {};
data.textData = '텍스트 데이터';
data.integer = 1234;

console.log(data);

 

textData라는 키 값으로 문자열 데이터를 대입하였고, integer라는 키 값으로 숫자 1234를 대입 하였습니다.

이러한 데이터는 실질적으로 수정도 가능하고 삭제도 가능하며 두루두루 사용 될 수 있습니다.

어렵지 않는 기능입니다..ㅎ

 

이렇게 정의한 데이터의 프로퍼티를 자세히 살펴보면 아래처럼 속성을 볼 수 있습니다.

Object.getOwnPropertyDescriptor(대상, '키');

오홍?

 

data라는 변수에서의 textData는 value 속성값으로 "텍스트 데이터" 를 가지고 있으며 writeable속성이 true이고 enumerable속성이 true이면 configurable속성이 true 입니다.

이러한 프로퍼티의 속성은 사실 개발을 하면서 자주 생각하거나 접근해서 사용하지 않는 내용입니다.

 

그러면 해당 속성을 이제 수동으로 부여하여 보겠습니다.

let data = {};

Object.defineProperty(data, 'textData', { 
  value : '텍스트데이터',
  writeable : true,
  enumerable : true,
  configurable : true
});

Object.defineProperty(data, 'integer', {
  value : 1234,
  writeable : false,  
  enumerable : false,
  configurable : false
}); 

console.log(data);

 

Object에서 사용 할 수 있는 함수인 defineProperty를 사용하여서 integer라는 키 값에 적용된 속성을 기존의 true 속성에서 전부 false로 바꾸었습니다.

속성의 키 값에서 유추할 수 있듯이 false로 바꾸게 되면 속성에 대한 제한이 생기게 됩니다.

속성	true	false
value	(빈경우가 아니면) 지정된 값을 넣습니다.	(없다면) undefined
writeable	수정 할 수 있습니다.	수정 할 수 없습니다.
enumerable	for..in 또는 Object.keys로 열거가능 합니다.	for..in 또는 Object.keys로 열거 할 수 없습니다.
configurable	삭제 가능 합니다.	삭제 할 수 없습니다.

 

실제로 value 제외 모든 속성이 false인 integer에 대해서 어떠한 모습이 나오는지 코드를 실행하여 봅니다.

let data = {};

Object.defineProperty(data, 'textData', { 
  value : '텍스트데이터',
  writeable : true,
  enumerable : true,
  configurable : true
});

Object.defineProperty(data, 'integer', {
  value : 1234,
  writeable : false,  
  enumerable : false,
  configurable : false
}); 

//#1. writeable이 false인 경우
data.integer = 5678;// 1234값을 5678로 바꾸어봅니다.
console.log(data.integer); //1234가 그대로 나옵니다.

//#2. enumerable이 false인 경우
for(let key in data) {
    console.log(key, data[key]);  //integer는 나오지 않습니다.
}

//#3. configurable이 false인 경우
delete data.integer; 
console.log(data); //integer가 삭제되지 않습니다.

 

위 코드를 실행하면 주석에 나온 것 처럼 값에 대해서 제한적인 요소가 적용이 됩니다.

와..이런게 있었군요..ㅠ

 

객체정의 방법인 Object.defineProperty 함수 이외에도 객체 확장 금지인 Object.preventExtensions 함수,

객체 밀봉 함수인 Object.seal 함수, 객체 동결 함수인 Object.freeze 함수가 존재 합니다.

이러한 기능을 활용하면 접근제어자를 쓰기 힘든 자바스크립트에서 좀 더 유연한 코드를 만들 수 있을 것 같습니다!

 

자바스크립트의 튜토리얼이나 기본 책에서는 이러한 방법들이 잘 나와 있지 않아서 놓치고는 합니다.

* 사실 웹 프론트엔드 개발자가 아니면 풀스택, 백그라운드 개발자라면 대부분 모를것 같습니다..ㅠ

 

이상으로 자바스크립트(Javascript ) 프로퍼티 정의하기에 대해서 살펴보았습니다.

궁금한점 또는 틀린 부분은 언제든 연락 주세요! 👻