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!

Recent Features

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • By
    Rotate Elements with CSS Transformations

    I've gone on a million rants about the lack of progress with CSS and how I'm happy that both JavaScript and browser-specific CSS have tried to push web design forward. One of those browser-specific CSS properties we love is CSS transformations. CSS transformations...

  • By
    Digg-Style Dynamic Share Widget Using MooTools

    I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...

Discussion

  1. Would the instruction

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

    not result in an array starting with zero as the first value?

    • 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!