DEV Community: Devansu Yadav

What the heck is a 'thunk' and what's 'Currying' ?!

Devansu Yadav — Wed, 29 Jun 2022 16:31:07 +0000

I'm quite sure the first term you'd heard of terms like Thunks or Currying in programming, your reaction would have been something similar to this,

Well, don't worry, I felt the same when I heard about these terms the first time especially from the programming aspect until I realized how useful they are!

Before we start, this blog post assumes that you have a basic knowledge of JavaScript and asynchronous programming using Promises and callbacks. Some knowledge about functional programming in JS would also be quite helpful to understand both these concepts better. Thunks along with Currying are quite useful concepts when it comes to Functional programming in JavaScript.

Let's dive deeper into these concepts and understand what they are, and how we can use them!

All about `thunks` in JavaScript

We have been using callbacks in JavaScript almost everywhere for various use cases like asynchronous programming , listening to events , handling errors , and much more. Thunks basically extend the capabilities of callbacks and are quite useful when it comes to async programming in JavaScript, though they are still quite useful in certain scenarios involving synchronous programming.

What is a `thunk`?

A thunk is just a function that delays the computation of a value or some logic.

The word "thunk" is a programming term that means "a piece of code that does some delayed work"

Rather than executing some logic now, we can write a function body or code that can be used to perform the work later. Many of you working with React probably know an awesome and plain simple library called redux-thunk which as the name suggests is based on thunks, and is useful while doing state management using Redux.

There are two perspectives in which you can use thunks: synchronous , and asynchronous.

Synchronous way of using `thunks`

Let's talk about how you can use a synchronous thunk ,

const power = (base, exponent) => {
  return Math.pow(base, exponent);
};

// `power` function is evaluated
// and the result is returned immediately
console.log(power(99, 9)); // 913517247483640800

// This is a thunk
const powerThunk = () => {
  return power(99, 9);
};

// Returns the same result as calling the `power` function
console.log(powerThunk()); // 913517247483640800

In the above code snippet, power is a simple function that calculates the power of a no and returns the calculated value immediately. powerThunk is a synchronous thunk that delays this result until we call it. As you might have noticed, powerThunk uses the power function internally to calculate and return the calculated value.

The important part is that this thunk has become a wrapper around some particular state. In this case, it is a result of a potentially expensive operation. This pattern allows us to hide the internal details of the computation similar to the principle of Encapsulation of the Object Oriented Programming paradigm.

Now let's talk about how you can use thunks from the async programming perspective.

Async `thunks`

So how can we describe an async thunk? It's just a simple function that doesn't need any additional parameters except for a callback function. In the case of async thunks, we can introduce a delay to process a synchronous function like the power function from the previous example or use it to handle asynchronous API calls.

Let's have a look at both cases. We can modify the previous example for synchronous thunk to understand this better.

const powerAsync = (base, exponent, callback) => {
  return setTimeout(() => callback(Math.pow(base, exponent)), 1000);
};

// This is an async thunk
const powerAsyncThunk = (callback) => {
  return function () {
    powerAsync(99, 9, callback);
  };
};

// This async thunk now returns a function that 
// can be called later on to calculate power.
const calculatePower = powerAsyncThunk((result) => console.log(result));
calculatePower();

In the above code snippet, we modified the power function to powerAsync function that fakes an asynchronous function using setTimeout and takes an additional parameter callback. Now, our async thunk powerAsyncThunk delays the execution of powerAsync function by returning a function. This makes it really useful as we can now just call this function returned by powerAsyncThunk whenever we want in our code later on.

Now, let's talk about how we can deal with asynchronous API calls using async thunks.

const fetchCurrenciesData = (callback) => {
  fetch("https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies.json")
  .then(res => res.json())
  .then(res => callback(res));
}

// This is an async thunk
const asyncThunk = (callback) => {
  return function () {
    fetchCurrenciesData(callback);
  }
}

// This async thunk now returns a function that 
// can be called later on to fetch data from the API.
const fetchCurrencies = asyncThunk((res) => console.log(res));
fetchCurrencies();

The fetchCurrenciesData function makes an API call to fetch all the currencies of different countries and also takes a callback function as a parameter. The async thunk asyncThunk returns a function that can be called later on to fetch the data from the API whenever we want in our code.

The data after calling fetchCurrencies function looks something like this,

