🔄 이터레이터

⭐️ 이터레이션

이터레이션은 반복 처리라는 뜻으로 데이터 안의 요소를 연속적으로 꺼내는 행위를 말한다. 예를 들어 배열의 forEach 메서드는 배열의 요소를 순차적으로 검색하여 그 값을 함수의 인수로 넘기기를 반복한다.

let a = [1,2,3];
a.forEach((num) => console.log(num)); //1 2 3

⭐️ 이터레이터

이터레이터(iterator)란 반복 처리(iteration) 가 가능한 객체를 말한다. 위의 forEach 메서드의 작업은 내부적으로 처리되므로 개발자는 각 처리 단계를 제어할 수 없다.
그러나 ES6부터 추가된 이터레이터를 사용하면 개발자가 반복 처리를 단계별로 제어할 수 있다.

ES6의 이터레이터는 일반적으로 다음 두 가지 항목을 만족하는 객체이다.
1. next 메서드를 가진다.
2. next 메서드의 반환값은 value 프로퍼티와 done 프로퍼티를 가진 객체이다. 이때 value에는 꺼낸 값이 저장되고 done에는 반복이 끝났는지를 뜻하는 논리값이 저장된다.
즉 next 메서드의 반환값이 iterator result 객체여야 한다.

let a = [1, 2, 3];
let iter = a[Symbol.iterator]();
// Symbol.iterator(이터레이터 심벌)는 이터레이터를 반환하는 메서드

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

☑️ 배열의 이터레이터를 반환하는 함수

next()메서드를 사용하면 재귀함수나 반복문을 사용하지 않고도 배열을 순환하는 함수를 만들 수 있다.

function makeIterator(array) {
  let index = 0;
  return {
    next() { // next 메서드
      if ( index < array.length ) {
        return {value: array[index++], done: false}; // next 메서드 반환값
      } else {
        return {value: undefined, done: true}; // next 메서드 반환값
      }
    }
  };
}

const iter = makeIterator(['a', 'b', 'c']);

console.log(iter.next()); // Object {value: 'a', done: false}
console.log(iter.next()); // Object {value: 'b', done: false}
console.log(iter.next()); // Object {value: 'c', done: false}
console.log(iter.next()); // Object {value: undefined, done: true}

🧩 { for ... of }

for...of 문은 Symbol.iterator메서드를 갖고있는 객체 Symbol.iterator메서드는 반환값으로 이터레이터를 반환하는 조건을 만족하는 객체를 반복처리한다.
이터레이터는 next메서드를 가지며 next의 반환값으로 value와 done 프로퍼티를 가진 객체를 반환하는 객체

⬇️ for...of를 사용하지 않고 이터레이터를 반복실행하는 코드

let a = [4, 5, 6];
let iter = a[Symbol.iterator](); // 변수 iter에 이터레이터 대입
while(true) {
  let iteratorResult = iter.next();
  if ( iteratorResult.done === true ) break;
  let v = iteratorResult.value;
  console.log(v); // 4 5 6 이 차례대로 console에 찍힘
}

⬇️ for of 를 사용하는 코드

let a = [4, 5, 6];
for (let v of a) console.log(v); // 4 5 6 이 차례대로 console에 찍힘

🚨 유의 사항

이터레이터(iterator) 객체와 이터러블한(iterable) 객체는 서로 다른 개념의 객체이다.
이터레이터는 next 메서드를 갖고있지만, 이터러블한 객체는 Symbol.iterator(이터레이터 심벌) 메서드를 갖고있다는 차이가 있다.