본문 바로가기
IT 개발/JavaScript

객체 속성 기술자 이해하기

by Love of fate 2021. 9. 12.
728x90
반응형

[객체 속성 기술자 이해하기]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<script type="text/javascript">
    let user = {
        name : "jeado"
    };
 
    let descriptor = Object.getOwnPropertyDescriptor(user, 'name');
    console.log(descriptor);
 
    let user2 = {};
    Object.defineProperty(user2, "name", {
        value : "jeado",
        enumerable : true,
        configurable : true,
        writable : false
    });
 
    console.log(user2.name);
    user2.name = "bbo";
    console.log(user2.name);
 
    let user3 = {
        name : "jeado",
        toString(){
            return this.name;
        }
    };
 
    Object.defineProperty(user3, "toString", {
        enumerable : false
    });
 
    for(let key in user3){
        console.log(key);
    }
 
    let user4 = {};
    Object.defineProperty(user4, "name", {
        value : "jeado",
        configurable : false
    });
    
    delete user4.name
    console.log(user4);
    Object.defineProperty(user4, "name", {
        writable : true
    });
</script>
<body>
 
</body>
</html>
cs


* 자바스크립트의 모든 속성은 자기 자신에 대한 정보를 담고있는 속성기술자(PropertyDescriptor)를 가지고 있다.

이 속성 기술자는 객체로 표현된다.

 

Object.getOwnPropertyDescriptor를 통해 속성 기술자 객체를 가지고 올 수 있다.

Object.defineProperty를 통해 객체의 속성을 정의한다.

첫번째 인자는 속성을 정의할 객체이고, 두번째 인자는 속성명, 그리고 세번째 인자는 속성기술자이다.

속성 기술자는 객체로써 다음과 같은 속성을 가진다.

 - value : 값

 - enumerable : for ... in 루프나 Object.keys메소드같이 속성을 나열할 때 나열 가능 여부를 정의한다. 

                false일 경우 나열되지 않는다.

 - writable : 값을 변경할 수 있는 여부를 정의 

 - configuralble : 속성 기술자를 변경할 수 있는 여부를 정의 

 

속성 기술자에는 데이터에 대한 정보를 정의하는 것 외에도, 데이터에 접근하는 방법을 정의할 수 있다. 

이때 get, set 함수를 통해 할 수 있다.

 

 

728x90
반응형

'IT 개발 > JavaScript' 카테고리의 다른 글

javascript - filter 사용법  (0) 2023.03.05
jQuery validation : 입력 데이터 유효성 검사 플러그인  (0) 2021.10.19
클로저 이해하기  (0) 2021.09.12
스코프 이해하기  (0) 2021.09.12
함수 호이스팅 이해하기  (0) 2021.09.12