{
aave: "Aave"
ada: "Cardano"
aed: "United Arab Emirates Dirham"
afn: "Afghan afghani"
algo: "Algorand"
doge: "Dogecoin"
dop: "Dominican peso"
dot: "Dotcoin"
dzd: "Algerian dinar"
egld: "Elrond"
egp: "Egyptian pound"
enj: "Enjin Coin"
eos: "EOS"
ern: "Eritrean nakfa"
etb: "Ethiopian birr"
ils: "Israeli New Shekel"
imp: "CoinIMP"
inj: "Injective"
inr: "Indian rupee"
iqd: "Iraqi dinar"
irr: "Iranian rial"
isk: "Icelandic krna"
jep: "Jersey Pound"
jmd: "Jamaican dollar"
jod: "Jordanian dinar"
jpy: "Japanese yen"
kava: "Kava"
kcs: "Kucoin"
kda: "Kadena"
kes: "Kenyan shilling"
...
}

Where exactly are `thunks` used? 💡

Now that you have learned quite a lot about thunks, you might be wondering where exactly are thunks used.

Promises in JavaScript are based on the concept of thunks and under the hood it uses thunks. Have a look at this video which talks about how thunks can be used to sequence async function calls.
The redux-thunk middleware widely uses thunks internally. This enables us to use thunks with async logic inside, that can interact with a Redux store's dispatch and getState methods for React apps using Redux for state management.

All about Currying in JavaScript

Let's look at another quite useful concept within functional programming in JavaScript.

Currying is an advanced technique for working with functions. Its used not only in JavaScript but in other languages as well!

What is currying?

Currying is a transformation of functions that converts a function from callable as f(a, b, c) into callable as f(a)(b)(c).

We are transforming the function by breaking it down in such a way that it can be called in a step-by-step manner instead of calling it with all the arguments immediately. This technique is very useful, particularly when you don't have access to all the required parameters at an instant to be able to execute the logic inside your function.

Let's look at an example to understand this better. Suppose, we create a simple function multiplyTwoNos that multiplies two nos and returns the calculated value.

const multiplyTwoNos = (no1, no2) => {
  return no1 * no2;
};

console.log(multiplyTwoNos(3, 5)); // 15

// A curried function to multiple two nos
const curriedMultiplyTwoNos = function (no1) {
  return function (no2) {
    return no1 * no2;
  };
};

console.log(curriedMultiplyTwoNos(3)(5)); // 15

In the above code snippet, curriedMultiplyTwoNos is a function that uses currying to transform multiplyTwoNos(3, 5) function call to a function call something like this - curriedMultiplyTwoNos(3)(5). The output is basically the same, but currying gives us more flexibility to calculate the multiplication of two numbers whenever we have access to both the numbers.

Advanced Currying Implementation

Now, let's have a look at a bit more advanced implementation of currying for multi-argument functions. We'll first create a generic currying function and then use the above example of multiplying some numbers and getting the calculated value.

// A function that takes a callback function `func` 
// that defines the kind of operation/calculation that will be curried

const curry = function (func) {
  return function curried (...args) {
    // Ensure that we apply the operation defined by `func` 
    // with the max number of arguments supported by `func`.

    if(args.length >= func.length) {
      return func.apply(this, args);
    } else {
      // If number of parameters are insufficient to call `func` to 
      // perform the operation, recursively call `curried` with previously passed
      // parameters as well as new parameters. 
      return function (...args2) {
        return curried.apply(this, args.concat(args2));
      }
    }
  }
}

There are a lot of things happening in the above code! 😅

But, don't get overwhelmed by seeing the above code, it's actually quite straightforward! Let's see how it works with an example and then we'll understand it properly.

const multiplyThreeNos = (no1, no2, no3) => {
  return no1 * no2 * no3;
};

let curriedMultiplication = curry(multiplyThreeNos);

console.log(curriedMultiplication(4, 5, 6)); // 120, still callable normally
console.log(curriedMultiplication(4)(5, 6)); // 120, currying of 1st arg
console.log(curriedMultiplication(4)(5)(6)); // 120, full currying

The result of curry(func) call is the wrapper curried that looks like this:

function curried(...args) {
    // Ensure that we apply the operation defined by `func`
    // with the max number of arguments supported by `func`.

    if (args.length >= func.length) {
      return func.apply(this, args);
    } else {
      // If number of parameters are insufficient to call `func` to
      // perform the operation, recursively call `curried` with previously passed
      // parameters as well as new parameters.
      return function (...args2) {
        return curried.apply(this, args.concat(args2));
      };
    }
  };

