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 Stefan JudisJune 9, 2014
Creating Scrolling Parallax Effects with CSS
Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...
By David WalshSeptember 27, 2012
5 HTML5 APIs You Didn’t Know Existed
When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It." Can you blame us though? We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

By David WalshJuly 28, 2013
Create a CSS Cube
CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you've got something really neat. Unfortunately each CSS cube tutorial I've read is a bit...
By David WalshSeptember 16, 2014
CSS Custom Cursors
Remember the Web 1.0 days where you had to customize your site in every way possible? You abused the scrollbars in Internet Explorer, of course, but the most popular external service I can remember was CometCursor. CometCursor let you create and use loads of custom cursors for...

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

Creating Scrolling Parallax Effects with CSS

5 HTML5 APIs You Didn’t Know Existed

Incredible Demos

Create a CSS Cube

CSS Custom Cursors

Discussion