js_practice/3_object_2.html at master · 200wonman/js_practice · GitHub

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>

        // Object

        // Computed properties -- 계산된 프로퍼티
        // 일반적으로 .을 사용하지만, Computed properties는
        // 정확하게 어떤 key가 필요한지 모를때(런타임에서 결정될 때) 사용한다.


        // 우리가 오브젝트의 값에 접근할때 .을 이용해서 접근했었다.
        const juye = { name : 'juye', age : 30, key : 'hi' };
        console.log(juye.name);    // juye


        // [] 안에 '오브젝트의 변수이름' 을 이용해서 접근가능함.
        // 이걸 Computed properties 라고함.
        // 근데 무조건 ''를 써서 String형태로 가져와야함.
        console.log(juye['name']); // juye


        console.log('----------------------------------------')


        // 전에 오브젝트를 추가했었는데,
        juye.hasJob = 'true';
        console.log( juye.hasJob); // true

        // Computed properties 로 이렇게 추가가능
        juye['hasJob'] == true;


        // 삭제는 이렇게
        delete juye.hasJob
        console.log( juye.hasJob); // undifined

        // Computed properties 로 이렇게 추가가능
        juye['hasJob'] == true;


        console.log('------------------헷갈림----------------------')


        // undifined 뜬 이유
        // obj안에 key라는 프로퍼티가 없어서
        function printValue(obj, key) {
            console.log(obj.key); // undifined -> 궁금하다면 21번의 key 주석을 풀어보기
        }
        printValue(juye, 'name');


        // 나중에 동적으로 key에 관련된 value를 받아올 때 유용하게 쓰인다구함.
        function printValue2(obj, key) {
            console.log(obj[key]); // juye
        }
        printValue2(juye, 'name');


    </script>

</body>
</html>