You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
지금까진 프로퍼티를 단순히 '키-값' 쌍의 관점에서만 다뤘습니다. 그런데 사실 프로퍼티는 우리가 생각했던 것보다 더 유연하고 강력한 자료구조입니다.
5
+
지금까진 프로퍼티를 단순히 '키-값' 쌍의 관점에서만 다뤘습니다. 그런데 사실 프로퍼티는 우리가 생각했던 것보다 더 유연하고 강력한 자료구조입니다.
7
6
8
7
이 챕터에선 객체 프로퍼티 추가 구성 옵션 몇 가지를 다루고, 이어지는 챕터에선 이 옵션들을 이용해 손쉽게 getter나 setter 함수를 만드는 법을 알아보겠습니다.
9
8
10
9
## 프로퍼티 플래그
11
10
12
-
객체 프로퍼티는 **`값(value)`** 과 함께 플래그(flag)라 불리는 특별한 속성 세 가지를 갖습니다.
11
+
객체 프로퍼티는 **`값(value)`** 과 함께 플래그(flag)라 불리는 특별한 속성 세 가지를 갖습니다.
13
12
14
13
-**`writable`** -- `true`이면 값을 수정할 수 있습니다. 그렇지 않다면 읽기만 가능합니다.
15
14
-**`enumerable`** -- `true`이면 반복문을 사용해 나열할 수 있습니다. 그렇지 않다면 반복문을 사용해 나열할 수 없습니다.
@@ -19,13 +18,10 @@
19
18
20
19
자 이제 본격적으로 프로퍼티 플래그에 대해 다뤄봅시다. 먼저 플래그를 얻는 방법을 알아보겠습니다.
21
20
22
-
<<<<<<< HEAD
23
-
[Object.getOwnPropertyDescriptor](mdn:js/Object/getOwnPropertyDescriptor)메서드를 사용하면 특정 프로퍼티에 대한 정보를 *모두* 얻을 수 있습니다.
24
-
=======
25
-
The method [Object.getOwnPropertyDescriptor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor) allows to query the *full* information about a property.
26
-
>>>>>>> upstream/master
21
+
[Object.getOwnPropertyDescriptor](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor) 메서드를 사용하면 특정 프로퍼티에 대한 정보를 *모두* 얻을 수 있습니다.
27
22
28
23
문법:
24
+
29
25
```js
30
26
let descriptor =Object.getOwnPropertyDescriptor(obj, propertyName);
31
27
```
@@ -42,12 +38,12 @@ let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName);
42
38
43
39
```js run
44
40
let user = {
45
-
name:"John"
41
+
name:"John",
46
42
};
47
43
48
-
let descriptor =Object.getOwnPropertyDescriptor(user, 'name');
44
+
let descriptor =Object.getOwnPropertyDescriptor(user, "name");
메서드 [Object.defineProperty](mdn:js/Object/defineProperty)를 사용하면 플래그를 변경할 수 있습니다.
63
-
=======
64
-
To change the flags, we can use [Object.defineProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty).
65
-
>>>>>>> upstream/master
57
+
메서드 [Object.defineProperty](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)를 사용하면 플래그를 변경할 수 있습니다.
`defineProperty`메서드는 객체에 해당 프로퍼티가 있으면 플래그를 원하는 대로 변경해줍니다. 프로퍼티가 없으면 인수로 넘겨받은 정보를 이용해 새로운 프로퍼티를 만듭니다. 이때 플래그 정보가 없으면 플래그 값은 자동으로 `false`가 됩니다.
71
+
`defineProperty`메서드는 객체에 해당 프로퍼티가 있으면 플래그를 원하는 대로 변경해줍니다. 프로퍼티가 없으면 인수로 넘겨받은 정보를 이용해 새로운 프로퍼티를 만듭니다. 이때 플래그 정보가 없으면 플래그 값은 자동으로 `false`가 됩니다.
80
72
81
73
아래 예시를 보면 프로퍼티 `name`이 새로 만들어지고, 모든 플래그 값이 `false`가 된 것을 확인할 수 있습니다.
82
74
@@ -128,13 +120,8 @@ user.name = "Pete"; // Error: Cannot assign to read only property 'name'
128
120
129
121
이제 `defineProperty`를 사용해 `writable` 플래그를 `true`로 변경하지 않는 한 그 누구도 객체의 이름을 변경할 수 없게 되었습니다.
130
122
131
-
<<<<<<< HEAD
132
123
```smart header="에러는 엄격 모드에서만 발생합니다."
133
-
비 엄격 모드에선 읽기 전용 프로퍼티에 값을 쓰려고 해도 에러가 발생하지 않습니다. 다만 이때 값을 변경하는 것은 불가능합니다. 비 엄격 모드에선 이와 같이 플래그에서 정한 규칙을 위반하는 행위는 에러 없이 그냥 무시됩니다.
134
-
=======
135
-
```smart header="Errors appear only in strict mode"
136
-
In non-strict mode, no errors occur when writing to non-writable properties and such. But the operation still won't succeed. Flag-violating actions are just silently ignored in non-strict.
137
-
>>>>>>> upstream/master
124
+
비 엄격 모드에선 읽기 전용 프로퍼티에 값을 써도 에러가 발생하지 않습니다. 다만 이때 값을 변경하는 것은 불가능합니다. 비 엄격 모드에선 이와 같이 플래그에서 정한 규칙을 위반하는 행위는 에러 없이 그냥 무시됩니다.
138
125
```
139
126
140
127
아래 예시는 위 예시와 동일하게 동작합니다. 다만 아래 예시에선 `defineProperty` 메서드를 사용해 프로퍼티를 밑바닥부터 만들어 보았습니다.
@@ -166,7 +153,7 @@ let user = {
166
153
name:"John",
167
154
toString() {
168
155
returnthis.name;
169
-
}
156
+
},
170
157
};
171
158
172
159
//커스텀 toString은 for...in을 사용해 열거할 수 있습니다.
@@ -205,18 +192,14 @@ alert(Object.keys(user)); // name
205
192
206
193
구성 가능하지 않음을 나타내는 플래그(non-configurable flag)인 `configurable:false`는 몇몇 내장 객체나 프로퍼티에 기본으로 설정되어있습니다.
207
194
208
-
<<<<<<< HEAD
209
-
어떤 프로퍼티의 `configurable` 플래그가 `false`로 설정되어 있다면 해당 프로퍼티는 객체에서 지울 수 없습니다.
210
-
=======
211
-
A non-configurable property can't be deleted, its attributes can't be modified.
212
-
>>>>>>> upstream/master
195
+
어떤 프로퍼티의 `configurable` 플래그가 `false`로 설정되어 있다면 해당 프로퍼티는 객체에서 지울 수 없고, 플래그 값도 수정할 수 없습니다.
213
196
214
197
내장 객체 `Math`의 `PI` 프로퍼티가 대표적인 예입니다. 이 프로퍼티는 쓰기와 열거, 구성이 불가능합니다.
215
198
216
199
```js run
217
-
let descriptor =Object.getOwnPropertyDescriptor(Math, 'PI');
200
+
let descriptor =Object.getOwnPropertyDescriptor(Math, "PI");
구성 가능하지 않은 프로퍼티라도 `writable: true`를 `false`로 변경할 수 있습니다. 이렇게 하면 값 변경을 막을 수 있습니다. 반대로 false를 true로 변경하는 것은 불가능합니다.
314
272
315
-
We can change `writable: true` to `false` for a non-configurable property, thus preventing its value modification (to add another layer of protection). Not the other way around though.
316
-
>>>>>>> upstream/master
317
273
```
318
274
319
275
## Object.defineProperties
320
276
321
-
<<<<<<< HEAD
322
-
[Object.defineProperties(obj, descriptors)](mdn:js/Object/defineProperties) 메서드를 사용하면 프로퍼티 여러 개를 한 번에 정의할 수 있습니다.
323
-
=======
324
-
There's a method [Object.defineProperties(obj, descriptors)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties) that allows to define many properties at once.
325
-
>>>>>>> upstream/master
277
+
[Object.defineProperties(obj, descriptors)](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties) 메서드를 사용하면 프로퍼티 여러 개를 한 번에 정의할 수 있습니다.
[Object.getOwnPropertyDescriptors(obj)](mdn:js/Object/getOwnPropertyDescriptors) 메서드를 사용하면 프로퍼티 설명자를 전부 한꺼번에 가져올 수 있습니다.
353
-
=======
354
-
To get all property descriptors at once, we can use the method [Object.getOwnPropertyDescriptors(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors).
355
-
>>>>>>> upstream/master
303
+
[Object.getOwnPropertyDescriptors(obj)](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors) 메서드를 사용하면 프로퍼티 설명자를 한꺼번에 가져올 수 있습니다.
356
304
357
305
이 메서드를 `Object.defineProperties`와 함께 사용하면 객체 복사 시 플래그도 함께 복사할 수 있습니다.
358
306
@@ -364,64 +312,38 @@ let clone = Object.defineProperties({}, Object.getOwnPropertyDescriptors(obj));
364
312
365
313
```js
366
314
for (let key in user) {
367
-
clone[key] = user[key]
315
+
clone[key] = user[key];
368
316
}
369
317
```
370
318
371
-
그런데 이 방법은 플래그는 복사하지 않습니다. 플래그 정보도 복사하려면 `Object.defineProperties`를 사용하시기 바랍니다.
319
+
그런데 이 방법은 플래그를 복사하지 않습니다. 플래그 정보도 복사하려면 `Object.defineProperties`를 사용하기 바랍니다.
372
320
373
-
<<<<<<< HEAD
374
-
위 샘플 코드처럼 `for..in`을 사용해 객체를 복사하면 심볼형 프로퍼티도 놓치게 됩니다. 하지만 `Object.getOwnPropertyDescriptors`는 심볼형 프로퍼티를 포함한 프로퍼티 설명자 *전체*를 반환합니다.
375
-
=======
376
-
Another difference is that `for..in` ignores symbolic and non-enumerable properties, but `Object.getOwnPropertyDescriptors` returns *all* property descriptors including symbolic and non-enumerable ones.
377
-
>>>>>>> upstream/master
321
+
또 다른 점은 `for..in`은 심볼형 프로퍼티와 열거가 불가능한 프로퍼티를 무시합니다. 하지만 `Object.getOwnPropertyDescriptors`는 심볼형 프로퍼티와 열거가 불가능한 프로퍼티를 포함한 프로퍼티 설명자 *전체*를 반환합니다.
378
322
379
323
## 객체 수정을 막아주는 다양한 메서드
380
324
381
325
프로퍼티 설명자는 특정 프로퍼티 하나를 대상으로 합니다.
382
326
383
327
아래 메서드를 사용하면 한 객체 내 프로퍼티 *전체*를 대상으로 하는 제약사항을 만들 수 있습니다.
0 commit comments