In the above code, we are using some of the concepts like rest parameters, Recursions , and .apply().

There are basically two branches of code out of which one of them could get executed within the curried function because of the if statement.

If the number of arguments passed to curried is greater than or equal to the no of arguments defined for func, then just pass the call to func.apply(this, args); which will execute ignore the extra arguments passed if any.
Else if the no of arguments passed to curried is less, then we recursively call curried with previously passed arguments as well as the new arguments by using the .concat() method until the number of arguments for curried is not sufficient as per the definition of func.

Note : Currying requires the function to have a fixed number of arguments. A function that uses rest parameters, such as f(...args), cant be curried this way as implemented above.

When and Why to use Currying? 💡

Currying can be useful for:

Currying can be used when you want to create a function that will receive only single arguments or will receive arguments later on in your code.
It can be used to trigger event listeners.

Let's look at some of the reasons why you may need to use Currying:

Currying provides a way to make sure that your function receives all the arguments before you proceed with executing the core logic of your function.
It divides your function into multiple smaller functions that can handle one responsibility. This makes your function pure and less prone to errors and side effects.
It is used in the functional programming paradigm to create higher-order functions.

Conclusion

In this blog, we learned about Thunks & Currying , some of the most useful yet a bit advanced concepts of functional programming in JavaScript. We talked about thunks in detail like what are thunks , how can you use them, when to use them, and where are they used. Similarly, we learned about Currying , how to implement currying , advanced implementation of currying , and when to use it.

That's it from me folks, thank you so much for reading this blog! 🙌 I hope this blog was helpful and gave you an insight about Thunks & Currying and how you could use these very useful concepts of the functional programming paradigm in your JavaScript apps 😄

Before we end,

Feel free to reach out to me:
Twitter
Linkedin
GitHub

Make your React Apps more performant using Debouncing & Throttling! 🔥🚀

Devansu Yadav — Tue, 28 Jun 2022 12:14:58 +0000

Well, hello there! 👋 I see you have come here to learn more about how to make your React apps performant and optimize them using Debouncing and Throttling, which is great because that means you really do care about your app's performance. Kudos for that! 👏

Do note that this blog assumes that you have a basic understanding of how React works and that you are familiar with React Hooks.

Before we jump in, let's understand why would you want to optimize your React app's performance?

Suppose you have a very simple React app with an input bar to search cities like the below,

As you can see, this app is super laggy and the UX of this app is 💩. We are just making a very simple search that filters cities from a list of cities based on user input.

