Popular:
 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  on  

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!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

  • By
    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...

Incredible Demos

  • By
    Prevent Page Zooming in Mobile Browsers

    Ever since I got my iPhone, I've been more agreeable in going places that my fiancee wants to go. It's not because I have any interest in checking out women's shoes, looking at flowers, or that type of stuff -- it's because my iPhone lets...

  • By
    Sexy Album Art with MooTools or jQuery

    The way that album information displays is usually insanely boring. Music is supposed to be fun and moving, right? Luckily MooTools and jQuery allow us to communicate that creativity on the web. The XHTML A few structure DIVs and the album information. The CSS The CSS...

Discussion

  1. 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!

  2. 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})
  3. 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);
  4. 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);

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!