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 David WalshApril 15, 2015
fetch API
One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for. We've done well to create elegant APIs around XHR but we know we can do better. Our effort to...
By David WalshDecember 6, 2012
Vibration API
Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user. One of those simple APIs the Vibration API. The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Incredible Demos

By David WalshJanuary 30, 2012
Image Data URIs with PHP
If you troll page markup like me, you've no doubt seen the use of data URI's within image src attributes. Instead of providing a traditional address to the image, the image file data is base64-encoded and stuffed within the src attribute. Doing so saves...
By David WalshJuly 15, 2013
9 Mind-Blowing WebGL Demos
As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us. Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos. Another technology available...

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

fetch API

Vibration API

Incredible Demos

Image Data URIs with PHP

9 Mind-Blowing WebGL Demos

Discussion