Iteration Protocol

이터레이션 프로토콜은 자바스크립트에서 컬렉션(배열, 객체 등)을 순회하는 방식을 정의한 규약이다. 이 프로토콜은 준수하는 객체는 for ... of 문으로 내부를 순회할 수 있고, 스프레드 연산자를 사용할 수 있으며, 비구조화 할당을 통해 필요한 값만을 꺼내 사용할 수도 있다. 따라서 이터레이션 프로토콜을 이해하는 것은 그 자체로 자바스크립트의 많은 기능을 더 깊이 있게 활용할 수 있도록 한다.

 

 

이터러블과 이터레이터

이터레이션 프로토콜은 다시 '이터러블 프로토콜(이하 이터러블)'과 '이터레이터 프로토콜(이하 이터레이터)'로 나뉘어진다. 이터러블은 단어 그대로 '순회할 수 있는' 객체를 정의하는 데 사용된다. 만약 어떤 객체가 이터러블하다면, 해당 객체는 이터레이터를 리턴하는 메소드 [Symbol.iterator]()를 가지고 있다는 뜻이다.

이터레이터는 value와 done 프로퍼티로 이루어진 객체를 리턴하는 메소드 next()와, 자기 자신을 호출하는 메소드 [Symbol.iterator]()를 가진 '값'이다. 이터레이터에는 이터레이터(자기 자신)를 호출하는 메소드 [Symbol.iterator]()가 존재하므로, 모든 이터레이터는 이터러블하다고 말할 수 있다.

const numList = [1, 2, 3, 4, 5];

const iter = numList[Symbol.iterator]();

console.log(iter.next()); // { value: 1, done: false }
console.log(iter.next()); // { value: 2, done: false }
console.log(iter.next()); // { value: 3, done: false }
console.log(iter.next()); // { value: 4, done: false }
console.log(iter.next()); // { value: 5, done: false }
console.log(iter.next()); // { value: undefined, done: true }
console.log(iter.next()); // { value: undefined, done: true }

 

 

제너레이터

제너레이터는 JS에서 이터러블을 쉽게 만들기 위해 도입된 강력한 도구이다. function* 키워드로 정의되며, 호출되면 제너레이터 객체를 반환한다. 이렇게 반환된 제너레이터 객체는 이터레이터인데, next 메소드를 호출하면 다음 yield를 마주할 때까지 실행되고, { value, done } 객체를 반환한다.

function* generatorFunction() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = generatorFunction();

console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

 

제너레이터의 쓸모는 지연 평가에서 특히 그 두각을 드러낸다. 지연 평가는 계산이 필요할 때까지 실제 계산을 미루는 방식인데, 필요할 때만 값을 계산하므로 메모리 사용을 최소화할 수 있으며, 이를 통해 불필요한 계산을 피하고 프로그램의 효율성을 높일 수 있다. 또한 이를 사용하면 무한 시퀀스나 대용량 데이터를 처리하는 데 이점을 갖는다.