Iterator 패턴, 순회를 추상화하라

// 배열 순회
for (let i = 0; i < comments.length; i++) {
  render(comments[i]);
}

// 트리 순회 (답글 포함)
function traverse(node) {
  render(node);
  for (let i = 0; i < node.replies.length; i++) {
    traverse(node.replies[i]);
  }
}

// 페이지네이션 API
async function fetchAll() {
  let page = 1;
  while (true) {
    const res = await fetch(`/api/comments?page=${page}`);
    const data = await res.json();
    if (data.items.length === 0) break;
    data.items.forEach(render);
    page++;
  }
}

// 배열이든 트리이든 같은 문법
for (const item of comments) {
  render(item);
}

// Iterable 프로토콜
const iterable = {
  [Symbol.iterator]() {
    return iterator; // Iterator를 반환
  }
};

// Iterator 프로토콜
const iterator = {
  next() {
    return { value: '다음 값', done: false };
    // 또는 { value: undefined, done: true } (끝)
  }
};

// 모두 같은 for...of로 순회 가능
for (const char of 'hello') { ... }       // String
for (const item of [1, 2, 3]) { ... }     // Array
for (const entry of new Set([1, 2])) { ... } // Set
for (const [k, v] of new Map([['a', 1]])) { ... } // Map

const arr = ['a', 'b', 'c'];
const iter = arr[Symbol.iterator]();

iter.next(); // { value: 'a', done: false }
iter.next(); // { value: 'b', done: false }
iter.next(); // { value: 'c', done: false }
iter.next(); // { value: undefined, done: true }

class BinaryTree {
  constructor(value, left = null, right = null) {
    this.value = value;
    this.left = left;
    this.right = right;
  }

  // 제너레이터로 이터러블 구현 (전위 순회)
  *[Symbol.iterator]() {
    yield this.value;
    if (this.left) yield* this.left;   // 왼쪽 서브트리 위임
    if (this.right) yield* this.right; // 오른쪽 서브트리 위임
  }
}

const tree = new BinaryTree('A',
  new BinaryTree('B',
    new BinaryTree('D'),
    new BinaryTree('E')
  ),
  new BinaryTree('C',
    new BinaryTree('F')
  )
);

// 트리를 배열처럼 순회!
for (const node of tree) {
  console.log(node); // A, B, D, E, C, F
}

// 스프레드, 디스트럭처링도 가능
const nodes = [...tree];           // ['A', 'B', 'D', 'E', 'C', 'F']
const [first, second] = tree;      // first='A', second='B'

function* fibonacci() {
  let [a, b] = [0, 1];
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

// 무한이지만, 필요한 만큼만 가져옴
const fib = fibonacci();
fib.next().value; // 0
fib.next().value; // 1
fib.next().value; // 1
fib.next().value; // 2

// 처음 10개만
const first10 = [];
for (const n of fibonacci()) {
  if (first10.length >= 10) break;
  first10.push(n);
}

async function* fetchComments(postId) {
  let page = 1;
  while (true) {
    const res = await fetch(`/api/posts/${postId}/comments?page=${page}`);
    const { items, hasNext } = await res.json();
    for (const item of items) {
      yield item;
    }
    if (!hasNext) return;
    page++;
  }
}

// 페이지네이션을 의식하지 않고 순회
for await (const comment of fetchComments(42)) {
  renderComment(comment);
}

const buttons = document.querySelectorAll('button');

// for...of로 순회 가능
for (const btn of buttons) {
  btn.addEventListener('click', handleClick);
}

// 스프레드로 배열 변환
const btnArray = [...buttons];

const userRoles = new Map([
  ['alice', 'admin'],
  ['bob', 'editor'],
  ['charlie', 'viewer'],
]);

// entries(), 기본 이터레이터
for (const [name, role] of userRoles) {
  console.log(`${name}: ${role}`);
}

// keys()만
for (const name of userRoles.keys()) { ... }

// values()만
for (const role of userRoles.values()) { ... }

const arr = ['a', 'b', 'c'];

for (const value of arr) console.log(value); // 'a', 'b', 'c'
for (const key in arr) console.log(key);     // '0', '1', '2'