How to Use the Range Class to Generate Sequential Elements in JavaScript

The Range class in JavaScript is a handy utility that allows you to generate a sequence of elements in a concise way. With just a few lines of code, you can easily create an iterator that produces a range of numbers based on your specifications. In this blog post, we will explore how to use the Range class to generate sequential elements in JavaScript and demonstrate its usage with various examples.

Code

class Range {
  constructor(total = 0, step = 1, from = 0) {
    this[Symbol.iterator] = function* () {
      for (let i = 0; i < total; yield from + i++ * step) {}
    };
  }
}

[...new Range(5)]; // Five Elements
//=> [0, 1, 2, 3, 4]
[...new Range(5, 2)]; // Five Elements With Step 2
//=> [0, 2, 4, 6, 8]
[...new Range(5, -2, 10)]; // Five Elements With Step -2 From 10
//=>[10, 8, 6, 4, 2]
[...new Range(5, -2, -10)]; // Five Elements With Step -2 From -10
//=> [-10, -12, -14, -16, -18]

// Also works with for..of loop
for (i of new Range(5, -2, 10)) console.log(i);
// 10 8 6 4 2

Code Explanation

The given code snippet demonstrates the usage of the Range class to generate sequential elements. Let’s break down the code and understand its functionality.

The Range class is defined using the class keyword. It has a constructor that takes three optional parameters: total, step, and from.

1. total indicates the total number of elements to be generated in the range. By default, it is set to 0.

2. step represents the increment value between each element in the range. By default, it is set to 1.

3. from specifies the starting value of the range. By default, it is set to 0.

The class utilizes the Symbol.iterator property to define an iterator for the class. The iterator function, defined using a generator function (function*), generates the range of numbers based on the specified parameters.

Let’s explore some examples to understand the usage of the Range class:

Example 1: Generating a range of elements with a total of 5:

[...new Range(5)]; // Five Elements
// Output: [0, 1, 2, 3, 4]

In this example, we create a new instance of the Range class with a total of 5 elements. Using the spread operator ([...]), we convert the iterator into an array. The output is an array containing the sequential elements from 0 to 4.

Example 2: Generating a range of elements with a step of 2:

[...new Range(5, 2)]; // Five Elements With Step 2
// Output: [0, 2, 4, 6, 8]

In this example, we create a new instance of the Range class with a total of 5 elements and a step of 2. The output is an array containing the elements 0, 2, 4, 6, and 8. The step value determines the increment between each element.

Example 3: Generating a range of elements with a negative step and starting from a specific value:

[...new Range(5, -2, 10)]; // Five Elements With Step -2 From 10
// Output: [10, 8, 6, 4, 2]

In this example, we create a new instance of the Range class with a total of 5 elements, a step of -2, and a starting value of 10. The output is an array containing the elements 10, 8, 6, 4, and 2. The negative step value allows us to generate a range in descending order.

Example 4: Using the Range class in a for…of loop:

for (i of new Range(5, -2, 10)) console.log(i);
// Output: 10 8 6 4 2

In this example, we utilize the Range class in a for…of loop to iterate over the generated range. Each element is printed to the console. The output is 10, 8, 6, 4, and 2.

Conclusion

The Range class in JavaScript provides a concise and efficient way to generate sequential elements. By specifying the total number of elements, the step between each element, and the starting value, you can easily create a range of numbers that suits your requirements. Whether you need to generate an ascending or descending sequence, the Range class has got you covered. So, why not give it a try in your next JavaScript project?

Remember, utilizing the Range class can enhance the readability and efficiency of your code, making it easier to work with sequences of elements.

Also checkout the following codes.

Program to Generate a Range of Numbers with Step and Starting Value
How to Use the Range2 Class in JavaScript for Generating Number Ranges?