Javascript iterator와 iterable, generator 어떻게 구현하고 사용할까?

iterable?

• 이터러블한 객체는 [Symbol.iterator] 프로퍼티를 가진 객체이다.
  • Symbol.iterator는 주어진 객체의 이터레이터를 반환하는 함수를 명시한다.

iterator?

• 이터레이터는 반복을 위해 설계된, 특별한 인터페이스를 가진 객체이다.
• 이터레이터 객체는 next()를 가진다.
  • 연산의 결과로 객체를 반환한다. { value: value, done: boolean }

이터레이터 만들기

• 간단하게 구현

function createIterator(items) {
  let i = 0;
  return {
  	next: function() {
      const done = (i >= items.length);
      const value = !done ? items[i++] : undefined;
      return {
      	done: done,
        value: value
      };
    }
  };
}

generator로 iterator 만들기

function *createIterator(items) {
	for (const item of items)
      yield item;
}
var iter = createIterator(['victor', 'dio', 'taek']);
iter.next(); // {value: "victor", done: false}
iter.next(); // {value: "dio", done: false}
iter.next(); // {value: "taek", done: false}
iter.next(); // {value: undefined, done: true}

Javascript 객체 iterable 하게 만들기

const log = console.log;
const arr = ['victor', 'dio', 'taek'];
var obj = {
  items: [],
  get getItems() {
  	return this.items;
  },
  set setItems(arr) {
  	this.items = arr;
  }
};
obj.setItems = arr;
log(obj);

obj[Symbol.iterator] = function* () {
  	for (const item of this.items) {
    	yield item;
    }
};
log(obj);

• 위 과정을 한 번에 해보자

var arr = ['victor', 'dio', 'taek', 'Los Angeles'];
obj = {
  items: [],
  get getItems() {
  	return this.items;
  },
  set setItems(arr) {
  	this.items = arr;
  },
  *[Symbol.iterator]() {
  	for (const item of this.items) {
    	yield item;
    }
  }
};
obj.setItems = arr;
log(obj);