Qu’est-ce qu’un “sparse array” en JavaScript

On connait la flexibilité du JavaScript vis à vis des types de données, du hoisting, des références et autres comportements à l’aspect ésothérique…

Mais une fois n’est pas coutume, aujourd’hui nous allons aborder les tableaux (arrays) en JavaScript.

Mais pas n’importe quels tableaux : plus spécifiquement les “sparse array” !

Qu’est-ce qu’un sparse array ?

À l’inverse d’un tableau “dense”, un tableau dit “sparse” ou “clairsemé” est tout simplement un tableau qui contient des… trous !

Mais qu’est-ce que ça signifie pour tableau d’avoir des trous ?

Et bien cela signifie qu’une ou plusieurs case de ce tableau sont vides, elles ne contiennent : aucune valeur.

Attention, ici on ne parle pas de tableaux avec des cases null ou undefined , mais bien de cases vides. Exemple :

// 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" ]

Prenons maintenant un tableau dans lequel on passe quelques cases à 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" ]

On voit bien la différence entre les deux tableaux maintenant !

Mais alors quelles peuvent être les particularité d’un “sparse array” comme celui que nous venons de voir ?

Le problème

Est-ce qu’une case vide est très différente d’une case undefined ? Dans certains cas oui, car cela peut altérer le comportement de certaines fonction, et notamment les méthodes liées aux tableaux, comme forEach, map et reduce!

Reprenons notre exemple précédent, et essayons de parcourir le tableau :

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" ]

Si les cases “manquantes” de notre tableau avaient contenues undefined, alors chaque case aurait été égale à "x" .

Sauf que les cases vides d’un “sparse array” sont ignorée par les méthodes de parcours des tableaux.

Et si vous ne connaissez pas cette subtilité, cela peut vous jouer quelques tours…

Les solutions

Dans le meilleur des mondes, il est plus sain de privilégier des tableaux sans cases vides.

Mais ce n’est pas toujours possible.

Certains outils génèrent des sparse array, et vous serez donc obligé de travailler avec, mais heureusement il existe des solutions.

Utiliser une boucle for classique

Si les méthodes forEach, mapet reduceignorent les cases vident, il est néanmoins possible de parcourir TOUTES les cases d’un tableau avec une boucle for ou for...of !

Filtrer le tableau

Une autre solution est de filtrer le tableau pour enlever les cases vides avant de l’utiliser.

Exemple :

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

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

Attention à ne pas faire de comparaison stricte, sinon cela ne marchera pas !

À noter

Il est important de savoir que lorsque vous utilisez le constructeur new Array() en indiquant une taille de tableau, ce dernier ne contiendra que des cases vides !

C’est donc par défaut un sparse array.

La meilleure méthode pour palier à ce problème, est d’utiliser la méthode fill() pour remplir le tableau avec la valeur désirée :

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