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 25, 2011
Facebook Open Graph META Tags
It's no secret that Facebook has become a major traffic driver for all types of websites. Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly. And of course there are Facebook "Like" and "Recommend" widgets on every website. One...
By David WalshMay 6, 2015
I’m an Impostor
This is the hardest thing I've ever had to write, much less admit to myself. I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life. All of those feelings were very...

Incredible Demos

By David WalshFebruary 23, 2010
Create a Simple News Scroller Using MooTools, Part I: The Basics
News scroller have been around forever on the internet. Why? Because they're usually classy and effective. Over the next few weeks, we'll be taking a simple scroller and making it into a flexible, portable class. We have to crawl before we...
By David WalshOctober 20, 2015
FileReader API
As broadband speed continues to get faster, the web continues to be more media-centric. Sometimes that can be good (Netflix, other streaming services), sometimes that can be bad (wanting to read a news article but it has an accompanying useless video with it). And every social service does...

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

Facebook Open Graph META Tags

I’m an Impostor

Incredible Demos

Create a Simple News Scroller Using MooTools, Part I: The Basics

FileReader API

Discussion