Iteration
이터레이션 프로토콜에 대해서 공부해보자.
이터레이션 프로토콜
데이터 콜렉션을 순회하기 위한 약속된 규칙을 의미한다.
위 규칙을 준수하는 객체는 for..of 로 순회하거나 spread 문법의 피연산자가 될 수 있다.
iterable, iterator 에 해당하는 규칙이 존재한다.
iterable
이터러블 프로토콜을 준수한 객체를 이터러블이라 한다.
Symbol.iterator 메소드를 구현하거나, 프로토 타입 체인에 의해 상속한 객체를 의미한다.
배열은 기본적으로 Symbol.iterator 메소드를 소유하므로, 이터러블 프로토콜을 준수한다.
const array = [1,2,3]; console.log(Symbol.iterator in array); for (const item of array){ console.log(item); } /* 일반 객체는 이터레이션 프로토콜을 준수하지 않는다. Symbol.iterator 를 직접 메소드를 커스텀구현하면 일반 객체도 가능은 하다. */ const objectLiteral = { a: 10, b: 20}; console.log(Symbol.iterator in objectLiteral); // false for(const oL of objectLiteral){ console.log(p); }빌트인 이터러블
크게 배열, 문자열, 콜렉션에 해당하는 객체라면 이미 내장이 되어있는 이터러블이 존재한다.
이터레이션 프로토콜의 필요성
빌트인 이터러블 그리고 Symbol.iterator 를 커스텀 구현한 이터러블은 데이터 공급자의 역활을 한다.
각기 다양한 데이터 자원들이 독자적인 순회 방식을 가질경우 데이터 소비자는 그에따른 데이터의 순회 방식을 모두 지원해야한다.
규칙을 정해서 데이터 소비자와 데이터 공급자간의 연결고리 역활을 하는 인터페이스라고 보면 된다.
iterator
iterator 를 구현하는 규칙은 다음과 같다.
next() 소유
next() 호출시, iterable 을 순회하며 value, done 프로퍼티를 가지는 iterator result 객체를 반환하는 것을 의미.
커스텀 이터러블의 구현 방법
예시 코드를 보며 살펴보면 다음과 같다.
/* Symbol.iterator 의 내부 변수는 외부로 전달이 불가능하다. 이 특성을 이용하여 다양한 구현이 가능하다. Symbol.iterator 메소드는 next 메소드를 소유한 이터레이터를 반환해야 한다. next 메소드는 이터레이터 리절트 객체를 반환하며 순회시 마다 호출이 된다. */ const fibonacci = { [Symbol.iterator]() { let [pre, cur] = [0, 1]; const max = 10; //return iterator return { next() { [pre, cur] = [cur, pre + cur]; return { value: cur, done: cur >= max }; } }; } }; // 반복문 에서의 사용 for (const num of fibonacci) { console.log(num); } // spread 문법 const arr = [...fibonacci]; console.log(arr); // [ 1, 2, 3, 5, 8 ] // destructuring const [first, second, ...rest] = fibonacci; console.log(first, second, rest); // 1 2 [ 3, 5, 8 ]위 예제의 피보나치 이터러블에는 외부에서 값을 전달할 방법이 없다는 점이 있으나, 다음과 같이 하면 이터러블을 반환하는 구조를 취하면 특정한 값을 외부에 전달할 수 있다.
const fibonacciFunc = function (max) { let [pre, cur] = [0, 1]; return { [Symbol.iterator]() { return { next() { [pre, cur] = [cur, pre + cur]; return { value: cur, done: cur >= max }; } }; } }; }; for (const num of fibonacciFunc(10)) { console.log(num); }이터레이터를 생성하려면 이터러블의 Symbol.iterator 메소드를 호출해야 한다. 이터러블이면서 이터레이터인 객체를 생성하면 Symbol.iterator 메소드를 호출하지 않아도 된다.
const fibonacciFunc = function (max) { let [pre, cur] = [0, 1]; /* Symbol.iterator 메소드와 next 메소드를 소유한 이터러블이면서 이터레이터인 객체를 반환 하려면 위 예지와 다르게 감싸는 구조가 아닌 별도의 프로퍼티로 구성하면 된다. */ return { [Symbol.iterator]() { return this; }, next() { [pre, cur] = [cur, pre + cur]; return { value: cur, done: cur >= max }; } }; }; let iter = fibonacciFunc(10); // 이터레이터로 활용되는 코드 console.log(iter.next()); // {value: 1, done: false} console.log(iter.next()); // {value: 2, done: false} console.log(iter.next()); // {value: 3, done: false} console.log(iter.next()); // {value: 5, done: false} console.log(iter.next()); // {value: 8, done: false} console.log(iter.next()); // {value: 13, done: true} iter = fibonacciFunc(10); // 이터러블로 활용되는 코드 for (const num of iter) { console.log(num); }무한 이터러블, 지연평가(Lazy evaluation) 를 통한 활용법
무한한 이터러블을 생성하는 함수를 정의해보는 것과 그 사용법을 알아보자.
이터러블의 특성 중 지연평가를 이용하여 필요한 값만 취득하는 예제이다.
방법은 간단하다. next()의 done 프로퍼티를 생략하면 된다.
지연평가는 데이터를 소비하거나, 디스트럭처링 할당이 되기 이전까지 데이터를 생성하지 않는다.
const fibonacciFunc = function () { let [pre, cur] = [0, 1]; return { [Symbol.iterator]() { return this; }, next() { [pre, cur] = [cur, pre + cur]; return { value: cur }; } }; }; // 제약을 걸지 않으면 무한히 생성된다. for (const num of fibonacciFunc()) { if (num > 10000) break; console.log(num); } // 원하는 값만 취득하는 방식 const [f1, f2, f3] = fibonacciFunc(); console.log(f1, f2, f3); // 1 2 3
Last updated
Was this helpful?