From e379d62305d4bbf75763358d17ff0d00d87f87dc Mon Sep 17 00:00:00 2001 From: 30secondsofcode <30secondsofcode@gmail.com> Date: Sun, 16 Feb 2020 11:10:18 +0000 Subject: [PATCH] Travis build: 60 --- blog_data/snippetList.json | 17 +++++++++++++++++ blog_data/snippets.json | 27 +++++++++++++++++++++++++++ 2 files changed, 44 insertions(+) diff --git a/blog_data/snippetList.json b/blog_data/snippetList.json index c99e84dfe..f84a0ed4e 100644 --- a/blog_data/snippetList.json +++ b/blog_data/snippetList.json @@ -77,6 +77,23 @@ "hash": "af1563c13c9cfc4f3ca9ab6c06c0e23579f134f0a4c37220e95d75eb785f943b" } }, + { + "id": "javascript-iterators", + "type": "snippetListing", + "title": "What are JavaScript Iterators and where can I use them?", + "attributes": { + "text": "JavaScript iterators were introduced in ES6 and they are used to loop over a sequence of values, usually some sort of collection. By definition, an iterator must implement a `next()` function, that returns an object in the form of `{ value, done }` where `value` is the next value in the iteration sequence and `done` is a boolean determining if the sequence has already been consumed.\n\nA very simple iterator with practical use in a real-world project could be as follows:\n\n```js\nclass LinkedList {\n constructor(data) {\n this.data = data;\n }\n\n firstItem() {\n return this.data.find(i => i.head);\n }\n\n findById(id) {\n return this.data.find(i => i.id === id);\n }\n\n [Symbol.iterator]() {\n let item = {next: this.firstItem().id};\n return {\n next: () => {\n item = this.findById(item.next);\n if(item) {\n return {value: item.value, done: false};\n }\n return {value: undefined, done: true};\n }\n };\n }\n}\n\nconst myList = new LinkedList([\n {id: 'a10', value: 'First', next: 'a13', head: true },\n {id: 'a11', value: 'Last', next: null, head: false },\n {id: 'a12', value: 'Third', next: 'a11', head: false },\n {id: 'a13', value: 'Second', next: 'a12', head: false }\n]);\n\nfor(let item of myList) {\n console.log(item); // 'First', 'Second', 'Third', 'Last'\n}\n```\n\nIn the above example, we implement a `LinkedList` data structure, that internally uses a `data` array where each item has a `value`, alongside some implementation-specific properties used to determine its position in the sequence. Objects constructed from this class are not iterable by default, so we define an iterator via the use of `Symbol.iterator` and set it up so that the returned sequence is in order based on the internal implementation of the class, while the returned items only return their `value`. \n\nOn a related note, iterators are just functions, meaning they can be called like any other function (e.g. to delegate the iteration to an existing iterator), while also not being restricted to the `Symbol.iterator` name, allowing us to define multiple iterators for the same object. Here's an example of these concepts at play:\n\n```js\nclass SpecialList {\n constructor(data) {\n this.data = data;\n }\n\n [Symbol.iterator]() {\n return this.data[Symbol.iterator]();\n }\n\n values() {\n return this.data\n .filter(i => i.complete)\n .map(i => i.value)\n [Symbol.iterator]();\n }\n}\n\nconst myList = new SpecialList([\n {complete: true, value: 'Lorem ipsum'},\n {complete: true, value: 'dolor sit amet'},\n {complete: false},\n {complete: true, value: 'adipiscing elit'}\n]);\n\nfor(let item of myList) {\n console.log(item); // The exact data passed to the SpecialList constructor above\n}\n\nfor(let item of myList.values()) {\n console.log(item); // 'Lorem ipsum', 'dolor sit amet', 'adipiscing elit'\n}\n```\n\nIn this example, we use the native array iterator of the `data` object to make our `SpecialList` iterable, returning the exact values of the `data` array. Meanwhile, we also define a `values` method, which is an iterator itself, using `Array.prototype.filter()` and `Array.prototype.map()` on the `data` array, then finally returning the `Symbol.iterator` of the result, allowing iteration only over non-empty objects in the sequence and returning just the `value` for each one.\n\n\n**Image credit:** [Daniele Levis Pelusi](https://unsplash.com/@yogidan2012?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\n", + "tags": [ + "javascript", + "array", + "object", + "iterator" + ] + }, + "meta": { + "hash": "0b63d58f3ecd1d4dc6d3007629ce4e4a570dc15c09f09edcff6ef6a31a04bfc2" + } + }, { "id": "testing-stateful-ui-components", "type": "snippetListing", diff --git a/blog_data/snippets.json b/blog_data/snippets.json index d754e9526..8d4b1eb52 100644 --- a/blog_data/snippets.json +++ b/blog_data/snippets.json @@ -127,6 +127,33 @@ "authorCount": 2 } }, + { + "id": "javascript-iterators", + "title": "What are JavaScript Iterators and where can I use them?", + "type": "blog.question", + "attributes": { + "fileName": "javascript-iterators.md", + "cover": "blog_images/javascript-iterators.jpg", + "excerpt": "Learn how the new JavaScript ES6 Iterators work and how you can use them to level up your programming projects by understanding these short code examples.", + "authors": [ + "chalarangelo" + ], + "text": "JavaScript iterators were introduced in ES6 and they are used to loop over a sequence of values, usually some sort of collection. By definition, an iterator must implement a `next()` function, that returns an object in the form of `{ value, done }` where `value` is the next value in the iteration sequence and `done` is a boolean determining if the sequence has already been consumed.\n\nA very simple iterator with practical use in a real-world project could be as follows:\n\n```js\nclass LinkedList {\n constructor(data) {\n this.data = data;\n }\n\n firstItem() {\n return this.data.find(i => i.head);\n }\n\n findById(id) {\n return this.data.find(i => i.id === id);\n }\n\n [Symbol.iterator]() {\n let item = {next: this.firstItem().id};\n return {\n next: () => {\n item = this.findById(item.next);\n if(item) {\n return {value: item.value, done: false};\n }\n return {value: undefined, done: true};\n }\n };\n }\n}\n\nconst myList = new LinkedList([\n {id: 'a10', value: 'First', next: 'a13', head: true },\n {id: 'a11', value: 'Last', next: null, head: false },\n {id: 'a12', value: 'Third', next: 'a11', head: false },\n {id: 'a13', value: 'Second', next: 'a12', head: false }\n]);\n\nfor(let item of myList) {\n console.log(item); // 'First', 'Second', 'Third', 'Last'\n}\n```\n\nIn the above example, we implement a `LinkedList` data structure, that internally uses a `data` array where each item has a `value`, alongside some implementation-specific properties used to determine its position in the sequence. Objects constructed from this class are not iterable by default, so we define an iterator via the use of `Symbol.iterator` and set it up so that the returned sequence is in order based on the internal implementation of the class, while the returned items only return their `value`. \n\nOn a related note, iterators are just functions, meaning they can be called like any other function (e.g. to delegate the iteration to an existing iterator), while also not being restricted to the `Symbol.iterator` name, allowing us to define multiple iterators for the same object. Here's an example of these concepts at play:\n\n```js\nclass SpecialList {\n constructor(data) {\n this.data = data;\n }\n\n [Symbol.iterator]() {\n return this.data[Symbol.iterator]();\n }\n\n values() {\n return this.data\n .filter(i => i.complete)\n .map(i => i.value)\n [Symbol.iterator]();\n }\n}\n\nconst myList = new SpecialList([\n {complete: true, value: 'Lorem ipsum'},\n {complete: true, value: 'dolor sit amet'},\n {complete: false},\n {complete: true, value: 'adipiscing elit'}\n]);\n\nfor(let item of myList) {\n console.log(item); // The exact data passed to the SpecialList constructor above\n}\n\nfor(let item of myList.values()) {\n console.log(item); // 'Lorem ipsum', 'dolor sit amet', 'adipiscing elit'\n}\n```\n\nIn this example, we use the native array iterator of the `data` object to make our `SpecialList` iterable, returning the exact values of the `data` array. Meanwhile, we also define a `values` method, which is an iterator itself, using `Array.prototype.filter()` and `Array.prototype.map()` on the `data` array, then finally returning the `Symbol.iterator` of the result, allowing iteration only over non-empty objects in the sequence and returning just the `value` for each one.\n\n\n**Image credit:** [Daniele Levis Pelusi](https://unsplash.com/@yogidan2012?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\n", + "tags": [ + "javascript", + "array", + "object", + "iterator" + ] + }, + "meta": { + "hash": "0b63d58f3ecd1d4dc6d3007629ce4e4a570dc15c09f09edcff6ef6a31a04bfc2", + "firstSeen": "1581851360", + "lastUpdated": "1581851360", + "updateCount": 2, + "authorCount": 2 + } + }, { "id": "testing-stateful-ui-components", "title": "An approach to testing stateful React components",