[ES6+] 📝 이터러블 / 이터레이터

🔄 이터러블 / 이터레이터

주요 개념들

💡 이터러블 (Iterable)

이터레이터를 가진 객체입니다.

이터러블에는 문자열, Array, Set, Map 등이 있습니다.

💡 이터레이터 (Iterator)

{ value, done }을 반환하는 next()라는 이름의 메서드를 가진 객체입니다.

const 이터레이터 = 이터러블[Symbol.iterator]();
const { value, done } = 이터레이터.next();

를 만족해야 합니다.

특징

1. 순회 중에는 done: false 를 반환합니다.
2. 순회가 끝나면 done: true 를 반환해 알려줍니다.
   
   

💡 Well-Formed 이터레이터 (Iterator)

이터러블처럼 for ... of에 넣고 돌릴 수 있는 이터레이터입니다.

이터러블과 비슷하게 이터레이터[Symbol.iterator]()를 하면 자기자신을 얻을 수 있습니다.

const 이터레이터 = 이터러블[Symbol.iterator]();
const 자기자신 = 이터레이터[Symbol.iterator]();

console.log(이터레이터 === 자기자신); // true 출력

❓ 새 이터레이터가 아닌 기존의 이터레이터를 다시 내뱉는 이유는?

👉 처음부터 다시 순회하는 이터러블과는 달리 이터레이터를 돌릴 경우 나머지 부분만 순회하기 위해서입니다!

const 이터러블 = [1, 2, 3];
const 이터레이터 = 이터러블[Symbol.iterator]();

console.log(이터레이터.next()); // { value: 1, done: false } 출력

// 케이스 A: 이터러블로 순회
for (const item of 이터러블) console.log(item); // 1 2 3 출력

// 케이스 B: 이터레이터로 순회
for (const item of 이터레이터) console.log(item); // 2 3 출력

📌 정리

이터러블 / 이터레이터 프로토콜을 준수하면

ES6+의 for ... of / ... 연산자 / 제네레이터 등을 이용할 수 있어 편리합니다.