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

이터레이션 프로토콜

ES6에서 도입된 이터레이션 프로토콜(iteration protocol)은 데이터 컬렉션을 순회하기 위한

프로토콜(미리 약속된 규칙) 이다. 이것은 JS 자체의 독자적인 특징이라기보다는 여러 언어에서 반복 동작을 수행하기 위해 정의하는 방법에 가깝다. 

 

프로그래밍을 하다 보면, 어떤 구조/객체의 내부에서 반복 동작을 수행하고 싶을 때가 있다. 이때 사용할 수 있는 방법이 for..of문과 spread operator인데, 이 문법을 사용하기 위한 전제가 바로 Iteration Protocol이다.

yield*와 destructuring assignment 또한 이 규칙에 의존하는 구문, 표현식이라고 한다.

 

이터레이션 프로토콜에는 이터러블 프로토콜(iterable protocol)과 이터레이터 프로토콜(iterator protocol)이 있다.

 

어떠한 데이터를 기준으로 데이터를 공급하는 쪽(Data provider, [array, string, map/set, DOM data Structure..])과 데이터를 소비하는 쪽(Data consumerm, [for...of, spread, ... ])으로 나누어 보자.

 

여기서 만약 데이터 공급처가 데이터를 제공하기 위해 각기 다른 순회 방식을 가지게 된다면 데이터 소비자는 그 방식에 일일이 대응하여 데이터를 받아올 수 있도록 지원해야 할 것이다.

 

하지만 이는 효율적인 방식이 아니기에 하나의 통일된 규칙을 만들어 두 주체가 이것에만 의존하게 할 필요가 있다. 결국, 이 과정에서 나오게 된 것이 Iteration Protocol이며, 이것은 데이터 공급자와 소비자 사이를 이어주는 인터페이스(매개체)인 셈이다.

이터러블을 지원하는 데이터 소비자는 내부에서 Symbol.iterator 메소드를 호출해 이터레이터를 생성하고 이터레리터의 next 메소드를 호출하여 이터러블을 순회한다. 그리고 next 메소드가 반환한 이터레이터 리절트 객체의 value 프로퍼티 값을 취득한다.

JS의 Iteration Protocol을 이루는 하위 규칙은 Iterable Protocol과 Iterator Protocol이 있다. 지금부터 각 Protocol의 특징을 함께 알아보자.

 

---

이터러블

이터러블의 정의는 다음과 같습니다.

객체의 반복적인 동작에 대한 정의이다. 어떤 객체에 아래의 2가지 사항이 구현되어 있다면 그 객체는 iterable이다.

1. 객체는 Symbol.iterator라는 key를 가지고 있어야 한다.
2. Symbol.iterator의 value는 iterator를 반환하는 함수여야 한다.

JS 내에서 확인할 수 있는 내장형 이터러블객체 타입은 다음과 같다. 이들은 우리가 따로 처리해주지 않았지만

Symbol.iterator 메소드를 소유하고 있다.

• String
• Array
• Typed Array
• Map
• Set
• DOM data structure
• Arguments

위와 같기 때문에 우리는 평소에 string 타입을 변환과정없이 반복문을 통해 순회가 가능한 것이다.

const string = "imstring"

for ( const i of string) {
	console.log(i);
}

//
i
m
s
t
r
i
n
g

 

또한, 아래와 같이 일반 객체는 Symbol.iterator 메소드를 소유하지 않기 때문에.

일반 객체는 이터러블 프로토콜을 준수한 이터러블이 아니며 이터러블이 아니기 때문에 순회할 수 없다.

const obj = { a: 1, b: 2 };

console.log(Symbol.iterator in obj); // false

// 이터러블이 아닌 일반 객체는 for...of 문에서 순회할 수 없다.
// TypeError: obj is not iterable
for (const p of obj) {
  console.log(p);
}

하지만, 이 규칙은 사용자 정의가 가능하므로 내장 객체가 아니더라도 어느 객체에서든 충분히 구현할 수 있다. 이는 다음에 알아보도록 하자.

 

(🐸 : Symbol.iterator 라는 key가 가리키고 있는 함수를 실행시켜서 나오는 값이 이터레이터 인데 저 함수를 가져와서 이터레이터를 반환값으로 만들 수 있다면 그 객체는 이터러블하다!!.)

