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
Copy file name to clipboardExpand all lines: 1-js/07-object-properties/02-property-accessors/article.md
+12-16Lines changed: 12 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,15 +1,10 @@
1
-
2
1
# 프로퍼티 getter와 setter
3
2
4
3
객체의 프로퍼티는 두 종류로 나뉩니다.
5
4
6
-
첫 번째 종류는 *데이터 프로퍼티(data property)* 입니다. 지금까지 사용한 모든 프로퍼티는 데이터 프로퍼티입니다. 데이터 프로퍼티 조작 방법에 대해선 모두 알고 계실 것이라 생각합니다.
5
+
첫 번째 종류는 _데이터 프로퍼티(data property)_ 입니다. 지금까지 사용한 모든 프로퍼티는 데이터 프로퍼티입니다. 데이터 프로퍼티 조작 방법에 대해선 모두 알고 계실 것이라 생각합니다.
7
6
8
-
<<<<<<< HEAD
9
-
두 번째는 *접근자 프로퍼티(accessor property)* 라 불리는 새로운 종류의 프로퍼티입니다. 접근자 프로퍼티의 본질은 함수인데, 이 함수는 값을 획득(get)하고 설정(set)하는 역할을 담당합니다. 그런데 외부 코드에서는 함수가 아닌 일반적인 프로퍼티처럼 보입니다.
10
-
=======
11
-
The second type of property is something new. It's an *accessor property*. They are essentially functions that execute on getting and setting a value, but look like regular properties to an external code.
12
-
>>>>>>> upstream/master
7
+
두 번째는 _접근자 프로퍼티(accessor property)_ 라 불리는 새로운 종류의 프로퍼티입니다. 접근자 프로퍼티의 본질은 함수인데, 이 함수는 값을 획득(get)하고 설정(set)하는 역할을 담당합니다. 그런데 외부 코드에서는 함수가 아닌 일반적인 프로퍼티처럼 보입니다.
13
8
14
9
## getter와 setter
15
10
@@ -34,7 +29,7 @@ getter 메서드는 `obj.propName`을 사용해 프로퍼티를 읽으려고 할
34
29
```js
35
30
let user = {
36
31
name:"John",
37
-
surname:"Smith"
32
+
surname:"Smith",
38
33
};
39
34
```
40
35
@@ -57,7 +52,7 @@ alert(user.fullName); // John Smith
57
52
*/!*
58
53
```
59
54
60
-
바깥 코드에선 접근자 프로퍼티를 일반 프로퍼티처럼 사용할 수 있습니다. 접근자 프로퍼티는 이런 아이디어에서 출발했습니다. 접근자 프로퍼티를 사용하면 함수처럼 *호출* 하지 않고, 일반 프로퍼티에서 값에 접근하는 것처럼 평범하게 `user.fullName`을 사용해 프로퍼티 값을 *얻을 수 있습니다*. 나머지 작업은 getter 메서드가 뒷단에서 처리해줍니다.
55
+
바깥 코드에선 접근자 프로퍼티를 일반 프로퍼티처럼 사용할 수 있습니다. 접근자 프로퍼티는 이런 아이디어에서 출발했습니다. 접근자 프로퍼티를 사용하면 함수처럼 _호출_ 하지 않고, 일반 프로퍼티에서 값에 접근하는 것처럼 평범하게 `user.fullName`을 사용해 프로퍼티 값을 _얻을 수 있습니다_. 나머지 작업은 getter 메서드가 뒷단에서 처리해줍니다.
61
56
62
57
한편, 위 예시의 `fullName`은 getter 메서드만 가지고 있기 때문에 `user.fullName=`을 사용해 값을 할당하려고 하면 에러가 발생합니다.
63
58
@@ -169,11 +164,13 @@ let user = {
169
164
170
165
setname(value) {
171
166
if (value.length<4) {
172
-
alert("입력하신 값이 너무 짧습니다. 네 글자 이상으로 구성된 이름을 입력하세요.");
167
+
alert(
168
+
"입력하신 값이 너무 짧습니다. 네 글자 이상으로 구성된 이름을 입력하세요.",
169
+
);
173
170
return;
174
171
}
175
172
this._name= value;
176
-
}
173
+
},
177
174
};
178
175
179
176
user.name="Pete";
@@ -182,14 +179,13 @@ alert(user.name); // Pete
182
179
user.name=""; // 너무 짧은 이름을 할당하려 함
183
180
```
184
181
185
-
`user`의 이름은 `_name`에 저장되고, 프로퍼티에 접근하는 것은 getter와 setter를 통해 이뤄집니다.
182
+
`user`의 이름은 `_name`에 저장되고, 프로퍼티에 접근하는 것은 getter와 setter를 통해 이뤄집니다.
186
183
187
184
기술적으론 외부 코드에서 `user._name`을 사용해 이름에 바로 접근할 수 있습니다. 그러나 밑줄 `"_"` 로 시작하는 프로퍼티는 객체 내부에서만 활용하고, 외부에서는 건드리지 않는 것이 관습입니다.
188
185
186
+
## 호환성을 위해 사용하기
189
187
190
-
## 호환성을 위해 사용하기
191
-
192
-
접근자 프로퍼티는 언제 어느 때나 getter와 setter를 사용해 데이터 프로퍼티의 행동과 값을 원하는 대로 조정할 수 있게 해준다는 점에서 유용합니다.
188
+
접근자 프로퍼티는 언제 어느 때나 getter와 setter를 사용해 데이터 프로퍼티의 행동과 값을 원하는 대로 조정할 수 있게 해준다는 점에서 유용합니다.
193
189
194
190
데이터 프로퍼티 `name`과 `age`를 사용해서 사용자를 나타내는 객체를 구현한다고 가정해봅시다.
195
191
@@ -201,7 +197,7 @@ function User(name, age) {
201
197
202
198
let john =newUser("John", 25);
203
199
204
-
alert(john.age); // 25
200
+
alert(john.age); // 25
205
201
```
206
202
207
203
그런데 곧 요구사항이 바뀌어서 `age` 대신에 `birthday`를 저장해야 한다고 해보겠습니다. `age`보다는 `birthday`가 더 정확하고 편리하기 때문이죠.
0 commit comments