Pertinent à savoir sur les arrays JavaScript

En JavaScript, il existe deux notations pour déclarer un array (new Array() et []). Elles peuvent sembler équivalentes mais il y a une différence importante à considérer. Pour comprendre, le mieux est de suivre l'exécution du code dans la démonstration suivante :

var a1 = new Array();
console.log(a1.length); // 0
console.log(a1[0]); // undefined

var a2 = new Array(1,2,3);
console.log(a2.length); // 3
console.log(a2[0]); // 1

// optionnellement
var a3 = new Array(3);
console.log(a3.length); // 3
console.log(a3[0]); // undefined

Jusqu'à maintenant, peu de surprises si ce n'est que de déclarer un tableau vide de trois éléments à la dernière étape.

Poursuivons avec l'équivalent en utilisant la deuxième notation [] :

var b1 = [];
console.log(b1.length); // 0
console.log(b1[0]); // undefined

var b2 = [1,2,3];
console.log(b2.length); // 3
console.log(b2[0]); // 1

Ajoutons-y un degré de difficulté.

var b3 = [3];
console.log(b3.length);

Contrairement à la déclaration avec new Array(), la longueur de b3 sera de 1 car c'est la valeur 3 qui fait partie de l'array et non pas la réservation de 3 "espaces libres" comme dans a3.

// ajoutons une valeur
b3[3] = 2;

À ce stade-ci, quelle est la grandeur de l'array ?

console.log(b3.length); // 4
console.log(b3); // [3, undefined, undefined, 2]

Mais d'où viennent ces 2 espaces vides ? Comme nous avons placé la valeur 2 au 3ème indice de l'array b3, la taille du tableau est automatiquement élargie à 4.

Maintenant, ajoutons à ce même tableau une valeur à une clé. Quelle sera la grandeur du tableau ? Est-ce que la longueur deviendra 5 ?

b3['x'] = 'y';
console.log(b3.length); // 4
console.log(b3); // [3, undefined, undefined, 2]
console.log(b3.x); // y

Eh non, la longueur demeure 4 mais une propriété x a été créée pour stocker la valeur de y. Donc on sait qu'on peut aussi stocker des propriétés si la clé est textuelle. Essayons autre chose.

b3['10'] = 1; // associatif car la clé est textuelle et non numérique ?
console.log(b3.length); // 11

Vous y comprenez quelque chose ? Le secret ici est que JavaScript tentera toujours de convertir la clé en numérique pour stocker la valeur au bon indice. S'il échoue, il utilisera une propriété associative qui pourra ensuite être appelée des deux façons (b3['x'] ou b.x).

Ce qu'il faut se rappeler, c'est que selon la manière de déclarer l'array, on ne peut pas s'attendre au même comportement pour éviter des mauvaises surprises.

console.log(Array(5).length); // 5
console.log([5].length); // 1

Douglas Crockford, auteur du livre JavaScript, the Good Parts (et impliqué dans le développement du JavaScript par l'apport du fameux JSON), recommande l'utilisation de l'array littéral plutôt que sa forme objet. D'ailleurs, si vous regardez le code source de jQuery, vous noterez qu'en aucun temps la notation new Array() n'est utilisée. Ça devrait vous donner un indice sur la méthode préférée des développeurs les plus expérimentés. Dorénavant, j'essaierai de changer mes habitudes, juste pour pouvoir me faire passer pour un expert ;-)