앞서 배열과 JS 내장형 이터러블 객체 타입에 속한  Symbol.iterator라는 일종의 Key를 가지고 있고,
이 Key가 가리키고 있는 것이 함수라는 것을 보았습니다.그리고 이 함수를 실행시켜서 나오는 값이 바로 이터레이터입니다.그래서 배열은 이터러블하다라고 말할 수 있습니다.
- 이러터블 : 이터레이터를 리턴하는 [Symbol.iterator]()를 가진 값

 

---

이터레이터

Iterator Protocol은 값의 순서를 제공하는 방법에 대한 정의이다. iterable과 마찬가지로 어떤 객체에 아래의 2가지 사항이 구현되어 있다면 그 객체는 iterator이다.

1. 객체는 .next() 메서드를 가지고 있어야 한다.
2. .next() 실행의 반환 값은 다음과 같은 key를 가진 객체여야 한다.
   • value - 반복문 안의 단일 값이며 어떠한 타입이든 상관없다.
   • done - 반복문 종결 여부에 대한 판단 값이며 Boolean 타입이다.

이터레이터 프로토콜은 next 메소드를 소유하며 next 메소드를 호출하면 이터러블을 순회하며 value, done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환하는 것이다. 이 규약을 준수한 객체가 이터레이터이다.

 

이터러블 프로토콜을 준수한 이터러블은 Symbol.iterator 메소드를 소유한다. 이 메소드를 호출하면 이터레이터를 반환한다. 이터레이터 프로토콜을 준수한 이터레이터는 next 메소드를 갖는다.

위와 같이 이터레이터의 next 메소드를 호출하면 value, done 프로퍼티를 갖는 

이터레이터 리절트(iterator result) 객체를 반환한다.

이터레이터의 next 메소드는 이터러블의 각 요소를 순회하기 위한 포인터의 역할을 하며.

next 메소드를 호출하면 이터러블을 순차적으로 한 단계씩 순회하며 이터레이터 리절트 객체를 반환한다.

 

이터레이터의 next 메소드가 반환하는 이터레이터 리절트 객체의 value 프로퍼티는 현재 순회 중인 이터러블의 값을 반환하고 done 프로퍼티는 이터러블의 순회 완료 여부를 반환한다.

 

 

이터레이터도 이터러블하다

위에서처럼 이터러블한 값에서 가져온 이터레이터는 그 자체로도 이터러블하다고 볼 수 있다.
즉, 이터레이터도 다음과 같이 Symbol.iterator를 Key로 하는 이터레이터 리턴 함수를 가지며.
이 때 반환되는 이터레이터는 자기 자신이다.

const arr = [1, 2, 3];
let arrIter = arr[Symbol.iterator]();

let iter = arrIter[Symbol.iterator](); // 이터레이터도 자기 자신인 이터레이터를 반환한다.
iter.next(); // { value : 1, done : false }
iter.next(); // { value : 2, done : false }
iter.next(); // { value : 3, done : false }
iter.next(); // { value : undefined, done : true }

 

---

 

이터러블/이터레이터의 이점

이터러블하다는 것은 원소들을 차례로 순회할 수 있다는 것이다.
이터러블한 기본 자료구조 뿐만 아니라 이터러블 프로토콜을 지키는 사용자 정의 객체들은 for...of문으로 순회하거나 전개 연산자를 사용하여 순회할 수 있다는 이점이 생긴다.

const numbers = [1, 2, 3, 4, 5];

for (const number of numbers) { // 이터레이터를 사용하는 for...of 순회
  console.log(number);
}

const [a, b, ...rest] = numbers; // 이터레이터를 사용하는 전개 연산자
log(a); // 1
log(b); // 2
log(rest); // [3, 4, 5]

이터러블 프로토콜이라는 하나의 규약을 통해 사용자의 의도에 따라 새롭게 정의한 자료구조나 객체를 이터러블 프로토콜을 따르게 하여 순회가능함을 명시할 수도 있고, 필요에 따라 전개 연산자 등을 사용하여 깔끔하게 코드를 작성할 수도 있다.

 

 

📚출처/ 참고

---

https://poiemaweb.com/es6-iteration-for-of

https://catsbi.oopy.io/79e5ee3a-7c93-4ed6-a48f-2da6eab42109

https://tecoble.techcourse.co.kr/post/2021-05-24-iteration-protocols/

https://wbluke.tistory.com/34