ES6 Iterators and Generators — When Are They Actually Useful?

ES6 Iterators and Generators — When Are They Actually Useful?

ES6 Iterators and Generators — when are they actually useful? They are few good use cases for iterators and generators that are closer to the real-world scenario than a simple “Hello World” type code. ES6 Iterators these are built-in symbols for turning your custom objects into iterator. It useful to think of iterators as more of an elegant way to standardize your custom objects.

Iterators and generators are (somewhat) new JavaScript features introduced with ES6. When I first encountered iterators and generators, I was excited to add them to my tools arsenal. I even wrote an article about Iterators and generators, which you can check out  here.

However, working as a front-end developer on multiple projects in recent years, I’m yet to encounter one where iterators or generators are used actively. The counterpoint to that statement might be  redux-saga, where generators are the main building block. But I don’t see that as a worthy example since, in redux-saga, the usage of the generators is a forced side effect of using the library.

After doing more digging, I found a few use cases that go further than a simple “Hello World” type of code and are closer to the real-world scenario. Let’s start with iterators.

Why use iterators

In ES6 Iterators are built-in symbols for turning your custom objects into iterables. If you want to learn more about symbols and iterators take a look at  my post.

You might think: “Why go through the trouble of adding iterators to your custom objects”? You could accomplish the same thing by writing a custom utility function to iterate through the object instead. And you’re not wrong — with any programming language, there are a dozen of different ways to solve any given problem.

So it’s useful to think of iterators as more of an elegant way to standardize your custom objects. They provide a way for custom data structures to work nicely in the larger JS environment.

For that reason, libraries that provide custom data structures use them often. For example, the Immutable.JS library uses iterators to provide native Javascript functionality for their custom objects such as Map.

As a rule of thumb, it’s worth considering iterators when you need to provide native iteration capability to a well-encapsulated custom data structure. I say well-encapsulated because you don’t want to confuse people that are not familiar with the iterators with the implementation details.

es6 react programming javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React cloneElement: A Better Way to Build a Component API Props in ES6 Javascript and Ts

Using the React cloneElement is a better way to build a component API props in ES6 Javascript and Typescript. Here's a tutorial on how to do so.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

React Slider: How to Build an Image Slider With React Hooks

React Slider: How to Build an Image Slider With React Hooks. Creation of all the components necessary to display an array of content, as well as the ability to navigate back and forth to each slide in our slider. Adding an autoplay feature. We will dive deeper into React Hooks and optimize the slider both for performance and visual appeal. We will achieve this by tapping into useEffect and some new memoization helpers.

Learn React and JavaScript Programming Basics with Example Code

Learn React and JavaScript Programming Basics with Example Code. How does modern JavaScript knowledge make you an efficient React developer? What kind of changes do you need in your mindset when you design and develop a React application? How to Use Let and Const in JavaScript. How to Use Template Literals in JavaScript. How to Import and Export Modules in JavaScript. How to Use Arrow Functions in JavaScript. How Destructuring Works in JavaScript. How the Spread Operator and Rest Parameter Work in JavaScript. How to Use Classes in JavaScript