ES6 - iterator

개요

책갈피와 같이 배열과 같은 객체에서 현재 어느 위치를 가리키고 있는지 파악할 때 이터레이터는 굉장히 중요한 역할을 한다.

기본 문법

const player = ['Kane', 'Salah', 'Martin', 'Messi', 'Alponso'];

const plyaerIter = player.values();

plyaerIter.next(); // {value: "Kane", done: false}
plyaerIter.next(); // {value: "Salah", done: false}
plyaerIter.next(); // {value: "Martin", done: false}
plyaerIter.next(); // {value: "Messi", done: false}
plyaerIter.next(); // {value: "Alponso", done: false}
plyaerIter.next(); // {value: undefined, done: true}
plyaerIter.next(); // {value: undefined, done: true}

배열에 values() 메서드를 사용해 이터레이터를 선언할 수 있다. 이터레이터에서 next()를 호출하면 value와 done 프로퍼티를 담은 객체를 반환하며 value에는 배열의 원소값들이 순차적으로 할당되며 방문할 원소가 없으면 undefined가 된다. done은 모든 원소를 순회할 때까지 false, 모든 원소 방문 후엔 몇 번을 호출해도 true가 된다.

const player = ['Kane', 'Salah', 'Martin', 'Messi', 'Alponso'];

const plyaerIter1 = player.values();
const plyaerIter2 = player.values();

plyaerIter1.next(); // {value: "Kane", done:false}
plyaerIter2.next(); // {value: "Kane", done:false}
plyaerIter1.next(); // {value: "Salah", done:false}

참조하는 배열이 같다 하더라도 별개로 선언된 이터레이터들은 각기 독립적이다. 마치 하나의 클래스를 참조해 만든 인스턴스들이 독립된 객체인 점과 유사하다.

const player = ['Kane', 'Salah', 'Martin', 'Messi', 'Alponso'];

for(let name of player){
  console.log(name);
} // Kane, Salah, Martin, Messi

const targetMan = 'Kane';

for(let char of targetMan){
  console.log(char);
} // K, a, n, e

문자열, 배열에서처럼 반복문 for...of 루프는 해당 객체가 이터레이터라면 편하게 쓸 수 있다.

프로토콜

양방향의 네트워크 통신 분야에서 말하는 통신 규약처럼 객체 <-> iterable 객체 간에 일련의 일정한 약속을 통해 쉽게 왔다 갔다할 수 있는데 이터레이션 프로토콜은 대표적으로 Symbol.iterator를 활용할 수 있다.

class Log{
  constructor(){
    this.messages = [];
  }
  
  add(message){
    this.messages.push({message, timestamp: Date.now()});
  }
  
  [Symbol.iterator](){
    return this.messages.values();
  }
}

위 상황은 Log 클래스로 인스턴스를 만들어 냈을 때, 로그 기록을 messages에 더해주고 이를 출력하는 것이다. x.messages로 접근이 가능하지만 인스턴스의 프로퍼티를 호출하지 않고 바로 배열처럼 사용하기 위해 Symbol.iterator를 통해 배열 원소들을 조회할 수 있다.

예시는 아래와 같다.

const log = new Log();
log.add('Kane');
log.add('Salah');
log.add('Bale');

for(let entry of log){
  console.log(`${entry.message} and ${entry.timestamp}`);
}

Kane and 1604318176428
Salah and 160431817642
Bale and 1604318176428