JS) 이터레이터와 for/of 문

forEach 메서드는 각 배열의 요소에 대해 제공된 함수를 한번씩 실행합니다.
이 작업은 내부적으로 처리되므로 개발자가 각 처리 단계를 제어할 수 없습니다.

const arr = [1,2,3];

arr.forEach(element => console.log(element));
//  1
//  2
//  3

이터레이터(iterator)

이터레이터란 반복 처리가 가능한 객체를 말합니다.
forEach문과 다르게 이터레이터를 사용하면 개발자가 반복 처리를 단계별로 제어할 수 있습니다.

ES6의 이터레이터는 일반적으로 다음 두 가지 항목을 만족하는 객체입니다.

1. next 메서드를 가진다.
2. next 메서드의 반환값은 value 프로퍼티와 done 프로퍼티를 가진 객체입니다.
   value에는 꺼낸 값이 저장되고, done에는 반복이 끝났는지 뜻하는 논리값이 저장됩니다.

function makeIterator(arr){
    var index = 0;
    return{
        next: function(){
            if(index < arr.length){
                return { value: arr[index++] , done: false }
            } else{
                return { value : undefined, done: true }
            }
        }
    };
}
var iter = makeIterator(["A","B","C"]);
console.log(iter.next()); // {value: "A", done: false}
console.log(iter.next()); // {value: "B", done: false}
console.log(iter.next()); // {value: "C", done: false} 
console.log(iter.next()); // {value: undefined, done: true} // 반복 끝

for/of문

for/of문은 arr 이터레이터의 next 메서드를 순회할 때마다 매번 호출합니다. value 프로퍼티 값을 변수 i에 대입해서 for/of문 안의 코드를 실행합니다. 이처럼 for/of문을 사용하면 이터레이터 반복처리를 간결하게 표현할 수 있습니다.

const arr = [5,4,3];
for(let i of arr) console.log(i);
// 5
// 4
// 3 

for/of문은 Symbol.iterator 메소드를 가진 객체에 대해서만 사용이 가능합니다.
Symbol.iterator 메서드를 가진 객체를 반복 가능한 객체라고 합니다.
ex) Array, String, Map, Set, TypedArray