이터레이션 (Iteration)

📍 이터레이션(Iteration)이란?

이터레이션이란 어떠한 데이터 컬렉션(자료구조)을 순회하거나 반복하는 것을 의미하는데, 자바스크립트에는 for문, for...in문, forEach 메서드 등 다양한 방법으로 순회할 수 있다.

---

📍 이터러블 프로토콜 (Iterable Protocol)

이터러블 프로토콜을 준수한 객체는 이터러블(iterable) 하다고 할 수 있으며, Symbol.interator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 상속 받은 Symbol.interator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이러한 규약을 이터러블 프로토콜이라 하며, 이터러블 프로토콜을 준수한 객체를 이터러블이라 한다.

const array = [1, 2, 3];

console.log(Symbol.interator in array); // true

for (const item of array.keys()) {
    console.log(item);
}

Array는 이터러블 프로토콜을 준수하고 있기 때문에 Symbol.iterator 메서드를 소유하며, for...of 문으로 순회가 가능하다.

// key 값을 반환하는 `for ... in`
const obj = { 0: 1, 1: 2 };
for (const item in obj) {
    console.log(item);
}

이터러블 규격 사항을 따르지 않는 일반 객체의 경우 에러가 발생할 수 있다. Symbol.iterator 메서드를 소유하지 않으며 for ... of 문으로 순회가 불가능하다.

---

📍 이터레이터 프로토콜 (Interator Protocol)

이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이터레이터는 next 메서드를 소유하며 next 메서드를 호출하면 이터러블을 순회하며 value와 done 프로퍼티를 갖는 객체(iterator result)를 반환한다. 이터레이터는 이터러블의 요소를 탐색하기 위한 포인터 역할을 한다.

const array = [1, 2, 3];

const iterator = array.values();

console.log(iterator.next().value); // 반환된 iterator로 수동 next 호출, 다음값 반환
console.log(iterator.next().value); // next의 value로 값에 접근 가능
console.log(iterator.next().value); // 3
console.log(iterator.next().value); // { value: undefined, done: true }
console.log(iterator.next().done); // true

next 메서드를 호출할 때마다 이터러블을 순회하며 value와 done 속성을 반환하는 것을 확인할 수 있다.

📍 이터레이션 프로토콜의 의의

만약 이터레이션 프로토콜이 존재하지 않고 Array, String, Map, DOM data structure 등 다양한 데이터 소스가 각자의 순회 방식을 갖는다면 사용자는 그 순회 방식을 모두 익혀야 하고 프로그램에 모두 적용해주어야 했을 것이다. 이러한 비효율을 해소해준 것이 이터레이션 프로토콜이다.

---

📍 for ... of 문

이터러블을 순회하면서 이터러블의 요소를 변수에 할당한다.

for (변수선언문 of 이터러블) { ... }

for ... of문은 내부적으로 이터레이터의 next 메서드를 호출하여 이터러블을 순회하며 next 메서드가 반환한 이터레이터 객체의 value 프로퍼티 값을 for...of 문의 변수에 할당한다. 그리고 이터레이터 객체의 done 프로퍼티 값이 false이면 이터러블의 순회를 계속하고 true이면 이터러블의 순회를 중단한다.

for (const item of [1,2,3]) {
	// item 변수에 순차적으로 1, 2, 3이 할당
	console.log(item); // 1 2 3
}