ES6에서 도입된 이터레이션 프로토콜(iteration protocol)은 데이터 컬렉션을 순회하기 위한 프로토콜(미리 약속된 규칙)이다. 이터레이션 프로토콜을 준수한 객체는 for…of 문으로 순회할 수 있고 Spread 문법의 피연산자가 될 수 있다.
\n이터레이션 프로토콜에는 이터러블 프로토콜(iterable protocol)과 이터레이터 프로토콜(iterator protocol)이 있다.
\n![\"스크린샷](\"https://user-images.githubusercontent.com/36187948/90773513-fa918e80-e330-11ea-8ae6-1862d0e314be.png\")
\n이터러블 프로토콜을 준수한 객체를 이터러블이라 한다. 이터러블은 Symbol.iterator 메소드를 구현하거나 프로토타입 체인에 의해 상속한 객체를 말한다. Symbol.iterator 메소드는 이터레이터를 반환한다. 이터러블은 for…of 문에서 순회할 수 있으며 Spread 문법의 대상으로 사용할 수 있다.
\n배열은 Symbol.iterator 메소드를 소유한다. 따라서 배열은 이터러블 프로토콜을 준수한 이터러블이다.
\nconst array = [1, 2, 3];\n\n// 배열은 Symbol.iterator 메소드를 소유한다.\n// 따라서 배열은 이터러블 프로토콜을 준수한 이터러블이다.\nconsole.log(Symbol.iterator in array); // true\n\n// 이터러블 프로토콜을 준수한 배열은 for...of 문에서 순회 가능하다.\nfor (const item of array) {\n console.log(item);\n}\n\nCustom iterable
\n
var myIterable = {\n *[Symbol.iterator]() {\n yield 1;\n yield 2;\n yield 3;\n }\n}\n\nfor (let value of myIterable) { \n console.log(value); \n}\n// 1\n// 2\n// 3\n// or\n\n[...myIterable]; // [1, 2, 3]이터레이터 프로토콜은 next 메소드를 소유하며 next 메소드를 호출하면 이터러블을 순회하며 value, done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환하는 것이다. 이 규약을 준수한 객체가 이터레이터이다.
\n이터러블 프로토콜을 준수한 이터러블은 Symbol.iterator 메소드를 소유한다. 이 메소드를 호출하면 이터레이터를 반환한다. 이터레이터 프로토콜을 준수한 이터레이터는 next 메소드를 갖는다.
\n// 배열은 이터러블 프로토콜을 준수한 이터러블이다.\nconst array = [1, 2, 3];\n\n// Symbol.iterator 메소드는 이터레이터를 반환한다.\nconst iterator = array[Symbol.iterator]();\n\n// 이터레이터 프로토콜을 준수한 이터레이터는 next 메소드를 갖는다.\nconsole.log('next' in iterator); // true이터레이터의 next 메소드를 호출하면 value, done 프로퍼티를 갖는 이터레이터 리절트(iterator result) 객체를 반환한다.
\n// 배열은 이터러블 프로토콜을 준수한 이터러블이다.\nconst array = [1, 2, 3];\n\n// Symbol.iterator 메소드는 이터레이터를 반환한다.\nconst iterator = array[Symbol.iterator]();\n\n// 이터레이터 프로토콜을 준수한 이터레이터는 next 메소드를 갖는다.\nconsole.log('next' in iterator); // true\n\n// 이터레이터의 next 메소드를 호출하면 value, done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환한다.\n// next 메소드를 호출할 때 마다 이터러블을 순회하며 이터레이터 리절트 객체를 반환한다.\nconsole.log(iterator.next()); // {value: 1, done: false}\nconsole.log(iterator.next()); // {value: 2, done: false}\nconsole.log(iterator.next()); // {value: 3, done: false}\nconsole.log(iterator.next()); // {value: undefined, done: true}\n","frontmatter":{"title":"Iteration","date":"August 21, 2020"}}},"pageContext":{"slug":"/JavaScript/Iteration/","previous":{"fields":{"slug":"/Algorithm/The_Baum-Sweet_sequence/"},"frontmatter":{"title":"The Baum-Sweet sequence","category":"Algorithm","draft":false}},"next":{"fields":{"slug":"/JavaScript/Generator/"},"frontmatter":{"title":"Generator","category":"JavaScript","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}참고 및 출처
\n\n