A "sparse array" in JavaScript is an array in which some elements are missing—meaning there are "holes" between the indices, rather than the array containing consecutive elements with actual values (including `undefined`) at every index.

JavaScript's flexibility is well known** when it comes to data types, hoisting, references and other seemingly esoteric behaviors…

But for once, today we're going to tackle arrays in JavaScript.

But not just any arrays: more specifically, “sparse arrays”!

What is a sparse array?

Unlike a “dense” array, a so-called “sparse” array is simply an array that contains… holes!

But what does it mean for an array to have holes?

Well, it means that one or more slots in this array are empty, they contain: no value at all.

Careful, here we're not talking about arrays with null or undefined slots, but truly empty slots. Example:

// Prenons un tableau classique
let arr = ["a", "b", "c"];

// Puis insérons un élément à un index plus grand que le tableau
arr[5] = "f";

console.log(arr);
// Résultat : [ "a", "b", "c", <2 empty slots>, "f" ]

Now let's take an array in which we set a few slots to undefined:

let arr = ["a", "b", "c", "d", "e", "f"];
arr[3] = undefined;
arr[4] = undefined;

console.log(arr);
// Résultat : [ "a", "b", "c", undefined, undefined, "f" ]

We can clearly see the difference between the two arrays now!

But then, what particular quirks can a “sparse array” like the one we just saw have?

The problem

Is an empty slot very different from an undefined slot? In some cases, yes, because it can alter the behavior of certain functions, and in particular array-related methods like forEach, map and reduce!

Let's go back to our previous example, and try to iterate over the array:

let arr = ["a", "b", "c"];
arr[5] = "f";

console.log(arr.length)
//length: 6

arr = arr.map((item)=>{
		return "x";
});

console.log(arr);

Array(6) [ "x", "x", "x", <2 empty slots>, "x" ]

If the “missing” slots in our array had contained undefined, then every slot would have been equal to "x".

Except that empty slots in a “sparse array” are ignored by array traversal methods.

And if you're not aware of this subtlety, it can play a few tricks on you…

The solutions

In an ideal world, it's healthier to favor arrays without empty slots.

But that's not always possible.

Some tools generate sparse arrays, so you'll be forced to work with them, but fortunately there are solutions.

Use a classic for loop

While the forEach, map and reduce methods ignore empty slots, it is nonetheless possible to iterate over EVERY slot of an array using a for or for...of loop!

Filter the array

Another solution is to filter the array to remove the empty slots before using it.

Example:

const arr = [1, 2, 3, , 5];
const cleaned = arr.filter(item => item != null);

console.log(cleaned.length);
// 4

Be careful not to use a strict comparison, otherwise it won't work!

Worth noting

It's important to know that when you use the new Array() constructor by specifying an array size, the latter will only contain empty slots!

So by default, it's a sparse array.

The best way to work around this issue is to use the fill() method to fill the array with the desired value:

const arr = new Array(5).fill(undefined);
// [undefined, undefined, undefined, undefined, undefined]