PS:- You can give it a try if you want (Please do it at your own risk, you don't wanna hang your computer!) - https://codesandbox.io/s/debouncing-example-demo-0dyb16?file=/src/App.jsx

Now, you might ask why's this React app so laggy?

If you would have noticed carefully from the above demo of the app, we are filtering the cities from the list of cities that we have on every keystroke made by the user (notice the keystrokes on the Virtual keyboard in the demo).

See now, that's not a performant app at all and needs to be optimized to provide a better user experience.

Let's have a look at two ways to optimize such apps and make them better!

What is Debouncing & Throttling?

There are many scenarios that make your app less performant like making API calls on each user keystroke on an input search bar, performing compute-heavy operations on button clicks, window resizing, or frequent scrolls on a scrollbar.

Basically, any scenario in which you are making expensive (in terms of computing or execution time) function calls on events or user actions that can hamper the performance of your apps.

Now, let's understand Debouncing & Throttling.

Debouncing : In debouncing, we try to reduce the number of expensive function calls by calling them only if the time difference between two consecutive event triggers (user actions) is greater than or equal to a specified delay. This delay can be adjusted depending on the use case or the kind of user experience you are trying to design for your app.

Throttling : In throttling, we try to rate-limit the number of expensive function calls by calling them every time only after a certain time limit has passed from the last function call. Again, this time limit can be adjusted depending on your use case.

Debouncing & Throttling can be very useful to handle rate-limit errors caused by rate-limiting on certain APIs that your apps might be consuming, as we are trying to reduce the number of such expensive function calls using these optimizations.

Now that you have some idea about Debouncing & Throttling, let's dive deeper into each concept using a simple example that illustrates some of their common use cases.

Optimizing apps using Debouncing

Let's go back to the very first example that we saw, where we had a simple search bar that filters the cities from a list of cities based on the user input.

We can use debouncing in this case to reduce the number of function calls to filter the cities from the list.

But first, let's look at the initial code from the demo.

Initial Code -

import "./styles.css";
import React, { useState } from "react";
import cities from "cities-list";
import { v4 as uuidv4 } from "uuid";

// An array of city names
const citiesArray = Object.keys(cities);

export default function App() {
  const [cityInput, setCityInput] = useState("");
  const [filteredCities, setFilteredCities] = useState([]);

  // Function that filters cities from the list based on user input
  const cityFilter = (query) => {
    console.log(query);
    if (!query) return setFilteredCities([]);

    setFilteredCities(
      citiesArray.filter((city) =>
        city.toLowerCase().includes(query.toLowerCase())
      )
    );
  };

  return (
    <div className="App">
      <h1 className="app-header">Find cities</h1>
      <div className="city-input">
        <input
          type="text"
          value={cityInput}
          onChange={(e) => {
            setCityInput(e.target.value);
            cityFilter(e.target.value);
          }}
        />
      </div>
      <div>
        {filteredCities.map((city) => {
          return <div key={uuidv4()}>{city}</div>;
        })}
      </div>
    </div>
  );
}

The above code snippet represents a simple React component with an input search bar , and a container that displays the filtered cities.

// Function that filters cities from the list based on user input
  const cityFilter = (query) => {
    console.log(query);
    if (!query) return setFilteredCities([]);

    setFilteredCities(
      citiesArray.filter((city) =>
        city.toLowerCase().includes(query.toLowerCase())
      )
    );
  };

The function cityFilter takes a user search query as an input parameter and filters the cities from a list of cities (fetched from an npm package called cities-list). Currently, this function runs on every single keystroke made by the user on the search bar.

Now, let's write a debounced version of the above cityFilter function to make it more optimal. We will be using setTimeout in JavaScript to achieve this.

// `timer` to help while clearing setTimeout 
// inside `debouncedCityFilter` function
let timer;

// Debounced version of the `cityFilter` func to filter cities 
// based on user search query
  const debouncedCityFilter = (query) => {
    clearTimeout(timer);
    if (!query) return setFilteredCities([]);

    timer = setTimeout(() => {
      console.log(query);

      setFilteredCities(
        citiesArray.filter((city) =>
          city.toLowerCase().includes(query.toLowerCase())
        )
      );
    }, 500);
  };

According to the concept of debouncing, we make function calls only if the time difference between two consecutive event triggers (user actions) is greater than or equal to a specified delay.

In the above code snippet, we set the state to get the filtered cities using setFilteredCities() which is called inside a setTimeout with a delay of 500ms(this delay can be adjusted according to the use case). So whenever a user keystroke is recorded on the input search bar, the debouncedCityFilter function is called which triggers setTimeout and sets the state using setFilteredCities() after 500ms.

However, if another keystroke made by the user is recorded just within this time delay of 500ms, the previous setTimeout needs to be cleared to avoid filtering the cities and set the state. For this, we use clearTimeout that takes the id returned by the setTimeout function.

Now, this id needs to be preserved so that it is available whenever we need to use clearTimeout to clear the timer. We use a quite popular concept called Closures in JavaScript to be able to access this id inside the debouncedCityFilter function. Hence, if you'd have noticed we have defined a timer variable outside the debouncedCityFilter function for use inside this function.

By simply debouncing the cityFilter function, we are able to reduce the number of function calls and hence able to improve the performance significantly of our React app.

Let's have a look at what our React component code looks like after making these changes.

Final Code -

import "./styles.css";
import React, { useState } from "react";
import cities from "cities-list";
import { v4 as uuidv4 } from "uuid";

// An array of city names
const citiesArray = Object.keys(cities);

// `timer` to help while clearing setTimeout 
// inside `debouncedCityFilter` function
let timer;

export default function App() {
  const [cityInput, setCityInput] = useState("");
  const [filteredCities, setFilteredCities] = useState([]);

  // Function that filters cities from the list based on user input
  const cityFilter = (query) => {
    console.log(query);
    if (!query) return setFilteredCities([]);

    setFilteredCities(
      citiesArray.filter((city) =>
        city.toLowerCase().includes(query.toLowerCase())
      )
    );
  };

  // Debounced version of the `cityFilter` func to filter 
  // cities based on user search query
  const debouncedCityFilter = (query) => {
    clearTimeout(timer);
    if (!query) return setFilteredCities([]);

    timer = setTimeout(() => {
      console.log(query);

      setFilteredCities(
        citiesArray.filter((city) =>
          city.toLowerCase().includes(query.toLowerCase())
        )
      );
    }, 500);
  };

  return (
    <div className="App">
      <h1 className="app-header">Find cities</h1>
      <div className="city-input">
        <input
          type="text"
          value={cityInput}
          onChange={(e) => {
            setCityInput(e.target.value);
            debouncedCityFilter(e.target.value);
          }}
        />
      </div>
      <div>
        {filteredCities.map((city) => {
          return <div key={uuidv4()}>{city}</div>;
        })}
      </div>
    </div>
  );
}

Now, have a look at how debouncing has improved the performance of this component significantly! 🚀

If you want to handle more edge cases for debouncing such functions, then you can check out Lodash which has a debounce method that covers most of the edge cases involved to make such functions more optimal.

Now, let's look at a simple example that uses Throttling to make it more performant.

Optimizing apps using Throttling

Let's suppose, you have a simple React component consisting of a button that on clicking calls an API to fetch some data related to all the currencies of different countries.

Initial Code -

import "./styles.css";
import React, { useState } from "react";
import axios from "axios";
import { v4 as uuid } from "uuid";

export default function App() {
  const [currencyData, setCurrencyData] = useState({});
  const [clickCounter, setClickCounter] = useState(0);

  const getCurrencyData = async () => {
    console.log("Fetching data ....");

    const { data } = await axios.get(
      "https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies.json"
    );

    // Fetching only 15 currencies for now
    const countryCurrencies = {};
    const currencyObjKeys = Object.keys(data).slice(0, 15);

    currencyObjKeys.forEach((key) => {
      countryCurrencies[key] = data[key];
    });

    setCurrencyData({ ...countryCurrencies });
  };

  return (
    <div className="App">
      <h1>Currencies of different Countries</h1>
      <button
        className="currency-btn"
        onClick={() => {
          setClickCounter((clickCount) => clickCount + 1);
          getCurrencyData();
        }}
      >
        Click to get all currencies
      </button>
      <span>Btn clicked - {clickCounter} times</span>
      <div className="currencies">
        {Object.keys(currencyData).map((currency) => {
          return (
            <div key={uuid()}>
              {currency}: {currencyData[currency]}
            </div>
          );
        })}
      </div>
    </div>
  );
}

The code snippet above is our simple component with two states - currencyData & clickCounter. On button click, we update the clickCounter state to reflect the total number of button clicks made so far and also call the getCurrencyData() function to make an API call to fetch the currency data.

Let's look at what this component looks like!

As you might have noticed above, each button click triggers an API call. Now, imagine that your app was used by hundreds or thousands of users, the number of API calls would be humongous! Your Back-End servers could face a huge pool of requests coming from each user due to so many clicks. Also, if you are consuming any external paid API or service, then the endpoints might start throwing errors because of rate-limiting on the API endpoints.

Even if say you were not making any API calls on such button clicks but rather performing some compute-heavy operation, it would hamper your app's performance severely!

Now, that's a bit of a problem 😅

Let's try and solve this problem using Throttling!

We will throttle the getCurrencyData function that makes an API call on each button click.

Currently, the code for getCurrencyData looks like this,

const getCurrencyData = async () => {
    console.log("Fetching data ....");

    const { data } = await axios.get(
      "https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies.json"
    );

    // Fetching only 15 currencies for now
    const countryCurrencies = {};
    const currencyObjKeys = Object.keys(data).slice(0, 15);

    currencyObjKeys.forEach((key) => {
      countryCurrencies[key] = data[key];
    });

    setCurrencyData({ ...countryCurrencies });
  };

Now, we will write a function throttledGetCurrencyData that will throttle and use the getCurrencyData function to reduce the number of calls made to it.

// A flag to control the function calls to the `getCurrencyData` function
let shouldFuncBeCalled = true;

const throttledGetCurrencyData = async () => {
    if (shouldFuncBeCalled) {
      await getCurrencyData();
      shouldFuncBeCalled = false;

      setTimeout(() => {
        shouldFuncBeCalled = true;
      }, 500);
    }
  };

The throttledGetCurrencyData function calls the getCurrencyData function only if the shouldFuncBeCalled flag is set to true. Once this function is called, we delay the next function call to the getCurrencyData function by using setTimeout with some specific delay (This delay limit can be adjusted as per your use case).

This way we only allow function calls to happen after a certain amount of time has passed from the last function call. This way we can avoid making the UI slow or crossing the rate limits defined for any API that your app might be consuming.

Let's look at how the app is working now.

As you can see from the console, the number of API calls has been reduced quite significantly even after clicking the button so many times!

Check out the CodeSandbox below to see what the code for our component looks like after using Throttling.

If you want to handle more edge cases for throttling such functions, then you can check out Lodash which has a throttle method that covers most of the edge cases involved to make such functions more optimal.

Debouncing vs Throttling, when to use what?

Now that we understand how Debouncing and Throttling work, let's understand some of the differences and when to use Debouncing or Throttling.

Throttling enforces that a function must be called every time after a certain amount of time (or delay) has passed from the last function call.

Whereas, Debouncing enforces that a function must only be called if a certain amount of time (or delay) has passed without it being called. If this time has not been passed the debounce timer keeps resetting and the function call is avoided.

When to use what?

Search bar : Use debouncing to avoid searching every time a user hits a keystroke. Throttling is not convenient here to use in this scenario, as you don't want to make your user wait too long for fetching the search results (in the worst case if the previous function call was made just when the user stops typing).
Shooting game : Use throttling on mouse click as shooting a pistol takes a few secs to register and it helps in avoiding the user to shoot until the previous shot has been registered. Debouncing will not shoot a bullet until a certain amount of time has passed when the pistol was not fired.

You can also check out this amazing Stackoverflow post to understand the differences between Debouncing & Throttling and when to use what.

Conclusion

Debouncing & Throttling are just a few ways you can make your React apps more performant & each technique has its own set of pros and cons depending on the use cases. In this blog, we first talked about Why should we care about our React app's performance , then we understood how we can use Debouncing & Throttling to optimize our app's performance, and finally saw a major difference between the two techniques and when we to use which technique.

That's it from me folks, thank you so much for reading this blog! 🙌 I hope this blog was helpful and gave you an insight on how you can make your React apps more performant. Now, go ahead and make your apps even more amazing! 🚀

Feel free to reach out to me:
Twitter
Linkedin
GitHub
You can also reach out to me over mail: devansuyadav@gmail.com

Everything you need to know about Generators in JavaScript 🚀

Devansu Yadav — Sat, 25 Jun 2022 17:11:19 +0000

If you have been working with JavaScript quite a lot, you might have come across some syntax like this:

function* makeIterator() {
    yield 1;
    yield 2;
}

Now, you might be wondering what is this code exactly doing? Well, honestly speaking, I felt the same when I came across such syntax for the first time! 😅

This weird yet quite useful piece of code is what we call Generators in JavaScript.

Let's try and understand what are Generators, how to use them, and when to use them in your JavaScript code.

Demystifying Iterators & Generators

Now, before we try to understand generators, let's first understand the concept of Iterables and Iterators so that we can understand generators better.

Iterables : Iterables are basically data structures that have the Symbol.iterator() method or the Symbol.iterator key. Some of the most commonly used data structures in JavaScript like Array, String, Set, and Map are examples of Iterables.

The Symbol.iterator() method defines how these iterables can be iterated by using iterators and the for...of loop.

Iterators : An iterator is an object that is returned by the Symbol.iterator() method. This object has a next() method that returns an object with two properties:

value: The value of the next element in the iteration sequence or the iterable.

done: This is a boolean value. It is set to true if the last element in the iteration sequence is already iterated else it is set to false.

Let's see a simple example of how we can iterate through all the elements in the Array using a for...of loop and an Array Iterator.

const number = [1, 2, 3];
const arrayIterator = number[Symbol.iterator]();

console.log(arrayIterator);

// Iterating through the iterator to access array elements
for (let n of arrayIterator) {
    console.log(n);
}

Output :

Array Iterator {}
1
2
3

So, what are generators?

A generator is a process that can be paused and resumed and can yield multiple values. A generator in JavaScript consists of a Generator function, which returns an iterable Generator object and this object is basically a special type of Iterator.

Now, what are generator functions?

Let's have a look at a simple example of a generator function to understand it better.

// Generator function declaration
function* generatorFunction() {}

As you can see above, a Generator function can be defined by using the function keyword followed by an asterisk (*). Occasionally, you will also see the asterisk next to the function name, as opposed to the function keyword, such as function *generatorFunction(). This works the same, but function* is generally a more widely accepted syntax.

Generator functions can also be defined in regular function expressions:

// Generator function expression
const generatorFunction = function*() {}

Why do we need to use Generators?

We can define our own custom iterators for our specific use cases, so why should we even care about generators at all?

There's an added complexity with custom iterators that you have to carefully program them and also explicitly maintain their internal state to know which elements have been iterated and when to stop the function execution.

Generators provide a powerful alternative to custom iterators that allows you to define your own iteration algorithms using generator functions that do not execute code continuously.

Let's look at how you can use these Generator functions & Generators for your specific use cases.

Working with Generator functions & Generators

A generator function, when invoked, returns an iterable Generator object which is basically nothing but a generator. A generator function differs from a traditional function JavaScript in that generator functions do not return a value immediately instead they return a Generator object which is an iterator as we saw above.

Let's have a look at an example to make this difference between generator functions and traditional functions clear.

In the following code, we create a simple power() function that calculates the power of a given number by using two integer parameters ( base no and the exponent no ) and returns this calculated value.

// A regular function that calculates power of a no
function power(base, exponent) {
  return Math.pow(base, exponent);
}

Now, calling this function returns the power of the given no,

power(2, 3); // 8

Now, let's create the same function above but as a generator function,

// A generator function that calculates power of a no
function* powerGeneratorFunction(base, exponent) {
  return Math.pow(base, exponent);
}

const powerGenerator = power(2, 3);

Now, when we invoke the generator function, it will return the Generator object which looks something like this,

power {<suspended>}
[[GeneratorLocation]]: VM305:2
[[Prototype]]: Generator
[[GeneratorState]]: "suspended"
[[GeneratorFunction]]: * power(base, exponent)
[[GeneratorReceiver]]: Window
[[Scopes]]: Scopes[3]

This Generator object has a next() method similar to Iterators. Let's call this method and see what we get,

// Call the next method on the Generator object
powerGenerator.next();

This will give the following output:

{ value: 8, done: true }

As we saw earlier, a Generator object is nothing but an Iterator, hence the next() method returns something similar to Iterators i.e an object containing two properties, value & done. The power of 2 raised to 3 is 8 which is reflected by value. The value of done is set to true because this value came from a return that closed out this generator.

We saw how to create a simple generator function and how these functions work. Now let's have a look at some of the features of these generators that make them quite useful and unique.

The `yield` operator

Generators introduce a new keyword to JavaScript: yield. The yield operator can pause a generator function and return the value that follows yield, providing a lightweight way to iterate through values.

Let's have a look at an example to understand this better.

function* simpleGeneratorFunction () {
  console.log("Before 1");
  yield 1;
  console.log("After 1");
  console.log("Before 2");
  yield 2;
  console.log("After 2");
  console.log("Before 3");
  yield 3;
  console.log("After 3");
}

const simpleGenerator = simpleGeneratorFunction();

In the above code snippet, we have defined a simple generator function that contains 3 yield statements. Now, let's call the next() method to see how this yield operator works.

// Call the next() method four times
console.log(simpleGenerator.next());
console.log(simpleGenerator.next());
console.log(simpleGenerator.next());
console.log(simpleGenerator.next());

Now, when we call next() on the generator function, it will pause every time it encounters yield. The done property will be set to false after each yield, indicating that the generator has not finished. Once we encounter a return statement or if there are no more yield statements left, then the done property will be set to true.

Let's look at the output after calling the next() method four times.

Before 1
{value: 1, done: false}
After 1
Before 2
{value: 2, done: false}
After 2
Before 3
{value: 3, done: false}
After 3
{value: undefined, done: true}

Iterating Over a Generator

Using the next() method, we manually iterated through the Generator object, receiving all the value and done properties of the full object. We can iterate over a generator similar to how we can iterate over data structures like Array, Map, or Set using a simple for...of loop.

Let's have a look at the above example and see how we can iterate over generators.

// Creating a new Generator object.
const newGenerator = simpleGeneratorFunction();

// Iterating over the Generator object
for (const value of newGenerator) {
  console.log(value);
}

Note : In the above code snippet, we initialized a new Generator object as we had already manually iterated the older Generator object & hence it can't be iterated again.

This code snippet now returns the following output,

Before 1
1
After 1
Before 2
2
After 2
Before 3
3
After 3

As you can see, we iterated through all the values of the Generator object. Now, let's look at some of the use-cases of Generators and Generator functions.

Passing values in Generators

Generators provide a way to pass custom values through the next() method of the Generator object to modify the internal state of the generator.

Note : A value passed to next() will be received by the yield operator.

Let's take an example to understand this better.

// Take three integers and return their sum
function* sumGeneratorFunction() {
  let sumOfThreeNos = 0;
  console.log(sumOfThreeNos);
  sumOfThreeNos += yield;
  console.log(sumOfThreeNos);
  sumOfThreeNos += yield;
  console.log(sumOfThreeNos);
  sumOfThreeNos += yield;
  console.log(sumOfThreeNos);

  return sumOfThreeNos;
}

const generator = sumGeneratorFunction();

generator.next();
generator.next(100);
generator.next(200);
generator.next(300);

This will give the following output:

0
100
300
600
{value: 600, done: true}

In the above example, we are calculating the cumulative sum of three nos by passing them one by one by passing the value in the next() method.

Note : Passing a value to the first next() method has no effect on the internal state of the generator. Values can be passed from the 2nd call to all the other subsequent calls to this method.

Uses of Generators and Generator functions

Generators and Generator functions are quite powerful and have some really good use-cases.

Generators provide a great way of making iterators and are capable of dealing with infinite data streams, which can be used to implement infinite scroll on the Front-End of a web application.
Generators when used with Promise can be used to simulate async/await functionality in JS to allow handling more advanced use-cases while dealing with APIs or asynchronous code. It allows us to work with asynchronous code in a simpler and more readable manner.
Generators are also internally used in some of the NPM libraries to provide a custom way for the developer to iterate through some of the objects/data structures implemented by the library. They are also used for internal asynchronous operations to handle more advanced use cases.

Let's discuss one of the major use-cases of Generators that you will most likely come across i.e dealing with infinite iterations.

To demonstrate infinite streams, we consider a simple square number series in Mathematics where each term in the series can be calculated by a simple formula: n^2. Let's create a generator function for this series by creating an infinite loop as follows:

// Create a square number series generator function
function* squareNumberSeries() {
  let n = 1;

  // Square the no and increment it to yield the infinite series
  while (true) {
    const squaredNo = Math.pow(n, 2);
    yield squaredNo;
    n += 1;
  }
}

To test this out, we can loop through a finite number and print the Square number sequence to the console.

// Print the first 10 values of the square number series
const squareNoGenerator = squareNumberSeries();

for (let i = 0; i < 10; i++) {
  console.log(squareNoGenerator.next().value);
}

This will generate the following series:

The squareNumberSeries generator function in the above code snippet returns successive values in the infinite loop while the done property remains false, ensuring that it will not finish. With generators, we dont need to worry about creating an infinite loop, because we can halt and resume its execution at will.

However, we still have to take care with how we invoke the generator.

Using the spread operator or for...of loop on an infinite data stream will cause it to keep iterating over an infinite loop all at once, which will cause the environment to crash.

Working with infinite data streams is one of the most powerful features that generators provide without worrying about managing all the internal states for a custom iterator implementation.

Conclusion

They are a powerful, versatile feature of JavaScript, although they are not commonly used. In this article, we got a brief overview of what are iterators and generators, what are generator functions, why we need to use generators, and finally how to work with generators and generator functions. We also discussed a very powerful use case of generators for dealing with infinite data streams.

That's it from me folks, thank you so much for reading this blog! 🙌 I hope I was able to make generators interesting for you and was able to give a brief overview of them through this blog 😄

Last but not the least,

Feel free to reach out to me:
Twitter
Linkedin
GitHub
You can also reach out to me over mail: devansuyadav@gmail.com

DEV Community: Devansu Yadav

What the heck is a 'thunk' and what's 'Currying' ?!

All about thunks in JavaScript

What is a thunk?

Synchronous way of using thunks

Async thunks

Where exactly are thunks used? 💡

All about Currying in JavaScript

What is currying?

Advanced Currying Implementation

When and Why to use Currying? 💡

Conclusion

Make your React Apps more performant using Debouncing & Throttling! 🔥🚀

Now, you might ask why's this React app so laggy?

What is Debouncing & Throttling?

Optimizing apps using Debouncing

Optimizing apps using Throttling

Debouncing vs Throttling, when to use what?

When to use what?

Conclusion

Everything you need to know about Generators in JavaScript 🚀

Demystifying Iterators & Generators

So, what are generators?

Now, what are generator functions?

Why do we need to use Generators?

Working with Generator functions & Generators

The yield operator

Iterating Over a Generator

Passing values in Generators

Uses of Generators and Generator functions

Conclusion

All about `thunks` in JavaScript

What is a `thunk`?

Synchronous way of using `thunks`

Async `thunks`

Where exactly are `thunks` used? 💡

The `yield` operator