[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"article-iterator-helpers-lazy-filter-map":32,"code:js:true:1wzmy3u":273,"code:js:true:zyd1ay":274,"code:js:true:1yw75mv":275,"code:js:true:fakgy0":276,"code:plain:true:rzqptb":277,"code:js:true:p6hg98":278,"code:js:true:1v9pp4f":279,"code:js:true:6lbg6v":280,"code:ts:true:xv93dk":281},[4,20],{"id":5,"slug":6,"name":7,"tagline":8,"description":9,"accentFrom":10,"accentTo":11,"icon":12,"defaultLocale":13,"locales":14,"features":16,"position":19},"019fe637-3d33-714b-b57f-23e163ffca0c","dev","Web Development","Build. Learn. Ship.","Practical courses, engineering-grade articles and open-source tools for people who ship.","violet-500","cyan-400","◇","en",[13,15],"fa",{"courses":17,"paths":17,"articles":17,"exams":18,"flashcards":18,"packages":17,"community":17,"certificates":17,"teams":17,"commerce":17},true,false,0,{"id":21,"slug":22,"name":23,"tagline":24,"description":25,"accentFrom":26,"accentTo":10,"icon":27,"defaultLocale":13,"locales":28,"features":30,"position":31},"019fe637-3dc2-754c-8657-0f175bfee7c6","lang","Languages","Learn a language the way you learn a codebase.","Structured paths, listening drills and spaced repetition that actually sticks.","amber-400","⌘",[13,15,29],"es",{"courses":17,"paths":17,"articles":18,"exams":18,"flashcards":18,"packages":18,"community":17,"certificates":18,"teams":18,"commerce":17},2,{"id":33,"slug":34,"title":35,"subtitle":36,"excerpt":37,"coverUrl":38,"locale":13,"readingMinutes":39,"publishedAt":40,"viewCount":41,"likeCount":19,"commentCount":19,"author":42,"vertical":47,"topic":48,"tags":51,"_count":63,"playground":65,"body":67,"bodyMd":255,"seo":256,"translationGroupId":260,"thread":261,"assessments":263,"translations":269,"quiz":271},"019fe660-a973-77a9-9820-826bf25fd884","iterator-helpers-lazy-filter-map","Array methods are eager. Iterator helpers are lazy. Here's why that matters.",null,"Every `.map()` and `.filter()` on an array creates a new intermediate array. Iterator helpers — built into JavaScript since 2024 — give you the same pipeline but evaluate one element at a time, with no wasted allocations.","\u002Fmedia\u002Fcovers\u002Fiterator-helpers-lazy-filter-map.png",5,"2026-07-30T08:34:21.684Z",78,{"id":43,"name":44,"username":45,"avatarUrl":36,"headline":46},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":49,"name":50},"javascript","JavaScript",[52,54,57,60],{"slug":49,"name":53,"color":36},"Javascript",{"slug":55,"name":56,"color":36},"webdev","Webdev",{"slug":58,"name":59,"color":36},"frontend","Frontend",{"slug":61,"name":62,"color":36},"performance","Performance",{"assessments":64},1,{"slug":34,"title":66},"Eager arrays vs lazy iterator helpers",{"blocks":68,"version":64},[69,73,76,81,84,90,93,96,100,103,107,110,114,117,121,124,127,130,135,138,142,145,148,151,155,158,162,165,168,171,179,182,185,188,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":70,"html":71,"type":72},"b1","\u003Cp>Every time you chain \u003Ccode>.filter()\u003C\u002Fcode> and \u003Ccode>.map()\u003C\u002Fcode> on an array, JavaScript creates two new arrays. For small lists this is invisible. For a large dataset, a generator producing values on demand, or a stream where you only need the first handful of results, you've materialized thousands of elements you immediately discard.\u003C\u002Fp>","paragraph",{"id":74,"html":75,"type":72},"b2","\u003Cp>Iterator helpers are the lazy alternative. They shipped natively in Chrome 122, Firefox 131, and Safari 18.2 — no library, no polyfill, no build step.\u003C\u002Fp>",{"id":77,"html":78,"text":79,"type":80,"level":31},"b3","What "lazy" means in practice","What \"lazy\" means in practice","heading",{"id":82,"html":83,"type":72},"b4","\u003Cp>Array methods are \u003Cem>eager\u003C\u002Fem>: they run immediately and return a new fully-populated array.\u003C\u002Fp>",{"id":85,"code":86,"type":87,"language":88,"highlight":89},"b5","const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\nconst result = numbers\n  .filter(n => n % 2 === 0)  \u002F\u002F → allocates [2, 4, 6, 8, 10]\n  .map(n => n * n)            \u002F\u002F → allocates [4, 16, 36, 64, 100]\n  .slice(0, 3);               \u002F\u002F → allocates [4, 16, 36]","code","js",[],{"id":91,"html":92,"type":72},"b6","\u003Cp>Three arrays get created and discarded. Only the last one survives.\u003C\u002Fp>",{"id":94,"html":95,"type":72},"b7","\u003Cp>Iterator helpers are \u003Cem>lazy\u003C\u002Fem>: they build a pipeline description. No element is processed until you ask for one.\u003C\u002Fp>",{"id":97,"code":98,"type":87,"language":88,"highlight":99},"b8","const result = Iterator.from([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n  .filter(n => n % 2 === 0)\n  .map(n => n * n)\n  .take(3)\n  .toArray();\n\n\u002F\u002F → [4, 16, 36]",[],{"id":101,"html":102,"type":72},"b9","\u003Cp>Same output. No intermediate arrays. The pipeline processes elements one at a time: \u003Ccode>1\u003C\u002Fcode> hits \u003Ccode>.filter()\u003C\u002Fcode>, fails, and is discarded. \u003Ccode>2\u003C\u002Fcode> passes \u003Ccode>.filter()\u003C\u002Fcode>, goes through \u003Ccode>.map()\u003C\u002Fcode>, counts toward \u003Ccode>.take(3)\u003C\u002Fcode>. The loop stops after three passing elements — the remaining numbers are never visited.\u003C\u002Fp>",{"id":104,"html":105,"text":106,"type":80,"level":31},"b10","\u003Ccode>Iterator.from()\u003C\u002Fcode> and what you get back","Iterator.from() and what you get back",{"id":108,"html":109,"type":72},"b11","\u003Cp>\u003Ccode>Iterator.from()\u003C\u002Fcode> wraps any iterable — arrays, Sets, Maps, strings, generator return values — in an object with the iterator helper methods attached.\u003C\u002Fp>",{"id":111,"code":112,"type":87,"language":88,"highlight":113},"b12","const set = new Set([1, 1, 2, 2, 3, 3, 4, 5]);\nconst result = Iterator.from(set)\n  .filter(n => n % 2 !== 0)\n  .toArray();\n\n\u002F\u002F → [1, 3, 5]",[],{"id":115,"html":116,"type":72},"b13","\u003Cp>Generators are a natural fit. A generator already produces values on demand; iterator helpers let you build pipelines over them without ever creating an intermediate array.\u003C\u002Fp>",{"id":118,"code":119,"type":87,"language":88,"highlight":120},"b14","function* naturals() {\n  let n = 0;\n  while (true) yield n++;\n}\n\nconst firstFiveSquaredEvens = Iterator.from(naturals())\n  .filter(n => n % 2 === 0)\n  .map(n => n * n)\n  .take(5)\n  .toArray();\n\n\u002F\u002F → [0, 4, 16, 36, 64]",[],{"id":122,"html":123,"type":72},"b15","\u003Cp>You cannot do this with array methods on an infinite generator — \u003Ccode>.filter()\u003C\u002Fcode> on an array needs to reach the end before it can return anything.\u003C\u002Fp>",{"id":125,"html":126,"text":126,"type":80,"level":31},"b16","The full method set",{"id":128,"html":129,"type":72},"b17","\u003Cp>Iterator helpers ship ten methods. The first group builds the pipeline (lazy); the second group runs it (terminal):\u003C\u002Fp>",{"id":131,"code":132,"type":87,"language":133,"highlight":134},"b18","Lazy:     .map(fn)  .filter(fn)  .take(n)  .drop(n)  .flatMap(fn)\nTerminal: .toArray()  .reduce(fn, init)  .find(fn)  .some(fn)  .every(fn)  .forEach(fn)","plain",[],{"id":136,"html":137,"type":72},"b19","\u003Cp>Calling a lazy method returns a new iterator — nothing runs yet. Calling a terminal method pulls values through the entire chain until it has what it needs, then stops.\u003C\u002Fp>",{"id":139,"code":140,"type":87,"language":88,"highlight":141},"b20","\u002F\u002F .find() stops at the first match; the rest of the data is never touched\nconst firstLongWord = Iterator.from(wordList)\n  .filter(w => w.startsWith('pre'))\n  .find(w => w.length > 10);",[],{"id":143,"html":144,"text":144,"type":80,"level":31},"b21","A practical example: processing a large list",{"id":146,"html":147,"type":72},"b22","\u003Cp>You're rendering a filterable list of 10,000 records. The user has typed a search term and picked a category. The view shows the first 50 matches.\u003C\u002Fp>",{"id":149,"html":150,"type":72},"b23","\u003Cp>With arrays:\u003C\u002Fp>",{"id":152,"code":153,"type":87,"language":88,"highlight":154},"b24","const visible = allRecords\n  .filter(r => r.category === selectedCategory)  \u002F\u002F walks all 10,000\n  .filter(r => r.name.includes(query))           \u002F\u002F walks the filtered set\n  .slice(0, 50);                                 \u002F\u002F finally limits",[],{"id":156,"html":157,"type":72},"b25","\u003Cp>With iterator helpers:\u003C\u002Fp>",{"id":159,"code":160,"type":87,"language":88,"highlight":161},"b26","const visible = Iterator.from(allRecords)\n  .filter(r => r.category === selectedCategory)\n  .filter(r => r.name.includes(query))\n  .take(50)\n  .toArray();",[],{"id":163,"html":164,"type":72},"b27","\u003Cp>The iterator version stops as soon as it has 50 matches. If those 50 appear in the first 200 records, the remaining 9,800 are never examined. With the array version, every record is always visited for the first filter pass regardless.\u003C\u002Fp>",{"id":166,"html":167,"text":167,"type":80,"level":31},"b28","When to keep using array methods",{"id":169,"html":170,"type":72},"b29","\u003Cp>Iterator helpers are not a universal replacement:\u003C\u002Fp>",{"id":172,"type":173,"items":174,"ordered":18},"b30","list",[175,176,177,178],"\u003Cstrong>You need random access\u003C\u002Fstrong>: arrays let you index by position. An iterator moves forward only, once.","\u003Cstrong>You need to pass over the data multiple times\u003C\u002Fstrong>: you can only consume an iterator once. Arrays are reusable.","\u003Cstrong>You need \u003Ccode>.sort()\u003C\u002Fcode>\u003C\u002Fstrong>: sorting requires the full dataset in memory. There's no lazy sort.","\u003Cstrong>The list is small\u003C\u002Fstrong>: for ten items, the overhead of \u003Ccode>Iterator.from()\u003C\u002Fcode> is noise. Use whatever reads more clearly.",{"id":180,"html":181,"type":72},"b31","\u003Cp>The clearest signal: if you're chaining array methods on a large or potentially infinite source and discarding intermediate results, that's the iterator helpers' use case.\u003C\u002Fp>",{"id":183,"html":184,"text":184,"type":80,"level":31},"b32","TypeScript support",{"id":186,"html":187,"type":72},"b33","\u003Cp>TypeScript 5.6 added the \u003Ccode>Iterator\u003C\u002Fcode> global type and the method signatures. If your \u003Ccode>tsconfig.json\u003C\u002Fcode> targets ES2024 or later, they're available automatically:\u003C\u002Fp>",{"id":189,"code":190,"type":87,"language":191,"highlight":192},"b34","function* ids(): Generator\u003Cnumber> {\n  let id = 0;\n  while (true) yield id++;\n}\n\nconst first10: number[] = Iterator.from(ids()).take(10).toArray();","ts",[],{"id":194,"html":195,"type":72},"b35","\u003Cp>For earlier \u003Ccode>lib\u003C\u002Fcode> targets, you may need to add \u003Ccode>"ES2024"\u003C\u002Fcode> to the \u003Ccode>lib\u003C\u002Fcode> array explicitly, or use \u003Ccode>@types\u002Fcore-js\u003C\u002Fcode> if you're polyfilling.\u003C\u002Fp>",{"id":197,"html":198,"text":198,"type":80,"level":31},"b36","Browser support",{"id":200,"html":201,"type":72},"b37","\u003Cp>Iterator helpers are \u003Cstrong>Baseline 2024\u003C\u002Fstrong>: Chrome 122 (March 2024), Firefox 131 (September 2024), Safari 18.2 (December 2024), Node.js 22. For environments that predate these versions, \u003Ccode>core-js\u003C\u002Fcode> 3.38+ includes a polyfill you can add to your bundle.\u003C\u002Fp>",{"id":203,"html":204,"type":72},"b38","\u003Cp>Generator functions already return an iterator — if you're writing generators today, their return values gain these methods automatically once your targets are modern enough.\u003C\u002Fp>",{"id":206,"html":207,"type":72},"b39","\u003C!-- playground:start -->",{"id":209,"html":210,"text":210,"type":80,"level":31},"b40","🎮 Try it yourself",{"id":212,"html":213,"type":72},"b41","\u003Cp>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-07-30-iterator-helpers-lazy-filter-map\u002Fplayground\u002F\">▶️ Open the interactive playground →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":215,"html":216,"type":72},"b42","\u003Cp>\u003Cem>Runs right in your browser — poke at it and watch the concept react live.\u003C\u002Fem>\u003C\u002Fp>",{"id":218,"html":219,"type":72},"b43","\u003C!-- playground:end -->",{"id":221,"html":222,"type":72},"b44","\u003C!-- quiz:start -->",{"id":224,"html":225,"text":225,"type":80,"level":31},"b45","🧠 Test yourself",{"id":227,"html":228,"type":72},"b46","\u003Cp>Think it clicked? \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-07-30-iterator-helpers-lazy-filter-map\">Take the 8-question quiz →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":230,"html":231,"type":72},"b47","\u003Cp>\u003Cem>Instant feedback, a hint on every question, and an explanation for each answer — right or wrong.\u003C\u002Fem>\u003C\u002Fp>",{"id":233,"html":234,"type":72},"b48","\u003C!-- quiz:end -->",{"id":236,"html":237,"text":237,"type":80,"level":31},"b49","The takeaway",{"id":239,"html":240,"type":72},"b50","\u003Cp>Search your codebase for \u003Ccode>.filter().map().slice(0, n)\u003C\u002Fcode> chains on arrays. Each one allocates intermediate arrays that go straight to the garbage collector. Replace them with \u003Ccode>Iterator.from()\u003C\u002Fcode> and \u003Ccode>.take(n)\u003C\u002Fcode>, and the pipeline will stop as soon as it has what it needs — no extra work, no extra memory. The API surface is nearly identical to array methods. The only shift is thinking of the chain as a pipeline you're \u003Cem>describing\u003C\u002Fem> rather than a collection you're \u003Cem>transforming\u003C\u002Fem>.\u003C\u002Fp>",{"id":242,"type":243},"b51","divider",{"id":245,"html":246,"type":72},"b52","\u003Cp>\u003Cem>Thanks for reading! Let's stay connected:\u003C\u002Fem>\u003C\u002Fp>",{"id":248,"type":173,"items":249,"ordered":18},"b53",[250,251,252,253,254],"⭐ \u003Cstrong>GitHub\u003C\u002Fstrong> — follow me and star the projects: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fparsajiravand\">github.com\u002Fparsajiravand\u003C\u002Fa>","💬 \u003Cstrong>Discord\u003C\u002Fstrong> — join the frontend best-practices community: \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ\">discord.gg\u002Fd9KRhuAwQ\u003C\u002Fa>","📸 \u003Cstrong>Instagram\u003C\u002Fstrong> — frontend best practices, daily: \u003Ca href=\"https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F\">@bestpractice___\u003C\u002Fa>","💼 \u003Cstrong>LinkedIn\u003C\u002Fstrong> — \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F\">linkedin.com\u002Fin\u002Fparsa-jiravand\u003C\u002Fa>","✉️ \u003Cstrong>Email\u003C\u002Fstrong> (work & contract inquiries): \u003Ca href=\"mailto:bestpractice2026@gmail.com\">bestpractice2026@gmail.com\u003C\u002Fa>","Every time you chain `.filter()` and `.map()` on an array, JavaScript creates two new arrays. For small lists this is invisible. For a large dataset, a generator producing values on demand, or a stream where you only need the first handful of results, you've materialized thousands of elements you immediately discard.\n\nIterator helpers are the lazy alternative. They shipped natively in Chrome 122, Firefox 131, and Safari 18.2 — no library, no polyfill, no build step.\n\n## What \"lazy\" means in practice\n\nArray methods are *eager*: they run immediately and return a new fully-populated array.\n\n```js\nconst numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\nconst result = numbers\n  .filter(n => n % 2 === 0)  \u002F\u002F → allocates [2, 4, 6, 8, 10]\n  .map(n => n * n)            \u002F\u002F → allocates [4, 16, 36, 64, 100]\n  .slice(0, 3);               \u002F\u002F → allocates [4, 16, 36]\n```\n\nThree arrays get created and discarded. Only the last one survives.\n\nIterator helpers are *lazy*: they build a pipeline description. No element is processed until you ask for one.\n\n```js\nconst result = Iterator.from([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n  .filter(n => n % 2 === 0)\n  .map(n => n * n)\n  .take(3)\n  .toArray();\n\n\u002F\u002F → [4, 16, 36]\n```\n\nSame output. No intermediate arrays. The pipeline processes elements one at a time: `1` hits `.filter()`, fails, and is discarded. `2` passes `.filter()`, goes through `.map()`, counts toward `.take(3)`. The loop stops after three passing elements — the remaining numbers are never visited.\n\n## `Iterator.from()` and what you get back\n\n`Iterator.from()` wraps any iterable — arrays, Sets, Maps, strings, generator return values — in an object with the iterator helper methods attached.\n\n```js\nconst set = new Set([1, 1, 2, 2, 3, 3, 4, 5]);\nconst result = Iterator.from(set)\n  .filter(n => n % 2 !== 0)\n  .toArray();\n\n\u002F\u002F → [1, 3, 5]\n```\n\nGenerators are a natural fit. A generator already produces values on demand; iterator helpers let you build pipelines over them without ever creating an intermediate array.\n\n```js\nfunction* naturals() {\n  let n = 0;\n  while (true) yield n++;\n}\n\nconst firstFiveSquaredEvens = Iterator.from(naturals())\n  .filter(n => n % 2 === 0)\n  .map(n => n * n)\n  .take(5)\n  .toArray();\n\n\u002F\u002F → [0, 4, 16, 36, 64]\n```\n\nYou cannot do this with array methods on an infinite generator — `.filter()` on an array needs to reach the end before it can return anything.\n\n## The full method set\n\nIterator helpers ship ten methods. The first group builds the pipeline (lazy); the second group runs it (terminal):\n\n```\nLazy:     .map(fn)  .filter(fn)  .take(n)  .drop(n)  .flatMap(fn)\nTerminal: .toArray()  .reduce(fn, init)  .find(fn)  .some(fn)  .every(fn)  .forEach(fn)\n```\n\nCalling a lazy method returns a new iterator — nothing runs yet. Calling a terminal method pulls values through the entire chain until it has what it needs, then stops.\n\n```js\n\u002F\u002F .find() stops at the first match; the rest of the data is never touched\nconst firstLongWord = Iterator.from(wordList)\n  .filter(w => w.startsWith('pre'))\n  .find(w => w.length > 10);\n```\n\n## A practical example: processing a large list\n\nYou're rendering a filterable list of 10,000 records. The user has typed a search term and picked a category. The view shows the first 50 matches.\n\nWith arrays:\n\n```js\nconst visible = allRecords\n  .filter(r => r.category === selectedCategory)  \u002F\u002F walks all 10,000\n  .filter(r => r.name.includes(query))           \u002F\u002F walks the filtered set\n  .slice(0, 50);                                 \u002F\u002F finally limits\n```\n\nWith iterator helpers:\n\n```js\nconst visible = Iterator.from(allRecords)\n  .filter(r => r.category === selectedCategory)\n  .filter(r => r.name.includes(query))\n  .take(50)\n  .toArray();\n```\n\nThe iterator version stops as soon as it has 50 matches. If those 50 appear in the first 200 records, the remaining 9,800 are never examined. With the array version, every record is always visited for the first filter pass regardless.\n\n## When to keep using array methods\n\nIterator helpers are not a universal replacement:\n\n- **You need random access**: arrays let you index by position. An iterator moves forward only, once.\n- **You need to pass over the data multiple times**: you can only consume an iterator once. Arrays are reusable.\n- **You need `.sort()`**: sorting requires the full dataset in memory. There's no lazy sort.\n- **The list is small**: for ten items, the overhead of `Iterator.from()` is noise. Use whatever reads more clearly.\n\nThe clearest signal: if you're chaining array methods on a large or potentially infinite source and discarding intermediate results, that's the iterator helpers' use case.\n\n## TypeScript support\n\nTypeScript 5.6 added the `Iterator` global type and the method signatures. If your `tsconfig.json` targets ES2024 or later, they're available automatically:\n\n```ts\nfunction* ids(): Generator\u003Cnumber> {\n  let id = 0;\n  while (true) yield id++;\n}\n\nconst first10: number[] = Iterator.from(ids()).take(10).toArray();\n```\n\nFor earlier `lib` targets, you may need to add `\"ES2024\"` to the `lib` array explicitly, or use `@types\u002Fcore-js` if you're polyfilling.\n\n## Browser support\n\nIterator helpers are **Baseline 2024**: Chrome 122 (March 2024), Firefox 131 (September 2024), Safari 18.2 (December 2024), Node.js 22. For environments that predate these versions, `core-js` 3.38+ includes a polyfill you can add to your bundle.\n\nGenerator functions already return an iterator — if you're writing generators today, their return values gain these methods automatically once your targets are modern enough.\n\n\n\u003C!-- playground:start -->\n\n## 🎮 Try it yourself\n\n**[▶️ Open the interactive playground →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-07-30-iterator-helpers-lazy-filter-map\u002Fplayground\u002F)**\n\n_Runs right in your browser — poke at it and watch the concept react live._\n\n\u003C!-- playground:end -->\n\n\u003C!-- quiz:start -->\n\n## 🧠 Test yourself\n\nThink it clicked? **[Take the 8-question quiz →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-07-30-iterator-helpers-lazy-filter-map)**\n\n_Instant feedback, a hint on every question, and an explanation for each answer — right or wrong._\n\n\u003C!-- quiz:end -->\n## The takeaway\n\nSearch your codebase for `.filter().map().slice(0, n)` chains on arrays. Each one allocates intermediate arrays that go straight to the garbage collector. Replace them with `Iterator.from()` and `.take(n)`, and the pipeline will stop as soon as it has what it needs — no extra work, no extra memory. The API surface is nearly identical to array methods. The only shift is thinking of the chain as a pipeline you're *describing* rather than a collection you're *transforming*.\n\n---\n\n*Thanks for reading! Let's stay connected:*\n\n- ⭐ **GitHub** — follow me and star the projects: [github.com\u002Fparsajiravand](https:\u002F\u002Fgithub.com\u002Fparsajiravand)\n- 💬 **Discord** — join the frontend best-practices community: [discord.gg\u002Fd9KRhuAwQ](https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ)\n- 📸 **Instagram** — frontend best practices, daily: [@bestpractice___](https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F)\n- 💼 **LinkedIn** — [linkedin.com\u002Fin\u002Fparsa-jiravand](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F)\n- ✉️ **Email** (work & contract inquiries): [bestpractice2026@gmail.com](mailto:bestpractice2026@gmail.com)",{"title":257,"canonical":258,"description":259},"Array methods are eager. Iterator helpers are lazy. Here's why that ma","https:\u002F\u002Fbestpractic.org\u002Fblog\u002Fiterator-helpers-lazy-filter-map","Every `.map()` and `.filter()` on an array creates a new intermediate array. Iterator helpers — built into JavaScript since 2024 — give you the same pipeline but evaluate one eleme","019fe660-a973-77a9-9820-85bd21647b51",{"id":262,"locked":18},"019fe660-b015-710d-8ba8-a9506d9bf161",[264],{"id":265,"slug":34,"title":266,"_count":267},"019fe776-943c-7511-a151-f9b0ebb5a06f","Eager arrays vs. lazy iterator helpers",{"questions":268},8,[270],{"locale":13,"slug":34},{"id":265,"slug":34,"title":266,"_count":272,"questionCount":268},{"questions":268},"\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> numbers \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>\u003Cspan class=\"shj-num\">1\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">2\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">3\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">4\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">5\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">6\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">7\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">8\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">9\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">10\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan>;\n\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> result \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> numbers\n  \u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">filter\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>n \u003Cspan class=\"shj-kwd\">=>\u003C\u002Fspan> n \u003Cspan class=\"shj-oper\">%\u003C\u002Fspan> \u003Cspan class=\"shj-num\">2\u003C\u002Fspan> \u003Cspan class=\"shj-oper\">===\u003C\u002Fspan> \u003Cspan class=\"shj-num\">0\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>  \u003Cspan class=\"shj-cmnt\">\u002F\u002F → allocates [2, 4, 6, 8, 10]\n\u003C\u002Fspan>  \u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">map\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>n \u003Cspan class=\"shj-kwd\">=>\u003C\u002Fspan> n \u003Cspan class=\"shj-oper\">*\u003C\u002Fspan> n\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>            \u003Cspan class=\"shj-cmnt\">\u002F\u002F → allocates [4, 16, 36, 64, 100]\n\u003C\u002Fspan>  \u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">slice\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">0\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">3\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;               \u003Cspan class=\"shj-cmnt\">\u002F\u002F → allocates [4, 16, 36]\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> result \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Iterator\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">from\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>\u003Cspan class=\"shj-num\">1\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">2\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">3\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">4\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">5\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">6\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">7\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">8\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">9\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">10\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\n  \u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">filter\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>n \u003Cspan class=\"shj-kwd\">=>\u003C\u002Fspan> n \u003Cspan class=\"shj-oper\">%\u003C\u002Fspan> \u003Cspan class=\"shj-num\">2\u003C\u002Fspan> \u003Cspan class=\"shj-oper\">===\u003C\u002Fspan> \u003Cspan class=\"shj-num\">0\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\n  \u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">map\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>n \u003Cspan class=\"shj-kwd\">=>\u003C\u002Fspan> n \u003Cspan class=\"shj-oper\">*\u003C\u002Fspan> n\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\n  \u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">take\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">3\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\n  \u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">toArray\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\n\u003Cspan class=\"shj-cmnt\">\u002F\u002F → [4, 16, 36]\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">set\u003C\u002Fspan> \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">new\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Set\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>\u003Cspan class=\"shj-num\">1\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">1\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">2\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">2\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">3\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">3\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">4\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">5\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> result \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Iterator\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">from\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">set\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\n  \u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">filter\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>n \u003Cspan class=\"shj-kwd\">=>\u003C\u002Fspan> n \u003Cspan class=\"shj-oper\">%\u003C\u002Fspan> \u003Cspan class=\"shj-num\">2\u003C\u002Fspan> \u003Cspan class=\"shj-oper\">!==\u003C\u002Fspan> \u003Cspan class=\"shj-num\">0\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\n  \u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">toArray\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\n\u003Cspan class=\"shj-cmnt\">\u002F\u002F → [1, 3, 5]\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003Cdiv>10\u003C\u002Fdiv>\u003Cdiv>11\u003C\u002Fdiv>\u003Cdiv>12\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">function\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">*\u003C\u002Fspan> \u003Cspan class=\"shj-func\">naturals\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-kwd\">let\u003C\u002Fspan> n \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-num\">0\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-kwd\">while\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bool\">true\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">yield\u003C\u002Fspan> n\u003Cspan class=\"shj-oper\">++\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> firstFiveSquaredEvens \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Iterator\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">from\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-func\">naturals\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\n  \u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">filter\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>n \u003Cspan class=\"shj-kwd\">=>\u003C\u002Fspan> n \u003Cspan class=\"shj-oper\">%\u003C\u002Fspan> \u003Cspan class=\"shj-num\">2\u003C\u002Fspan> \u003Cspan class=\"shj-oper\">===\u003C\u002Fspan> \u003Cspan class=\"shj-num\">0\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\n  \u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">map\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>n \u003Cspan class=\"shj-kwd\">=>\u003C\u002Fspan> n \u003Cspan class=\"shj-oper\">*\u003C\u002Fspan> n\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\n  \u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">take\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">5\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\n  \u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">toArray\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\n\u003Cspan class=\"shj-cmnt\">\u002F\u002F → [0, 4, 16, 36, 64]\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-plain shj-multiline\" data-lang=\"plain\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">Lazy:     .map(fn)  .filter(fn)  .take(n)  .drop(n)  .flatMap(fn)\nTerminal: .toArray()  .reduce(fn, init)  .find(fn)  .some(fn)  .every(fn)  .forEach(fn)\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-cmnt\">\u002F\u002F .find() stops at the first match; the rest of the data is never touched\n\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> firstLongWord \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Iterator\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">from\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>wordList\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\n  \u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">filter\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>w \u003Cspan class=\"shj-kwd\">=>\u003C\u002Fspan> w\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">startsWith\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-str\">'pre'\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\n  \u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">find\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>w \u003Cspan class=\"shj-kwd\">=>\u003C\u002Fspan> w\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>length \u003Cspan class=\"shj-oper\">>\u003C\u002Fspan> \u003Cspan class=\"shj-num\">10\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> visible \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> allRecords\n  \u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">filter\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>r \u003Cspan class=\"shj-kwd\">=>\u003C\u002Fspan> r\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>category \u003Cspan class=\"shj-oper\">===\u003C\u002Fspan> selectedCategory\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>  \u003Cspan class=\"shj-cmnt\">\u002F\u002F walks all 10,000\n\u003C\u002Fspan>  \u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">filter\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>r \u003Cspan class=\"shj-kwd\">=>\u003C\u002Fspan> r\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>name\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">includes\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>query\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>           \u003Cspan class=\"shj-cmnt\">\u002F\u002F walks the filtered set\n\u003C\u002Fspan>  \u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">slice\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">0\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">50\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;                                 \u003Cspan class=\"shj-cmnt\">\u002F\u002F finally limits\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> visible \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Iterator\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">from\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>allRecords\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\n  \u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">filter\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>r \u003Cspan class=\"shj-kwd\">=>\u003C\u002Fspan> r\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>category \u003Cspan class=\"shj-oper\">===\u003C\u002Fspan> selectedCategory\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\n  \u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">filter\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>r \u003Cspan class=\"shj-kwd\">=>\u003C\u002Fspan> r\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>name\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">includes\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>query\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\n  \u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">take\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">50\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\n  \u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">toArray\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-ts shj-multiline\" data-lang=\"ts\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">function\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">*\u003C\u002Fspan> \u003Cspan class=\"shj-func\">ids\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Generator\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u003C\u002Fspan>number\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-kwd\">let\u003C\u002Fspan> id \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-num\">0\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-kwd\">while\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bool\">true\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">yield\u003C\u002Fspan> id\u003Cspan class=\"shj-oper\">++\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> first10\u003Cspan class=\"shj-type\">: number\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan> \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Iterator\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">from\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-func\">ids\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">take\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">10\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">toArray\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>"]