44:["$","title",null,{"children":"Iterators and Generators | Ang Lee | Observable"}] 4c:[] 48:{"id":"a2ef625dcc727f44","slug":"iterators-and-generators","title":"Iterators and Generators","thumbnail":"a632c42d11b9ea69dd80d8f98f6088aff94bd68120910b352c09ce46e90acf0a","access_level":"public","create_time":"$D2018-05-15T11:56:46.231Z","update_time":"$D2018-05-24T21:12:05.085Z","view_time":null,"first_public_time":"$D2018-05-15T13:39:53.242Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"b490bb3c2eba71dc","login":"anglee","name":"Ang Lee","avatar_url":"https://avatars-next.observableusercontent.com/9f99cc05b0f8c20eaf1867c9a84edab76fa85847e4b14e14854d84ea154e3b5b","tier":"starter_2024","bio":"","following":false},"version":378,"publish_version":378,"role":null,"authored":false,"authors":[{"type":"individual","id":"b52ef55b5f9bf7a8","login":"anglee","name":"Ang Lee","avatar_url":"https://avatars-next.observableusercontent.com/9f99cc05b0f8c20eaf1867c9a84edab76fa85847e4b14e14854d84ea154e3b5b","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"b52ef55b5f9bf7a8","login":"anglee","name":"Ang Lee","avatar_url":"https://avatars-next.observableusercontent.com/9f99cc05b0f8c20eaf1867c9a84edab76fa85847e4b14e14854d84ea154e3b5b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Iterators and Generators","cells":[{"id":155,"value":"md`# Iterators and Generators`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`## JavaScript Arrays are iterable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`An 'Iterable' can be used in a \\`for-of\\` loop`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"{\n const ret = [];\n for (const it of [1,2,3]) {\n ret.push(it); \n }\n return ret;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`or just use \"\\`...\\`\"`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"{\n const array = [1,2,3];\n return [...array];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`## An *Iterable* is an object that has the method \\`[Symbol.iterator]\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`When we said \"A JS Array is iterable\", that means it has a prop [Symbol.iterator] which is a method that returns an iterator everytime it is called. You can think of the [Symbol.iterator] method as an iterator factory that creates iterators which can be used to iterate through the iterable(e.g. array)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"md`TypeScript:\n

\ninterface Iterable {\n  \\[Symbol.iterator\\]\\(\\) : Iterator\n}\n

\ninterface Iterator {\n  next\\(\\) : IteratorResult\n}\ninterface IteratorResult {\n  value: any;\n  done: boolean;\n}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"md`Each return of the next method has \\`value\\` and \\`done\\` properties `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"{\n const array = [1,2,3];\n const iterator = array[Symbol.iterator]();\n return [\n iterator.next(),\n iterator.next(),\n iterator.next(),\n iterator.next(),\n ]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"md`using a iterator:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"{\n const array = [1,2,3];\n const iterator = array[Symbol.iterator]();\n \n const ret = [];\n while (true) {\n const {value, done} = iterator.next();\n if (done) {\n break;\n }\n ret.push(value);\n } \n return ret;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"md`## Implement an iterator factory by ourselves`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"{\n const iteratorFactory = () => {\n const data = [1,2,3];\n \n let index = 0;\n return {\n next: () => {\n if (index < data.length) {\n return { value: data[index++], done: false};\n } else {\n return { done: true };\n }\n }\n }\n };\n \n const iterator = iteratorFactory();\n \n return [\n iterator.next(),\n iterator.next(),\n iterator.next(),\n iterator.next()\n ]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"md`## Remember iterables are just objects that has a [Symbol.iterator] method`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"{\n const myIterable = new Object();\n myIterable[Symbol.iterator] = () => { // this is the same `iteratorFactory' as above!\n const data = [1,2,3];\n \n let index = 0;\n return {\n next: () => {\n if (index < data.length) {\n return { value: data[index++], done: false};\n } else {\n return { done: true };\n }\n }\n }\n };\n return [...myIterable];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"md`## Generator is way to define an iterator factory`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"{\n const myIterable = new Object();\n myIterable[Symbol.iterator] = function* () { // replacing iteratorFactory with a generator\n yield 1;\n yield 2;\n yield 3;\n };\n\n return [...myIterable];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"md`## The return of generator() is an iterator`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"md`meaning it has a \\`'next'\\` method`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"{\n const generator123 = function* () {\n yield 1;\n yield 2;\n yield 3;\n };\n \n const iterator = generator123();\n return [\n iterator.next(),\n iterator.next(),\n iterator.next(),\n iterator.next()\n ]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"md`## The returns of generator() is also an iterable!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"md`meaning it has a \\`[Symbol.iterator]\\` method`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"{\n const generator123 = function* () {\n yield 1;\n yield 2;\n yield 3;\n };\n \n const iterable = generator123();\n return iterable[Symbol.iterator];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"md`and you can use \\`for-of\\` or \\`...\\` on it`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"{\n const generator123 = function* () {\n yield 1;\n yield 2;\n yield 3;\n };\n \n const iterable = generator123();\n return [...iterable]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"md`## '*Iterators that are iterable* ' is a common pattern`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"md`Actually, all built-in ES6 iterators follow this pattern (via a common prototype)\n\\`\\`\\`\n[Symbol.iterator]() {\n return this;\n}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"{\n const array = [1,2,3]\n const iterator = array[Symbol.iterator]()\n \n // iterator is also iterable (ie. has [Symbol.iterator])\n console.assert(typeof iterator[Symbol.iterator] === \"function\"); \n \n // and iterator[Symbol.iterator]() returns itself:\n return iterator[Symbol.iterator]() === iterator;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"md`## Reference\nAxel Rauschmayer, [Exploring ES6 Chapter 21. Iterables and iterators](http://exploringjs.com/es6/ch_iteration.html#sec_iterable-data-sources)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null