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/05-data-types/06-iterable/article.md
+2-63Lines changed: 2 additions & 63 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,11 +2,7 @@
2
2
3
3
*반복 가능한(iterable, 이터러블)* 객체는 배열을 일반화한 객체입니다. 이터러블 이라는 개념을 사용하면 어떤 객체에든 `for..of` 반복문을 적용할 수 있습니다.
4
4
5
-
<<<<<<< HEAD
6
5
배열은 대표적인 이터러블입니다. 배열 외에도 다수의 내장 객체가 반복 가능합니다. 문자열 역시 이터러블의 예입니다.
7
-
=======
8
-
*Iterable* objects are a generalization of arrays. That's a concept that allows us to make any object useable in a `for..of` loop.
9
-
>>>>>>> upstream/master
10
6
11
7
배열이 아닌 객체가 있는데, 이 객체가 어떤 것들의 컬렉션(목록, 집합 등)을 나타내고 있는 경우, `for..of` 문법을 적용할 수만 있다면 컬렉션을 순회하는데 유용할 겁니다. 이게 가능하도록 해봅시다.
12
8
@@ -29,21 +25,12 @@ let range = {
29
25
// for(let num of range) ... num=1,2,3,4,5
30
26
```
31
27
32
-
<<<<<<< HEAD
33
28
`range`를 이터러블로 만들려면(`for..of`가 동작하도록 하려면) 객체에 `Symbol.iterator`(특수 내장 심볼)라는 메서드를 추가해 아래와 같은 일이 벌어지도록 해야 합니다.
34
29
35
30
1.`for..of`가 시작되자마자 `for..of`는 `Symbol.iterator`를 호출합니다(`Symbol.iterator`가 없으면 에러가 발생합니다). `Symbol.iterator`는 반드시 *이터레이터(iterator, 메서드 `next`가 있는 객체)* 를 반환해야 합니다.
36
31
2. 이후 `for..of`는 *반환된 객체(이터레이터)만*을 대상으로 동작합니다.
37
32
3.`for..of`에 다음 값이 필요하면, `for..of`는 이터레이터의 `next()`메서드를 호출합니다.
38
33
4.`next()`의 반환 값은 `{done: Boolean, value: any}`와 같은 형태이어야 합니다. `done=true`는 반복이 종료되었음을 의미합니다. `done=false`일땐 `value`에 다음 값이 저장됩니다.
39
-
=======
40
-
To make the `range` object iterable (and thus let `for..of` work) we need to add a method to the object named `Symbol.iterator` (a special built-in symbol just for that).
41
-
42
-
1. When `for..of` starts, it calls that method once (or errors if not found). The method must return an *iterator* -- an object with the method `next`.
43
-
2. Onward, `for..of` works *only with that returned object*.
44
-
3. When `for..of` wants the next value, it calls `next()` on that object.
45
-
4. The result of `next()` must have the form `{done: Boolean, value: any}`, where `done=true` means that the loop is finished, otherwise `value` is the next value.
46
-
>>>>>>> upstream/master
47
34
48
35
`range`를 반복 가능한 객체로 만들어주는 코드는 다음과 같습니다.
49
36
@@ -56,13 +43,8 @@ let range = {
56
43
// 1. for..of 최초 호출 시, Symbol.iterator가 호출됩니다.
57
44
range[Symbol.iterator] =function() {
58
45
59
-
<<<<<<<HEAD
60
46
// Symbol.iterator는 이터레이터 객체를 반환합니다.
61
47
// 2. 이후 for..of는 반환된 이터레이터 객체만을 대상으로 동작하는데, 이때 다음 값도 정해집니다.
62
-
=======
63
-
// ...it returns the iterator object:
64
-
// 2. Onward, for..of works only with the iterator object below, asking it for next values
65
-
>>>>>>> upstream/master
66
48
return {
67
49
current:this.from,
68
50
last:this.to,
@@ -157,11 +139,7 @@ for (let char of str) {
157
139
158
140
## 이터레이터를 명시적으로 호출하기
159
141
160
-
<<<<<<< HEAD
161
142
이터레이터를 어떻게 명시적으로 사용할 수 있는지 살펴보면서 좀 더 깊게 이해해봅시다.
162
-
=======
163
-
For deeper understanding, let's see how to use an iterator explicitly.
164
-
>>>>>>> upstream/master
165
143
166
144
`for..of`를 사용했을 때와 동일한 방법으로 문자열을 순회할 건데, 이번엔 직접 호출을 통해서 순회해보겠습니다. 다음 코드는 문자열 이터레이터를 만들고, 여기서 값을 '수동으로' 가져옵니다.
167
145
@@ -186,28 +164,16 @@ while (true) {
186
164
187
165
## 이터러블과 유사 배열 [#array-like]
188
166
189
-
<<<<<<< HEAD
190
167
비슷해 보이지만 아주 다른 용어 두 가지가 있습니다. 헷갈리지 않으려면 두 용어를 잘 이해하고 있어야 합니다.
191
-
=======
192
-
Two official terms look similar, but are very different. Please make sure you understand them well to avoid the confusion.
193
-
>>>>>>> upstream/master
194
168
195
169
-*이터러블(iterable)* 은 위에서 설명한 바와 같이 메서드 `Symbol.iterator`가 구현된 객체입니다.
196
170
-*유사 배열(array-like)* 은 인덱스와 `length` 프로퍼티가 있어서 배열처럼 보이는 객체입니다.
197
171
198
-
<<<<<<< HEAD
199
172
브라우저 등의 호스트 환경에서 자바스크립트를 사용해 문제를 해결할 때 이터러블 객체나 유사 배열 객체 혹은 둘 다인 객체를 만날 수 있습니다.
200
-
=======
201
-
When we use JavaScript for practical tasks in a browser or any other environment, we may meet objects that are iterables or array-likes, or both.
202
-
>>>>>>> upstream/master
203
173
204
174
이터러블 객체(`for..of` 를 사용할 수 있음)이면서 유사배열 객체(숫자 인덱스와 `length` 프로퍼티가 있음)인 문자열이 대표적인 예입니다.
205
175
206
-
<<<<<<< HEAD
207
176
이터러블 객체라고 해서 유사 배열 객체는 아닙니다. 유사 배열 객체라고 해서 이터러블 객체인 것도 아닙니다.
208
-
=======
209
-
But an iterable may not be array-like. And vice versa an array-like may not be iterable.
210
-
>>>>>>> upstream/master
211
177
212
178
위 예시의 `range`는 이터러블 객체이긴 하지만 인덱스도 없고 `length` 프로퍼티도 없으므로 유사 배열 객체가 아닙니다.
213
179
@@ -251,13 +217,8 @@ alert(arr.pop()); // World (메서드가 제대로 동작합니다.)
251
217
252
218
이터러블을 사용한 예시는 다음과 같습니다.
253
219
254
-
<<<<<<< HEAD
255
-
```js
256
-
// range는 챕터 위쪽 예시에서 그대로 가져왔다고 가정합시다.
257
-
=======
258
220
```js run
259
-
// assuming that range is taken from the example above
260
-
>>>>>>> upstream/master
221
+
// range는 챕터 위쪽 예시에서 그대로 가져왔다고 가정합시다.
261
222
let arr =Array.from(range);
262
223
alert(arr); // 1,2,3,4,5 (배열-문자열 형 변환이 제대로 동작합니다.)
// assuming that range is taken from the example above
280
-
>>>>>>> upstream/master
236
+
// range는 챕터 위쪽 예시에서 그대로 가져왔다고 가정합시다.
281
237
282
238
// 각 숫자를 제곱
283
239
let arr =Array.from(range, num=> num * num);
@@ -313,11 +269,7 @@ for (let char of str) {
313
269
alert(chars);
314
270
```
315
271
316
-
<<<<<<< HEAD
317
272
어쨌든 `Array.from`을 사용한 예시가 더 짧습니다.
318
-
=======
319
-
...But it is shorter.
320
-
>>>>>>> upstream/master
321
273
322
274
`Array.from`을 사용하면 서로게이트 쌍을 처리할 수 있는 `slice`를 직접 구현할 수도 있습니다.
323
275
@@ -339,29 +291,16 @@ alert( str.slice(1, 3) ); // 쓰레깃값 출력 (영역이 다른 특수 값)
339
291
340
292
`for..of`을 사용할 수 있는 객체를 *이터러블*이라고 부릅니다.
341
293
342
-
<<<<<<< HEAD
343
294
- 이터러블엔 메서드 `Symbol.iterator`가 반드시 구현되어 있어야 합니다.
344
295
-`obj[Symbol.iterator]`의 결과는 *이터레이터*라고 부릅니다. 이터레이터는 이어지는 반복 과정을 처리합니다.
345
296
- 이터레이터엔 객체 `{done: Boolean, value: any}`을 반환하는 메서드 `next()`가 반드시 구현되어 있어야 합니다. 여기서 `done:true`은 반복이 끝났음을 의미하고 그렇지 않은 경우엔 `value`가 다음 값이 됩니다.
346
297
- 메서드 `Symbol.iterator`는 `for..of`에 의해 자동으로 호출되는데, 개발자가 명시적으로 호출하는 것도 가능합니다.
347
298
- 문자열이나 배열 같은 내장 이터러블에도 `Symbol.iterator`가 구현되어 있습니다.
348
299
- 문자열 이터레이터는 서로게이트 쌍을 지원합니다.
349
-
=======
350
-
- Technically, iterables must implement the method named `Symbol.iterator`.
351
-
- The result of `obj[Symbol.iterator]()` is called an *iterator*. It handles further iteration process.
352
-
- An iterator must have the method named `next()` that returns an object `{done: Boolean, value: any}`, here `done:true` denotes the end of the iteration process, otherwise the `value` is the next value.
353
-
- The `Symbol.iterator` method is called automatically by `for..of`, but we also can do it directly.
354
-
- Built-in iterables like strings or arrays, also implement `Symbol.iterator`.
355
-
- String iterator knows about surrogate pairs.
356
-
>>>>>>> upstream/master
357
300
358
301
359
302
인덱스와 `length` 프로퍼티가 있는 객체는 *유사 배열*이라 불립니다. 유사 배열 객체엔 다양한 프로퍼티와 메서드가 있을 수 있는데 배열 내장 메서드는 없습니다.
360
303
361
304
명세서를 보면 대부분의 메서드는 '진짜' 배열이 아닌 이터러블이나 유사 배열을 대상으로 동작한다고 쓰여 있는걸 볼 수 있습니다. 이 방법이 더 추상적이기 때문입니다.
362
305
363
-
<<<<<<< HEAD
364
306
`Array.from(obj[, mapFn, thisArg])`을 사용하면 이터러블이나 유사 배열인 `obj`를 진짜 `Array`로 만들 수 있습니다. 이렇게 하면 `obj`에도 배열 메서드를 사용할 수 있죠. 선택 인수 `mapFn`와 `thisArg`는 각 요소에 함수를 적용할 수 있게 해줍니다.
365
-
=======
366
-
`Array.from(obj[, mapFn, thisArg])` makes a real `Array` from an iterable or array-like `obj`, and we can then use array methods on it. The optional arguments `mapFn` and `thisArg` allow us to apply a function to each item.
0 commit comments