11
2- #프로퍼티획득자와 설정자
2+ #프로퍼티getter와 setter
33
4- 두 종류의 프로퍼티가 있습니다 .
4+ 프로퍼티는 두 종류로 나뉩니다 .
55
6- 첫번째는 * 데이터 프로퍼티(dataproperties )* 입니다.이미 데이터프로퍼티가 어떻게 작동하는지 알고 있습니다. 지금까지 사용해온 모든 프로퍼티는 데이터 프로퍼티입니다 .
6+ 첫번째 종류는 * 데이터 프로퍼티(dataproperty )* 입니다.지금까지 사용한 모든 프로퍼티는 데이터프로퍼티입니다. 데이터 프로퍼티 조작 방법에 대해선 모두 알고 계실 것이라 생각합니다 .
77
8- 두번째 프로퍼티는 새로운 것입니다. * 접근자 프로퍼티(accessorproperties )* 입니다 . 접근자프로퍼티는 기본적으로 값을 획득하고 설정하는 일을 하는함수입니다. 하지만 외부 코드에서는 일반적인 프로퍼티처럼 보입니다.
8+ 두번째는 * 접근자 프로퍼티(accessorproperty )* 라 불리는 새로운 종류의 프로퍼티입니다 . 접근자프로퍼티의 본질은 함수인데, 이 함수는 값을 획득(get)하고 설정(set) 하는역할을 담당합니다. 그런데 외부 코드에서는 함수가 아닌 일반적인 프로퍼티처럼 보입니다.
99
10- ##Getters와 setters
10+ ##getter와 setter
1111
12- 접근자 프로퍼티는 'getter'와 'setter' 메서드로표현합니다 . 객체 리터럴(object literal)에서 ` get ` 과` set ` 으로표시합니다 .
12+ 접근자 프로퍼티는 'getter(획득자) '와 'setter(설정자) ' 메서드로표현됩니다 . 객체 리터럴 안에서 getter와 setter 메서드는 ` get ` 과` set ` 으로나타낼 수 있습니다 .
1313
1414``` js
1515let obj= {
1616* ! * getpropName ()*/ ! * {
17- // getter,해당 코드는 obj.propName을획득할 때실행됩니다.
17+ // getter, obj.propName을실행할 때실행되는 코드
1818 },
1919
2020* ! * setpropName (value)*/ ! * {
21- // setter,해당 코드는 obj.propNAme = value를설정할 때실행됩니다.
21+ // setter, obj.propNAme = value를실행할 때실행되는 코드
2222 }
2323};
2424```
2525
26- getter는 ` obj.propName ` 을읽을 때 작동하고, setter는 읽은 값이 할당될 때 작동합니다 .
26+ getter 메서드는 ` obj.propName ` 을사용해 프로퍼티를 읽으려고 할 때 실행되고, setter 메서드는 ` obj.propNAme = value ` 으로 프로퍼티에 값을 할당하려 할 때 실행됩니다 .
2727
28- 예를 들면, ` name ` 과` surname ` 프로퍼티를 가진 ` user ` 라는 객체가 있습니다 .
28+ 프로퍼티 ` name ` 과` surname ` 이 있는 객체 ` user ` 를 만들어봅시다 .
2929
3030``` js
3131let user= {
@@ -34,7 +34,7 @@ let user = {
3434};
3535```
3636
37- 지금 ` fullName ` 이라는 프로퍼티를추가하길 원합니다. 그 ' fullName'은 ` 'John Smith' ` 라고 하려고 합니다. 물론, 이미 존재하는 정보를 복사-붙여넣기하기를 원하지는 않습니다. 그래서 접근자로 해당 정보를 구현하려고 합니다 .
37+ 이 객체에 ` fullName ` 이라는 프로퍼티를추가해 ` fullName ` 이 ` 'John Smith' ` 가 되도록 해봅시다. 기존 값을 복사-붙여넣기하지 않고 ` fullName ` 이 ` 'John Smith' ` 가 되도록 하려면 접근자 프로퍼티를 구현하면 됩니다 .
3838
3939``` js run
4040let user= {
@@ -53,9 +53,9 @@ alert(user.fullName); // John Smith
5353*/ ! *
5454```
5555
56- 외부에서는 접근자프로퍼티가 평범하게 보입니다. 이것이 접근자프로퍼티의 아이디어입니다. ` user.fullName ` 을 함수로 * 호출* 하지 않고, 평범하게* 읽습니다 * .뒤에서 getter가 작동합니다 .
56+ 바깥 코드에선 접근자프로퍼티를 일반 프로퍼티처럼 사용할 수 있습니다. 접근자프로퍼티는 이런 아이디어에서 출발했습니다. 접근자 프로퍼티를 사용하면 함수처럼 * 호출* 하지 않고,일반 프로퍼티에서 값에 접근하는 것처럼 평범하게` user.fullName ` 을 사용해 프로퍼티 값을 * 얻을 수 있습니다 * .나머지 작업은 getter 메서드가 뒷단에서 처리해줍니다 .
5757
58- 지금 ` fullName ` 은getter만 가집니다. ` user.fullName= ` 와 같이 할당하려고시도하면, 에러가일어날 것입니다 .
58+ 한편, 위 예시의 ` fullName ` 은getter 메서드만 가지고 있기 때문에 ` user.fullName= ` 을 사용해 값을 할당하려고하면 에러가발생합니다 .
5959
6060``` js run
6161let user= {
@@ -65,11 +65,11 @@ let user = {
6565};
6666
6767* ! *
68- user .fullName = " Test" // Error (property has only a getter )
68+ user .fullName = " Test" // Error (프로퍼티에 getter 메서드만 있어서 에러가 발생합니다. )
6969*/ ! *
7070```
7171
72- ` user.fullName ` 에setter를 추가해서 고쳐봅시다.
72+ ` user.fullName ` 에setter 메서드를 추가해 에러가 발생하지 않도록 고쳐봅시다.
7373
7474``` js run
7575let user= {
@@ -87,33 +87,33 @@ let user = {
8787*/ ! *
8888};
8989
90- // 주어진값으로 실행된 fullName을 설정합니다 .
90+ // 주어진값을 사용해 set fullName이 실행됩니다 .
9191user .fullName = " Alice Cooper"
9292
9393alert (user .name );// Alice
9494alert (user .surname );// Cooper
9595```
9696
97- 결과적으로 ` fullName ` 이라는가상의 프로퍼티를 가집니다. 이 프로퍼티는 읽고 쓸수 있습니다. 그러나 사실 존재하지 않습니다.
97+ 이렇게 getter와 setter 메서드를 구현하면 객체엔 ` fullName ` 이라는'가상'의 프로퍼티가 생깁니다. 가상의 프로퍼티는 읽고 쓸순 있지만 실제로는 존재하지 않습니다.
9898
99- ```smart header="` delete ` 처리 방법 없음 "
100- 접근자프로퍼티의 삭제를 처리하는 메서드가 없습니다. getter/setter 메서드만존재합니다 .
99+ ```smart header="` delete ` 메서드는 없습니다. "
100+ 접근자프로퍼티를 삭제해 주는 메서드는 존재하지 않습니다. 접근자 프로퍼티엔 오직 getter/setter 메서드만사용할 수 있습니다 .
101101```
102102
103- ## 접근자설명자(Accessor descriptors)
103+ ## 접근자프로퍼티 설명자
104104
105- 데이터프로퍼티와 비교하면 접근자프로퍼티를 위한 설명자는 다릅니다.
105+ 데이터프로퍼티의 설명자와 접근자프로퍼티의 설명자는 다릅니다.
106106
107- 접근자프로퍼티의 경우 `값`과 `쓰기 기능`은 없지만, 대신에 `get`과 `set`
107+ 접근자프로퍼티엔 설명자 `value`와 `writable`가 없는 대신에 `get`과 `set`이라는 함수가 있습니다.
108108
109- 그래서 접근자설명자는 다음과 같은것들을 가질 수 있습니다 .
109+ 따라서 접근자프로퍼티는 다음과 같은설명자를 갖습니다 .
110110
111- - **`get`** -- 인수가없고 프로퍼티를 읽을 때작동하는 함수
112- - **`set`** --하나의 인수를 가지고 프로퍼티를 설정할 때 호출되는 함수
113- - **`enumerable`** -- 데이터 프로퍼티와동일
114- - **`configurable`** -- 데이터 프로퍼티와동일
111+ - **`get`** -- 인수가없는 함수로, 프로퍼티를 읽을 때동작함
112+ - **`set`** --인수가 하나인 함수로, 프로퍼티에 값을 쓸 때 호출됨
113+ - **`enumerable`** -- 데이터 프로퍼티와동일함
114+ - **`configurable`** -- 데이터 프로퍼티와동일함
115115
116- 예를 들어 `defineProperty`를 사용하여 `fullName` 접근자를 생성하기 위해, ` get`과 `set`으로 설명자를 전달할 수 있습니다.
116+ 아래와 같이 `defineProperty`에 설명자 ` get`과 `set`을 전달하면 `fullName`을 위한 접근자를 만들 수 있습니다.
117117
118118```js run
119119let user = {
@@ -138,9 +138,9 @@ alert(user.fullName); // John Smith
138138for(let key in user) alert(key); // name, surname
139139```
140140
141- 프로퍼티는 접근자(` get/set ` 메서드를 가짐) 또는 데이터 프로퍼티(` value ` 를 가짐) 중하나여야 한다는 점을 기억해 주세요. 둘 다 일수는 없습니다 .
141+ 프로퍼티는 접근자 프로퍼티 (` get/set ` 메서드를 가짐)나 데이터 프로퍼티(` value ` 를 가짐) 중한 종류에만 속하고 둘 다에 속할 수 없다는 점을 항상 유의하시기 바랍니다 .
142142
143- 같은 설명자에 ` get ` 과` value ` 를 동시에제공하려 하면 에러가일어납니다 .
143+ 한 프로퍼티에 ` get ` 과` value ` 를 동시에설정하면 에러가발생합니다 .
144144
145145``` js run
146146* ! *
@@ -155,11 +155,11 @@ Object.defineProperty({}, 'prop', {
155155});
156156```
157157
158- ##더 똑똑한 getters/setters
158+ ##getter와 setter 똑똑하게 활용하기
159159
160- Getters/setters는 '실제' 프로퍼티값에 대한 래퍼(wrappers)로 사용해서 보다 많은 제어권을 얻을 수 있습니다.
160+ getter와 setter를 '실제' 프로퍼티값을 감싸는 래퍼(wrapper)처럼 사용하면, 프로퍼티 값을 원하는 대로 통제할 수 있습니다.
161161
162- 예를 들어 ` user ` 가 너무 짧은 이름을 가지는 것을 방지하기를 원한다면, setter ` name ` 을 가질 수 있습니다.그리고 별도의 프로퍼티` _name ` 안에 값을 보관할 수 있습니다 .
162+ 아래 예시에선 ` name ` 을 위한 setter를 만들어 ` user ` 의 이름이 너무 짧아지는 걸 방지하고 있습니다.실제 값은 별도의 프로퍼티` _name ` 에 저장됩니다 .
163163
164164``` js run
165165let user= {
@@ -169,7 +169,7 @@ let user = {
169169
170170set name (value ) {
171171if (value .length < 4 ) {
172- alert (" 이름이 너무 짧습니다.적어도 4글자 이상이 필요합니다 ."
172+ alert (" 입력하신 값이 너무 짧습니다.네 글자 이상으로 구성된 이름을 입력하세요 ."
173173return ;
174174 }
175175this ._name = value;
@@ -179,19 +179,19 @@ let user = {
179179user .name = " Pete"
180180alert (user .name );// Pete
181181
182- user .name = " " // Name이 너무짧습니다...
182+ user .name = " " // 너무짧은 이름을 할당하려 함
183183```
184184
185- 이름은` _name ` 프로퍼티에 저장되고,접근은 getter와 setter를 통해이루어집니다 .
185+ ` user ` 의 이름은` _name ` 에 저장되고,프로퍼티에 접근하는 것은 getter와 setter를 통해이뤄집니다 .
186186
187- 기술적으로 외부코드는 여전히 ` user._name ` 을사용해서 이름에 바로 접근할 수있을지 모릅니다 . 그러나 밑줄` '_' ` 로 시작하는 프로퍼티는내부적인 것이고 외부에 있는 객체로부터 접근되지 않아야 한다는 잘 알려진 합의가 있습니다 .
187+ 기술적으론 외부코드에서 ` user._name ` 을사용해 이름에 바로 접근할 수있습니다 . 그러나 밑줄` "_" ` 로 시작하는 프로퍼티는객체 내부에서만 활용하고, 외부에서는 건드리지 않는 것이 관습입니다 .
188188
189189
190- ##호환성을위한 사용
190+ ##호환성을위해 사용하기
191191
192- 접근자의 주요 용도중 하나는, '정규' 데이터 프로퍼티를 getter와setter로 교체하고 행동을 수정하여 언제든지 제어할 수 있도록 한다는 것입니다 .
192+ 접근자 프로퍼티는 언제 어느 때나 getter와setter를 사용해 데이터 프로퍼티의 행동과 값을 원하는 대로 조정할 수 있게 해준다는 점에서 유용합니다 .
193193
194- 데이터 프로퍼티` name ` 과` age ` 를 사용해서유저 객체를구현했다고 해봅시다 .
194+ 데이터 프로퍼티` name ` 과` age ` 를 사용해서사용자를 나타내는 객체를구현한다고 가정해봅시다 .
195195
196196``` js
197197function User (name ,age ) {
@@ -201,10 +201,10 @@ function User(name, age) {
201201
202202let john= new User (" John" 25 );
203203
204- alert (john .age );// 25
204+ alert (john .age // 25
205205```
206206
207- 하지만 이런 것은 바뀔지도 모릅니다. ` age ` 대신에` birthday ` 를저장하기로 할 수도 있습니다. 좀 더 정확하고 편리하기때문입니다 .
207+ 그런데 곧 요구사항이 바뀌어서 ` age ` 대신에` birthday ` 를저장해야 한다고 해보겠습니다. ` age ` 보다는 ` birthday ` 가 더 정확하고 편리하기때문이죠 .
208208
209209``` js
210210function User (name ,birthday ) {
@@ -215,13 +215,13 @@ function User(name, birthday) {
215215let john= new User (" John" new Date (1992 ,6 ,1 ));
216216```
217217
218- 이제 ` age ` 프로퍼티를 그대로 사용하는 오래된 코드로 무엇을 해야 할까요?
218+ 이렇게 생성자 함수를 수정하면 기존 코드 중 프로퍼티 ` age ` 를 사용하고 있는 코드도 수정해 줘야 합니다.
219219
220- 이런 것들을 모두 찾아서고쳐볼 수 있습니다. 그러나 시간이걸리는 일이고, 그 코드가 다수의 다른 사람들이 사용한 코드라면 수정하기가 어려울 수 있습니다 . 게다가` age ` 는` user ` 안에있는 것이좋을까요?
220+ ` age ` 가 사용되는 부분을 모두 찾아서수정하는 것도 가능하지만, 시간이오래 걸립니다. 게다가 여러 사람이 ` age ` 를 사용하고 있다면 모두 찾아 수정하는 것 자체가 힘들죠 . 게다가` age ` 는` user ` 안에있어도 나쁠 것이없는 프로퍼티이기도 합니다.
221221
222- 그대로둡시다 .
222+ 기존 코드들은 그대로두도록 합시다 .
223223
224- ` age ` 를 위한 getter를 추가해서 문제를해결합니다 .
224+ 대신 ` age ` 를 위한 getter를 추가해서 문제를해결해 봅시다 .
225225
226226``` js run no-beautify
227227function User (name ,birthday ) {
@@ -241,8 +241,8 @@ function User(name, birthday) {
241241
242242let john= new User (" John" new Date (1992 ,6 ,1 ));
243243
244- alert (john .birthday );// birthday는 이용 가능합니다 .
245- alert (john .age );// age도 마찬가지입니다 .
244+ alert (john .birthday );// birthday를 사용할 수 있습니다 .
245+ alert (john .age );// age 역시 사용할 수 있습니다 .
246246```
247247
248- 이제오래된 코드도 작동하고,추가로 멋진 프로퍼티도가지게 되었습니다 .
248+ 이제기존 코드도잘 작동하고, 멋진 프로퍼티도새로 생겼네요 .