Skip to main content
X

Explore your training options in 10 minutes

JavaScript Tutorials

Creating Ranges with JavaScript

Felipe Bohórquez - December 29, 2020


A lot of time when writing different functions, we might want to create ranges in order to work with some data. A range represents data in an array or object with a beginning and end value.

A lot of languages have built in methods to create ranges, for example to_a in Ruby:

('a'..'e').to_a => ["a", "b", "c", "d", "e"]

JavaScript doesn’t have a specific built-in method for this, but there are many ways we can build ranges. We’ll show you three.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

_.range() – Lodash

If we want to create a range of numbers and we want them as fast as possible we can use the Lodash _.range() util method.

This method returns an array and takes three arguments: The first for the start of the range, second for end of range (up to) and third for step , or value incremented/decremented by.

_.range(-2);
// => [0, -1]
 
_.range(1, 3);
// => [1, 2]
 
_.range(1, 10, 4);
// => [1, 5, 9]

Note how if only one argument is provided it will create a range up to the number specified. Also, remember Lodash is a JavaScript library that we need to install separately!

Creating our own range() function.

If we want to save some overhead, we can create our own number range function. It turns out that making our own range is pretty easy.

function range(start, end, step = 1){
  if(start === end) return [start];
  const range = [];
  for(let i = start; i <= end; i += step){
     range.push(i);
  }
  
  return range;
}

range(1, 10, 4)
//  => [1, 5, 9]
range(1, 10)
// => [ 1, 2, 3, 4,  5, 6, 7, 8, 9, 10]

This is easy to write and we can avoid importing libraries such as Lodash for just one function!

Creating a Non-number Range Function

Now you might be asking, what about non-number ranges, like characters? There are some options for us to implement that with JavaScript.

Here we will use the charCodeAt() method to get a number that we will then increase and then push to an array using the String.fromCharCode() , which returns a character from a character code.

function charRange(start, stop) {
  const range = [];
  const end = stop.charCodeAt(0)
  for (let i = start.charCodeAt(0); i <= end; i++){
    range.push(String.fromCharCode(i));
  }
  return range;
};

charRange('A','F')
// => [ 'A', 'B', 'C', 'D', 'E', 'F' ]

That was easier than you thought right?

Conclusion

Now you know how easy it can be to create ranges yourself with JavaScript. Please make sure you save these handy functions, we are sure they’ll be of use at some point!

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Felipe Bohórquez

About the author: Felipe Bohórquez is a Software Engineer and technical writer at Career Karma. He covers all things frontend and backend development.

Skip to main content