반복 프로토콜

동기 반복(synchronous iteration)과 비동기 반복(asynchronous iteration)에 대해 알아보자.

반복 프로토콜(lteration protocols)이란?

자바스크립트에서 반복 프로토콜(lteration protocols)이란 Iterable이라는 인터페이스를 통해 데이터 소스와 데이터 소비자를 연결하는 프로토콜이다.

image

• Data sources: 데이터 소스는 모든 형태와 크기로 제공되며, 자바스크립트에서는 Array, Set, Map, Strings 등이 있다.

• Data consumers: 여기서의 데이터 소비자는 모든 값을 방문할 때까지 한번에 하나의 값만 입력에 순차적으로 접근해야 하는 전체 구조 및 알고리즘 클래스를 말한다. 위 그림에서는 예로 for-of loop와 spreading을 말한다.

데이터 소스는 반복 프로토콜을 통해 데이터를 순차적으로 전달하며, 데이터 소비자는 반복 프로토콜을 통해 입력을 받는 것이다.

반복 프로토콜을 통해 데이터 구조를 개발하면 아래와 같은 이점이 있다.

• 새로운 데이터 구조라면, 반복 프로토콜을 구현하기만 하면 다양한 도구를 즉시 적용할 수 있다.

• 반복을 사용하는 코드를 작성하면 자동으로 많은 데이터 소스와 함께 동작한다.

동기 반복(synchronous iteration)

비동기 반복에 대해 알기 전에 ECMAScript2015에 추가된 반복 프로토콜(lteration protocols)인 iterable protocol과 iterator protocol의 인터페이스를 살펴보자.

interface Iterable<T> {
  [Symbol.iterator](): Iterator<T>;
}
interface Iterator<T> {
  next(): IteratorResult<T>;
}
interface IteratorResult<T> {
  value: T;
  done: boolean;
}

여기서 먼저 볼 부분은 Iterable과 Iterator이다.

• Iterable은 순회할 수 있는 데이터 구조이며, Iterator를 반환하는 메서드가 있다.

• Iterator는 순회에 사용되는 포인터이다.

// 예제 1
const iterable = ["a", "b"];

// iterable은 iterators를 위한 팩토리(factory)이다
const iterator = iterable[Symbol.iterator]();

// 예제 2
const someString = "hi";
const iterator = someString[Symbol.iterator]();
console.log(iterator + ""); // "[object String Iterator]"

console.log(iterator.next()); // { value: "h", done: false }
console.log(iterator.next()); // { value: "i", done: false }
console.log(iterator.next()); // { value: undefined, done: true }

비동기 반복(asynchronous iteration)

비동기 반복은 동기 반복과 유사하며, next() 함수의 반환 유형만 프라미스로 감쌓져 사실 이 부분만 다르다.

interface AsyncIterable<T> {
  [Symbol.asyncIterator](): AsyncIterator<T>;
}
interface AsyncIterator<T> {
  next(): Promise<IteratorResult<T>>; // (A)
}
interface IteratorResult<T> {
  value: T;
  done: boolean;
}

사실 비동기 반복은 직접 구현할 일은 없으며, 일단은 for-of loop의 비동기 버전인 for-await-of loop에서 이것을 사용했다고만 알아 놓자.

// 참고로 for-await-of loop의 경우 동기 이터러블도 지원한다.
for await (const x of ["a", "b"]) {
  console.log(x);
}