# Using JavaScript Generators to Visualize Algorithms

Add to your RSS feedLearn how to use JavaScript generators to visualize algorithms step by step in a simple and efficient way.

# Table of Contents

- Introduction
- The first approach
- Understanding JS Generators
- Applying Generators to the Algorithm Visualizer

## Introduction

Thinking about projects to work on to learn a bit more and try something different, I came up with the idea of creating the typical sorting algorithm visualizer for algorithms like Bubble Sort, Quick Sort, Merge Sort, etc.

For this article, I’ll focus on Bubble Sort, although the same approach can be applied to any algorithm or piece of code that we want to visualize.

## The first approach

The idea was as follows: on one hand, we had the Bubble Sort algorithm:

And on the other hand, a function that will execute the algorithm and update the visualization as the algorithm runs. To achieve this, the first thing that came to mind was to add `this.refresh()`

to the point where the elements are swapped in the algorithms.

This way, every time an element is swapped, the visualization would be updated. An example might be the following:

If we run the code, we will get the following output:

In this example, the refresh has been implemented to log element swaps to the console, but in a real visualizer, you could update the visualization in any desired way.

The idea isn’t entirely bad, but it has several issues:

- For the visualization, it would be ideal for it to be asynchronous, meaning it should be able to pause at any moment and resume later, allowing you to see the state of the array at each iteration.
- If the algorithm runs and doesn’t find the
`this.refresh()`

function, it will throw an error.

Of course, we could solve this just by adding each time the array is swapped to a list and then executing the visualization at the end, but this wouldn’t be the most efficient way to do it and not the most elegant either. This is where **JavaScript generators come into play.**

## Understanding JS Generators

JavaScript generators are special functions that differ primarily from normal functions in that they execute step by step. That is, when a generator is called, it does not run to completion. Instead, it executes up to a certain point or `breakpoint`

, returns a value, and pauses execution with the option to resume later.

On one hand, we have the generator function `function*`

, where the asterisk * indicates that it is a generator function. On the other hand, we have the `yield`

keyword, which is used to return a value and pause the execution of the generator function.

An example of a Fibonacci sequence function without generators would be:

And the same function using generators would be:

An example of how to use the generator would be:

In this case, `gen`

is the generator created from the `fibonacci`

function. To obtain the values of the Fibonacci sequence up to `n`

, you use the `next()`

method of the generator, which will return an object with two properties: `value`

and `done`

.

First, `value`

will be the value returned by `yield`

, and `done`

will be a boolean indicating whether the generator has finished or not.

If we run it, we will get the following output:

## Applying Generators to the Algorithm Visualizer

Now that we know how generators work, let’s apply them to the algorithm visualizer. To do this, we will modify the Bubble Sort algorithm to be a generator and execute it step by step.

In this case, the `bubbleSort`

generator will return the current state of the array at each iteration. To get the current state of the array, `yield arr.slice()`

is used, which returns a copy of the array at that moment.

We will modify the controller to execute the generator step by step:

If we run the code, we will get the following output:

In this way, we could execute the algorithm step by step and visualize the state of the array at each iteration, with the ability to pause at any moment to view the current state. Here are two quick visualization examples created in just a few minutes using the same strategy of using generators:

For a more realistic and comprehensive example, you can check out the sorting algorithm visualizer I created at this link, with the GitHub repository available here.