Black lives matter
Portrait Dr. Axel Rauschmayer
Dr. Axel Rauschmayer
Homepage | Twitter
Cover of book “JavaScript for impatient programmers”
Book, exercises, quizzes
(free to read online)
Cover of book “Deep JavaScript”
Book (50% free online)
Cover of book “Tackling TypeScript”
Book (first part free online)
Logo of newsletter “ news”
Newsletter (free)

JavaScript: sparse arrays vs. dense arrays

(Ad, please don’t block)

In general, arrays in JavaScript are sparse – they can have holes in them, because an array is simply a map from indices to values. This blog post explains how to create dense arrays, arrays without holes.

Sparse arrays

Creating a sparse array of a given length is simple:
    > var a = new Array(3);
    > a
    [ , ,  ]
    > a.length
    > a[0]
When you iterate over it, you can see that it has no elements. JavaScript skips the holes.
    > a.forEach(function (x, i) { console.log(i+". "+x) });

    > (x, i) { return i })
    [ , ,  ]

Dense arrays

Brandon Benvie recently mentioned a trick for creating a dense array on the es-discuss mailing list:
    > var a = Array.apply(null, Array(3));
    > a
    [ undefined, undefined, undefined ]
The above invocation is equivalent to
    Array(undefined, undefined, undefined)
For many things, there is not much of a difference between this array and the previous sparse array:
    > a.length
    > a[0]
However, you can now iterate over the elements, e.g. to fill the array with values:
    > a.forEach(function (x, i) { console.log(i+". "+x) });
    0. undefined
    1. undefined
    2. undefined

    > (x, i) { return i })
    [ 0, 1, 2 ]

One more trick

The email also mentions the following trick:
    > Array.apply(null, Array(3)).map(
    [ 0, 1, 2 ]
This is roughly the same as
    Array.apply(null, Array(3)).map(
        function (x,i,...) { return,i,...) })
Note that x is the first parameter of call and specifies the value of this. Number being a function, that value is ignored. I prefer the more explicit variant shown above:
    Array.apply(null, Array(3)).map(function (x,i) { return i })

Useful in practice?

In practice, creating a dense array in the manner described above will make your code difficult to understand for others. It is thus better to use utility functions such as _.range:
    > _.range(3)
    [ 0, 1, 2 ]
Combine it with map, in order to fill an array with a given value.
    > _.range(3).map(function () { return "a" })
    [ 'a', 'a', 'a' ]

Related posts

  1. Iterating over arrays and objects in JavaScript
  2. Trying out Underscore on Node.js