Iterable, Iterator, Generator이 늘 헷갈렸습니다. 이번 기회에 헷갈리지 않게 정리하고자 합니다.

Iterable이 뭐지?

Iterable protocol을 만족하는 객체입니다. Iterable protocol을 만족하는 모든 Object는 Iterable입니다.

Iterable protocol?

key로 Symbol.iterator를 갖고, 값으로 iterator를 갖는 객체를 Iterable protocol을 만족한다고 정의하고 이를 Iterable이라고 부릅니다. - mdn Iteration

const iterable = {
    // iterable. 
	[Symbol.iterator]() {
		// somthing
    }
}

Iterator는 뭘까?

Iterator protocol을 만족하는 함수(function)입니다.

Iterator protocol

• arguments가 없는 함수
• next() 메소드를 갖음
• next 메소드의 반환값은 { value, done } 객체를 반환

개인적으로 헷갈렸던 부분입니다. 객체라고도 하고 함수라고도 하니 개념이 혼란스러웠습니다.
하지만 JS에서 함수는 "일급 함수이다"라는 사실을 깨닫고 이해되기 시작했다.

Iterable의 쓰임

JS에서 ES6+이후로는 순회를 위해 Iterable을 사용합니다.
for...of, spread 연산자에서 사용됩니다.
JS에 빌트 인(내장된) Iterables는 Array, Set, Map...등이 있습니다.

Generator는 뭐지?

• *을 사용하여 정의
• Iterable이면서 Iterator인 객체
• yield 키워드를 사용

Generator의 장점

이 부분은 나중에도 다시 공부할 예정입니다.

일단 간단하게 설명하자면, 현재 context(실행 환경)를 저장하고 중단이 가능하며, 다시 그 지점부터 시작할 수 있습니다. 이는 Promise와 결합하여 강력한 비동기 툴이 됩니다.
MDN function*