[Javascript] 이터러블(iterable)과 이터레이터(iterator) 알아보기

 

이터러블과 이터레이터

이터러블과 이터레이터는 ES6에 추가된 개념으로 이터러블은 반복이 가능한 객체를 말하는 것으로 forEach, for of 등 아이템이 반복 실행되는 객체를 뜻하며 이터레이터는 이터러블 객체의 각 아이템에 접근하기 위한 기능으로 이터러블을 순회하며 값을 반환하는 객체를 말한다.

• 이터러블 : 반복이 가능한 객체
• 이터레이터 : 이터러블의 값에 순차적으로 접근 할 수 있는 기능

 

이터러블과 이터레이터 사용해보기

• Symbol.iterator : 이터러블 객체를 나타내는 메소드로 해당 객체가 이터러블
• Symbol : ES6에 도입된 원시타입. 값이 겹치지 않고 선언 후 변경이 불가능. 객체의 속성에 접근하기 위해 사용
• next 메소드 : 이터레이터의 객체로 next 메소드를 사용하면 { value, done } 객체를 반환. value는 반복중인 아이템을 나타내며 done은 반복이 끝났는지 안끝났는지를 판별

const Arr = [1, 2, 3, 4, 5];
const objIter = {
  index: 0,
  next: function () {
    if (this.index < Arr.length) {
      // done 마지막 요소가 맞는지확인
      return { value: Arr[this.index++], done: false };
    } else {
      return { done: true };
    }
  },
};

let result = objIter.next();
console.log(result.value, result.done);

result = objIter.next();
console.log(result.value, result.done);

result = objIter.next();
console.log(result.value, result.done);

result = objIter.next();
console.log(result.value, result.done);

result = objIter.next();
console.log(result.value, result.done);

result = objIter.next();
console.log(result.value, result.done);

 

const Arr2 = [1, 2, 3, 4, 5];
// Symbol로 객체에 속성으로 접근
// Arr2[Symbol.iterator]() 이터레이터 객체를 반환
const iter2 = Arr2[Symbol.iterator]();

let result2 = iter2.next();
console.log(result2.value, result2.done);

result2 = iter2.next();
console.log(result2.value, result2.done);

result2 = iter2.next();
console.log(result2.value, result2.done);

result2 = iter2.next();
console.log(result2.value, result2.done);

result2 = iter2.next();
console.log(result2.value, result2.done);

result2 = iter2.next();
console.log(result2.value, result2.done);