Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
218 changes: 29 additions & 189 deletions 1-js/05-data-types/05-array-methods/article.md

Large diffs are not rendered by default.

61 changes: 0 additions & 61 deletions 1-js/05-data-types/06-iterable/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,7 @@

*반복 가능한(iterable, 이터러블)* 객체는 배열을 일반화한 객체입니다. 이터러블 이라는 개념을 사용하면 어떤 객체에든 `for..of` 반복문을 적용할 수 있습니다.

<<<<<<< HEAD
배열은 대표적인 이터러블입니다. 배열 외에도 다수의 내장 객체가 반복 가능합니다. 문자열 역시 이터러블의 예입니다.
=======
*Iterable* objects are a generalization of arrays. That's a concept that allows us to make any object useable in a `for..of` loop.
>>>>>>> upstream/master

배열이 아닌 객체가 있는데, 이 객체가 어떤 것들의 컬렉션(목록, 집합 등)을 나타내고 있는 경우, `for..of` 문법을 적용할 수만 있다면 컬렉션을 순회하는데 유용할 겁니다. 이게 가능하도록 해봅시다.

Expand All @@ -29,21 +25,12 @@ let range = {
// for(let num of range) ... num=1,2,3,4,5
```

<<<<<<< HEAD
`range`를 이터러블로 만들려면(`for..of`가 동작하도록 하려면) 객체에 `Symbol.iterator`(특수 내장 심볼)라는 메서드를 추가해 아래와 같은 일이 벌어지도록 해야 합니다.

1. `for..of`가 시작되자마자 `for..of`는 `Symbol.iterator`를 호출합니다(`Symbol.iterator`가 없으면 에러가 발생합니다). `Symbol.iterator`는 반드시 *이터레이터(iterator, 메서드 `next`가 있는 객체)* 를 반환해야 합니다.
2. 이후 `for..of`는 *반환된 객체(이터레이터)만*을 대상으로 동작합니다.
3. `for..of`에 다음 값이 필요하면, `for..of`는 이터레이터의 `next()`메서드를 호출합니다.
4. `next()`의 반환 값은 `{done: Boolean, value: any}`와 같은 형태이어야 합니다. `done=true`는 반복이 종료되었음을 의미합니다. `done=false`일땐 `value`에 다음 값이 저장됩니다.
=======
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).

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`.
2. Onward, `for..of` works *only with that returned object*.
3. When `for..of` wants the next value, it calls `next()` on that object.
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.
>>>>>>> upstream/master

`range`를 반복 가능한 객체로 만들어주는 코드는 다음과 같습니다.

Expand All @@ -56,13 +43,8 @@ let range = {
// 1. for..of 최초 호출 시, Symbol.iterator가 호출됩니다.
range[Symbol.iterator] = function() {

<<<<<<< HEAD
// Symbol.iterator는 이터레이터 객체를 반환합니다.
// 2. 이후 for..of는 반환된 이터레이터 객체만을 대상으로 동작하는데, 이때 다음 값도 정해집니다.
=======
// ...it returns the iterator object:
// 2. Onward, for..of works only with the iterator object below, asking it for next values
>>>>>>> upstream/master
return {
current: this.from,
last: this.to,
Expand Down Expand Up @@ -157,11 +139,7 @@ for (let char of str) {

## 이터레이터를 명시적으로 호출하기

<<<<<<< HEAD
이터레이터를 어떻게 명시적으로 사용할 수 있는지 살펴보면서 좀 더 깊게 이해해봅시다.
=======
For deeper understanding, let's see how to use an iterator explicitly.
>>>>>>> upstream/master

`for..of`를 사용했을 때와 동일한 방법으로 문자열을 순회할 건데, 이번엔 직접 호출을 통해서 순회해보겠습니다. 다음 코드는 문자열 이터레이터를 만들고, 여기서 값을 '수동으로' 가져옵니다.

Expand All @@ -186,28 +164,16 @@ while (true) {

## 이터러블과 유사 배열 [#array-like]

<<<<<<< HEAD
비슷해 보이지만 아주 다른 용어 두 가지가 있습니다. 헷갈리지 않으려면 두 용어를 잘 이해하고 있어야 합니다.
=======
Two official terms look similar, but are very different. Please make sure you understand them well to avoid the confusion.
>>>>>>> upstream/master

- *이터러블(iterable)* 은 위에서 설명한 바와 같이 메서드 `Symbol.iterator`가 구현된 객체입니다.
- *유사 배열(array-like)* 은 인덱스와 `length` 프로퍼티가 있어서 배열처럼 보이는 객체입니다.

<<<<<<< HEAD
브라우저 등의 호스트 환경에서 자바스크립트를 사용해 문제를 해결할 때 이터러블 객체나 유사 배열 객체 혹은 둘 다인 객체를 만날 수 있습니다.
=======
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.
>>>>>>> upstream/master

이터러블 객체(`for..of` 를 사용할 수 있음)이면서 유사배열 객체(숫자 인덱스와 `length` 프로퍼티가 있음)인 문자열이 대표적인 예입니다.

<<<<<<< HEAD
이터러블 객체라고 해서 유사 배열 객체는 아닙니다. 유사 배열 객체라고 해서 이터러블 객체인 것도 아닙니다.
=======
But an iterable may not be array-like. And vice versa an array-like may not be iterable.
>>>>>>> upstream/master

위 예시의 `range`는 이터러블 객체이긴 하지만 인덱스도 없고 `length` 프로퍼티도 없으므로 유사 배열 객체가 아닙니다.

Expand Down Expand Up @@ -251,13 +217,8 @@ alert(arr.pop()); // World (메서드가 제대로 동작합니다.)

이터러블을 사용한 예시는 다음과 같습니다.

<<<<<<< HEAD
```js
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

원문은 js run인데 번역에서 js 로 바뀐 것 같습니다

// range는 챕터 위쪽 예시에서 그대로 가져왔다고 가정합시다.
=======
```js run
// assuming that range is taken from the example above
>>>>>>> upstream/master
let arr = Array.from(range);
alert(arr); // 1,2,3,4,5 (배열-문자열 형 변환이 제대로 동작합니다.)
```
Expand All @@ -271,13 +232,8 @@ Array.from(obj[, mapFn, thisArg])

예시:

<<<<<<< HEAD
```js
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기도 js -> js run으로 바꿔야 할 것 같아요

// range는 챕터 위쪽 예시에서 그대로 가져왔다고 가정합시다.
=======
```js run
// assuming that range is taken from the example above
>>>>>>> upstream/master

// 각 숫자를 제곱
let arr = Array.from(range, num => num * num);
Expand Down Expand Up @@ -313,11 +269,7 @@ for (let char of str) {
alert(chars);
```

<<<<<<< HEAD
어쨌든 `Array.from`을 사용한 예시가 더 짧습니다.
=======
...But it is shorter.
>>>>>>> upstream/master

`Array.from`을 사용하면 서로게이트 쌍을 처리할 수 있는 `slice`를 직접 구현할 수도 있습니다.

Expand All @@ -339,29 +291,16 @@ alert( str.slice(1, 3) ); // 쓰레깃값 출력 (영역이 다른 특수 값)

`for..of`을 사용할 수 있는 객체를 *이터러블*이라고 부릅니다.

<<<<<<< HEAD
- 이터러블엔 메서드 `Symbol.iterator`가 반드시 구현되어 있어야 합니다.
- `obj[Symbol.iterator]`의 결과는 *이터레이터*라고 부릅니다. 이터레이터는 이어지는 반복 과정을 처리합니다.
- 이터레이터엔 객체 `{done: Boolean, value: any}`을 반환하는 메서드 `next()`가 반드시 구현되어 있어야 합니다. 여기서 `done:true`은 반복이 끝났음을 의미하고 그렇지 않은 경우엔 `value`가 다음 값이 됩니다.
- 메서드 `Symbol.iterator`는 `for..of`에 의해 자동으로 호출되는데, 개발자가 명시적으로 호출하는 것도 가능합니다.
- 문자열이나 배열 같은 내장 이터러블에도 `Symbol.iterator`가 구현되어 있습니다.
- 문자열 이터레이터는 서로게이트 쌍을 지원합니다.
=======
- Technically, iterables must implement the method named `Symbol.iterator`.
- The result of `obj[Symbol.iterator]()` is called an *iterator*. It handles further iteration process.
- 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.
- The `Symbol.iterator` method is called automatically by `for..of`, but we also can do it directly.
- Built-in iterables like strings or arrays, also implement `Symbol.iterator`.
- String iterator knows about surrogate pairs.
>>>>>>> upstream/master


인덱스와 `length` 프로퍼티가 있는 객체는 *유사 배열*이라 불립니다. 유사 배열 객체엔 다양한 프로퍼티와 메서드가 있을 수 있는데 배열 내장 메서드는 없습니다.

명세서를 보면 대부분의 메서드는 '진짜' 배열이 아닌 이터러블이나 유사 배열을 대상으로 동작한다고 쓰여 있는걸 볼 수 있습니다. 이 방법이 더 추상적이기 때문입니다.

<<<<<<< HEAD
`Array.from(obj[, mapFn, thisArg])`을 사용하면 이터러블이나 유사 배열인 `obj`를 진짜 `Array`로 만들 수 있습니다. 이렇게 하면 `obj`에도 배열 메서드를 사용할 수 있죠. 선택 인수 `mapFn`와 `thisArg`는 각 요소에 함수를 적용할 수 있게 해줍니다.
=======
`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.
>>>>>>> upstream/master
4 changes: 0 additions & 4 deletions 1-js/05-data-types/07-map-set/03-iterable-keys/task.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,7 @@ importance: 5

# 반복 가능한 객체의 키

<<<<<<< HEAD
`map.keys()`를 사용해 배열을 반환받고, 이 배열을 변수에 저장해 `.push`와 같은 배열 메서드를 적용하고 싶다고 해봅시다.
=======
We'd like to get an array of `map.keys()` in a variable and then apply array-specific methods to it, e.g. `.push`.
>>>>>>> upstream/master

작동하지 않네요.

Expand Down
Loading