# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://blog.javabom.com/eunchu/javascript/iterable-iterator.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.