ES6 Iterator, Iterable 쉽게 이해하기

ES6에서 iterator, iterable 용어는 생각보다 혼동이 많이되는데요, 

스스로 정리하다가 다른분들께도 나름 도움이 될까 싶어서 글을 써보았습니다.

목차)

1.Iterator

2.Iterable 

3. Iterators that are iterable

4. well-formed iterable 

1. Iterator 
- iterator는 어떤 자료구조를 순회(traverse)하는데 쓰이는 pointer라고 생각하면 된다. 
- (ex: database에서의 cursor 역할)
- next method가 구현되어 있으면 Iterator

2. Iterable
- [Symbol.iterator] 라는 특정한(specific)이름의 iterator가 있으면 Iterable
- [Symbol.iterator]는 iterator이므로 위에서 봤듯이 당연히 next method가 구현되어 있어야 함.
- for of 구문으로 순회(traverse) 가능

3. Iterator이면서 Iterable
(1)위에서 말했듯, Iterator의 조건은 next method가 구현되어있어야 할 것.
(2)위에서 말했듯, Iterable의 조건은 [Symbol.iterator] 라는 이름의 iterator가 구현되어 있어야 할 것.

(1)에 따라서 일단 next method를 구현해보자.
{
  next: () => { }
}
next를 만들어주어서 (1)에 조건을 충족했다. 즉 위 객체는 iterator라고 말할 수 있다.

(2)에 따라서 [Symbol.iterator] 라는 이름의 iterator를 구현해보자.
{
  next: () => { },
  [Symbol.iterator]: function() { }

}
그런데 여기서 [Symbol.iterator]는 iterator로서 구현되어야 하기 때문에, 얘도 next가 필요하다.
하지만 우리는 이미 위 객체에서 next를 구현해놓았기 때문에 이 next를 가져다 쓰고 싶다.
{
  next: () => { },
  [Symbol.iterator]: function() {
    return this
  }
}
그러려면 그냥 위처럼 return this를 해주면 된다.

4. well-formed iterable 
ES6에서는 특별하게 이렇게 위처럼 [Symbol.iterator] 라는 iterator가 자기자신을 리턴할 때 

'well-formed iterable'(잘 정의된 iterable) 이라고 부른다.

코드 상으로는 obj[Symbol.iterator]() == obj 을 만족하면 'well-fromed iterable' 이다.

예제코드 README:
https://github.com/…/functional-js-st…/blob/master/README.md

p.s) 브런치가 코드 스니펫 지원이 안되서 일단은 보라색 컬러 + Georgia 폰트로 했는데 읽기 불편하실까봐 코드를 직접 스크린샷 찍어서 첨부했습니다. :)