> For the complete documentation index, see [llms.txt](https://blog.javabom.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://blog.javabom.com/eunchu/javascript/iterable-iterator.md).

# Iterable Iterator 정의

### 이터러블/이터레이터 프로토콜에 대한 정의 & 간단 예제

#### Iterable 이란?

> 이터레이터를 리턴하는 \[Symbol.iterator]\() 를 가진 값

#### Iterator 란?

> { value, done } 객체를 리턴하는 next() 를 가진 값

{% hint style="info" %}
이터러블/이터레이터 프로토콜:

이터러블을 for ... of, 전개 연산자 등과 함께 동작하도록한 규약
{% endhint %}

1. 배열을 이용한 심플 예제

```javascript
const arr = [1,2,3];
for (const a of arr) console.log(a);
```

arr 은 \[Symbol.iterator] 라는 메서드를 가지고 있고, 평가하면 함수가 반환된다.

```javascript
arr[Symbol.iterator] // 입력시
f values() { [native code] } // 출력
```

```javascript
arr[Symbol.iterator]() // 함수 실행시,
Array Iterator() // 출력값

let iterator = arr[Symbol.iterator]();
iterator.next(); // 반환된 이터레이터 실행 시,
> {value: 1, done: false} // 안에있는 값이 하나씩 출력됨
...
> {value: undefined, done: true}
```

* **for ... of 문**은 `value`에 들어오는 값을 `a`에 담아서 출력하다가 `done` 값이 `true`가 되면 for문을 빠져나오게 되어 있다.
* `new Set([1,2,3])`, `new Map()` 역시 동일하다.

### 참고 링크

### mdn :  [The iterable protocol mdn](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Iteration_protocols) <a href="#iterable" id="iterable"></a>

### &#x20;            [한글 버전](https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Iterators_and_Generators) <a href="#iterable" id="iterable"></a>