Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Fill an Array with Sequential Values

By David Walsh on August 8, 2017

I've been contributing to Mozilla's awesome DevTools debugger because, well, I want to give back to the Firefox Engineers and all the developers who have stayed loyal to Firefox. Having my hand in loads of Mozilla projects is really satisfying, especially for my ego.

In any event, one task required me to fill an array with every number in a sequence, then I would filter out unwanted items based on another array. Here's how you can fill a range within an array:

const fillRange = (start, end) => {
  return Array(end - start + 1).fill().map((item, index) => start + index);
};

const allLines = fillRange(0, numLines - 1);

// [0, 1, 2, 3, 4, 5, ...]

From there I could filter out what I didn't want:

let executableLines = [/* series of line numbers with code */];
const emptyLines = allLines.filter(i => !executableLines.includes(i));

When the feature gets merged (...and no one complains about their Firefox debugger...) I'll share more about my contribution!

Recent Features

By Julian ShapiroApril 28, 2014
CSS vs. JS Animation: Which is Faster?
How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...
By David WalshAugust 29, 2011
Create Namespaced Classes with MooTools
MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does. Many developers create their classes as globals which is generally frowned up. I mostly disagree with that stance, but each to their own. In any event...

Incredible Demos

By David WalshApril 21, 2008
Six Degrees of Kevin Bacon Using MooTools 1.2
As you can probably tell, I try to mix some fun in with my MooTools madness but I also try to make my examples as practical as possible. Well...this may not be one of those times. I love movies and useless movie trivia so naturally I'm...
By David WalshMay 11, 2010
Animated AJAX Record Deletion Using Dojo
I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with Dojo JavaScript. The PHP - Content & Header The following snippet goes at the...

Discussion

Tracy-Gregory Gilmore
Would the instruction
```
const allLines = fillRange(0, numLines - 1);
```
not result in an array starting with zero as the first value?

David Walsh
Yes, you’re right! I’ve updated the post!

Jorge Ortega

Nice! Thanks to this post I could do this:

// Array of 24 hours string values ['00'...'23']
const hours = Array(24).fill().map((item, index) => index < 10 ? 0${index} : ${index})

// Array of 60 minutes string values ['00'...'59']
const minutes = Array(60).fill().map((item, index) => index < 10 ? 0${index} : ${index})

Luca Borrione

Great post! Little contribution:

const fillRange = (start, end) => {
	return [...Array(end - start + 1)].map((item, index) => start + index);
}

Tracy-Gregory Gilmore
Using an arrow function with a single expression does not require a return statement or statement block. Thus, the line of code above could be reduced to.
```
const fillRange = (start, end) => 
   [...Array(end - start + 1)].map((item, index) => start + index);
```

Nicolás Casanova
This is great, but, one question. If I want to have a list with decimals numbers, how can I do it?
example: 0.1 to 5.0. (resp: 0.1, 0.2, 0.3 … 4.8, 4.9, 5)
How can I do this?
Thanks! :D

MR T-G J GILMORE
You could always map() the output of fillRange.
```
const decimals = fillRange(0, 50).map(int => int / 10);
```

MR T-G J GILMORE

That should have been 1 to 51:

const decimals = fillRange(1, 51).map(int => int / 10);

Fill an Array with Sequential Values

Recent Features

CSS vs. JS Animation: Which is Faster?

Create Namespaced Classes with MooTools

Incredible Demos

Six Degrees of Kevin Bacon Using MooTools 1.2

Animated AJAX Record Deletion Using Dojo

Discussion