[JavaScrpit] Iterator pattern

1. Iterator pattern(이터레이터 패턴)

ES6에서 도입된 이터레이션 프로토콜(iteration protocol)은 데이터 컬렉션을 순회하기 위한 프로토콜(미리 약속된 규칙)이다. 이터레이션 프로토콜을 준수한 객체는 for…of 문으로 순회할 수 있고 Spread 문법의 피연산자가 될 수 있다.

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

 

이터레이터 패턴은 이터레이터를 사용하여 컬렉션의 요소들에 접근하는 디자인 패턴이다. 여러 가지 자료형의 구조와는 상관없이 이터레이터라는 하나의 인터페이스로 순회가 가능하다는 장점이 있다.

 

const mp = new Map();

mp.set('b', 2)
mp.set('c', 3)

const st = new Set();

st.add(1)
st.add(2)
st.add(3)

//for..of 문법
for (let a of mp) console.log(a)

for (let a of st) console.log(a)

// Spread 문법
console.log([...st])
console.log(..."javascript")

 

1.1 이터러블

이터러블 프로토콜을 준수한 객체를 이터러블이라 한다. 이터러블은 Symbol.iterator 메서드를 구현하거나 프로토타입 체인에 의해 상속한 객체를 말한다. Symbol.iterator 메서드는 이터레이터를 반환한다. 이터러블은 for…of 문에서 순회할 수 있으며 Spread 문법의 대상으로 사용할 수 있다.

배열은 Symbol.iterator 메서드를 소유한다. 따라서 배열은 이터러블 프로토콜을 준수한 이터러블이다.

 

이터레이터 프로토콜 확인 -> Symbol.iterator 메서드를 확인

const array = [1, 2, 3];

// 배열은 Symbol.iterator 메소드를 소유한다.
// 따라서 배열은 이터러블 프로토콜을 준수한 이터러블이다.
console.log(Symbol.iterator in array); // true

 

 

일반 객체는 Symbol.iterator 메소드를 소유하지 않는다. 따라서 일반 객체는 이터러블 프로토콜을 준수한 이터러블이 아니다.

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

// 일반 객체는 Symbol.iterator 메소드를 소유하지 않는다.
// 따라서 일반 객체는 이터러블 프로토콜을 준수한 이터러블이 아니다.
console.log(Symbol.iterator in obj); // false

 

따라서 Symbol.iterator in array를 null로 선언하면 이러터블 프로토콜을 준수하지 않으므로 이터레이터 패턴을 사용할 수 없다

let arr = [1,2,3]
for(const a of arr) console.log (a) // 정상작동 1,2,3


arr[Symbol.iterator] = null; 
for(const a of arr) console.log (a) // Uncaught TypeError: arr is not iterable

 

1.2 이터레이터

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

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

 

const array = [2,3,4]

const iterator = array[Symbol.iterator]();

console.log('next' in iterator) // true

 

 

next 메서드를 호출하면 value, done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환한다.

 

const array = [4,5,6]

const iterator = array[Symbol.iterator]();

console.log('next' in iterator)

let iteratorResult = iterator.next();
console.log(iteratorResult); // {value: 1, done: false}

 

이터레이터의 next 메서드는 이터러블의 각 요소를 순회하기 위한 포인터의 역할한다. next 메서드를 호출하면 이터러블을 순차적으로 한 단계씩 순회하며 이터레이터 리절트 객체를 반환한다. 순회 중 value에는 현재 순회 중인 이터러블의 값을 반환하고, done 프로퍼티에는 이터러블의 순회 완료 논리값을 반환한다.

 

const array = [4,5,6]

const iterator = array[Symbol.iterator]();

console.log('next' in iterator)

let iteratorResult = iterator.next();

console.log(iterator.next()); // {value: 5, done: false}
console.log(iterator.next()); // {value: 6, done: false}
console.log(iterator.next()); // {value: undefined, done: True}

 

2. 이터레이션 프로토콜의 장점

데이터 소비자(Data consumer)인 for…of 문, spread 문법 등은 아래와 같이 다양한 데이터 소스를 사용한다.

Array, String, Map, Set, TypedArray(Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array), DOM data structure(NodeList, HTMLCollection), Arguments

 

위 데이터 소스는 모두 이터레이션 프로토콜을 준수하는 이터러블이다. 즉, 이터러블은 데이터 공급자(Data provider)의 역할을 한다.

만약 이처럼 다양한 데이터 소스가 각자의 순회 방식을 갖는다면 데이터 소비자는 다양한 데이터 소스의 순회 방식을 모두 지원해야 한다. 이는 효율적이지 않다. 하지만 다양한 데이터 소스가 이터레이션 프로토콜을 준수하도록 규정하면 데이터 소비자는 이터레이션 프로토콜만을 지원하도록 구현하면 된다.

즉, 이터레이션 프로토콜은 다양한 데이터 소스가 하나의 순회 방식을 갖도록 규정하여 데이터 소비자가 효율적으로 다양한 데이터 소스를 사용할 수 있도록 데이터 소비자와 데이터 소스를 연결하는 인터페이스의 역할을 한다.

 

참고내용:

모던 자바스크립트 딥다이브: 자바스크립트의 기본 개념과 동작 원리 - 이웅모

면접을 위한 cs 전공지식 노트 - 주홍철