[Javascript] 이터레이션, 이터레이터 / 이터러블

이터레이션 :

반복처리라는 뜻.

데이터 안의 요소를 연속적으로 꺼내는 행위를 말한다.

ex) foreach 문은 배열의 요소를 순차적으로 검색하여 그 값을 파라미터로 넘긴다

const list = [1,2,3]
list.foreach(d => console.log(d))
// 1, 2, 3

이 작업은 내부적으로 처리되어서 개발자는 각 단계를 제어할 수 없다.

그러나 ES6부터 추가된 이터레이터를 사용하면 개발자가 반복 처리를 제어할 수 있다.

 

이터러블 :

이터레이터를 리턴하는 [Symbol.iterator]() 를 가진 값 -> ( array, string, map, set )

array, string, map, set 등을 이터러블이라고 할 수 있다. 왜냐하면 이터레이터를 리턴하는 [Symbol.iterator]() 메서드를 가지고 있기 때문에다.

const arr = ["a", "b", "c"];
arr[Symbol.iterator] = null;

 

위에 코드를 실행하면

index.js:17 Uncaught TypeError: list is not iterable (list는 이터러블이 아니다.)

이런 에러가 발생한다. 즉, null을 할당하기 전에는 이터러블이였다는 말이다.

 

이터레이터 :

반복 처리(iteration) 가 가능한 객체

{ value, done } 객체를 리턴하는 next() 메서드를 가진 값

value : 요소의 값

done : 요소의 열거가 끝났는지를 뜻하는 boolean 값

// arr[Symbol.iterator]가 리턴하는 값이 이터레이터이다.
let iterator = arr[Symbol.iterator]()

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

 

이터러블 / 이터레이터 프로토콜 :

이터러블을 for...of, 전개 연산자(스프레드) 등과 함께 동작하도록 규약

const arr = [1,2,3]
for(const a of arr) console.log(a)

위와 같은 for...of 문이 있을 때 

이터레이터의 value 값이 a에 할당 돼서 출력되고,

done이 true가 되면 for...of 문에서 빠져나오게 된다.

 

for..of 문은 Symbol.iterator(이터러블)를 호출해야 한다. 

Symbol.iterator은 반드시 이터레이터(next가 있는 객체)를 반환해야 한다.