Définition

En informatique, un tableau (array en anglais) est une structure de données qui consiste en un ensemble d'éléments ordonnés accessibles par leur indice (ou index).

C'est une structure de données de base que l'on retrouve dans chaque langage de programmation.

En JavaScript, les tablaux sont de taille dynamique. C'est à dire que la taille d'un tableau peut changer pendant l'exécution, si on y ajoute ou retire un élément.

Déclaration

Vous pouvez déclarer un tableau en JS de 2 manières :

Avec des crochets

C'est la méthode la plus rapide, concise et lisible, et donc la plus utilisée : on utilise les crochets : "[ ]".

1
2
3
4
5
6
// Créer un tableau vide
const articles = [];
// Créer un tableau contenant la valeur 5
const notes = [5];
// Créer un tableau contenant plusieurs valeurs
const myArray = ['Hello', 'world', 'How are u?'];

Avec la classe Array

Vous pouvez également déclarer un tableau en utilisant le constructeur de la classe Array.

Attention, il y a une différence entre les deux méthodes : on ne peut pas initialiser le tableau avec des valeurs si on choisit cette méthode.

1
2
3
4
5
// Créer un tableau vide
const shops = new Array();

// Créer un tableau contenant 5 éléments vides (undefined)
const bulletin = new Array(5);

Accéder à un élément du tableau

Dans un tableau, vous devez accéder à un élément par son index.

Si vous accédez à un index supérieur ou égal à la taille du tableau, aucune erreur ne sera générée. À la place, vous obtiendrez la valeur undefined.

1
2
3
4
const cities = ["Berlin", "Lisbon", "Madrid", "Paris"];
console.log(cities[0]); // => Berlin
console.log(cities[1]); // => Lisbon
console.log(cities[4]); // => undefined

Déterminer la taille d'un tableau

On peut connaître la taille d’un tableau en accédant à sa propriété length.

1
2
const cities = ["Berlin", "Lisbon", "Madrid", "Paris"];
console.log(cities.length); // => 4

Parcourir un tableau

Pour parcourir un tableau, vous devez utiliser une boucle.

Via un index

À chaque itération dans la boucle, vous utiliserez une variable compteur (généralement i) comme valeur d’index pour accéder à l’élément.

1
2
3
4
5
6
7
8
9
10
11
12
const cities = ["Berlin", "Lisbon", "Madrid", "Paris"];
console.log(cities.length); // => 4

for(let i = 0; i < cities.length; i++;){
    console.log(cities[i]);
}

// expected output :
// Berlin
// Lisbon
// Madrid 
// Paris

Via une boucle for .. of

Mais vous pouvez aussi parcourir un tableau d'une manière plus concise.

En effet, le tableau appartient à une famille d’objet qu’on appelle : itérables. Et les itérables peuvent être parcourus avec une boucle for .. of

Dans ce cas, vous devez déclarer une variable (eg. city) qui va prendre tour à tour chaque valeur du tableau :

1
2
3
4
5
6
7
8
9
10
11
const cities = ["Berlin", "Lisbon", "Madrid", "Paris"];

for(const city of cities){
    console.log(city);
}

// expected output :
// Berlin
// Lisbon
// Madrid 
// Paris

Les tableaux multi-types

Il est important de savoir qu'en JavaScript, vous pouvez mélanger plusieurs type de données dans un même tableau :

1
const tab = ['Berlin', 12, false, {id: 3, name: 'John'}];

Cependant, ce n'est pas souvent une bonne idée car ce tableau devient beaucoup plus difficile à manipuler.

En effet, chaque variable à l'intérieur de ce tableau s'utilise d'une manière différente, il est donc difficile à parcourir proprement.

Muabilité

Les tableaux JavaScript sont muables.

Savez-vous ce qu'est une variable muable ? Une variable est dîte muable si la valeur enregistrée à l'adresse de cette variable est modifiable.

Par exemple, une variable de type number est immuable : le seul moyen de modifier un number est de créer un nouveau number et de l'assigner à la variable.

1
2
3
4
5
6
7
// La variable a est déclarée donc un espace mémoire est créé.
// On y entre la valeur 1
let a = 1;
// La valeur 3 écrase l'ancienne valeur 1
a = 3;
// a + 2 est calculé et le résultat écrase l'ancienne valeur.
a = a + 2;

Dans cet exemple, vous pouvez observer que la valeur de la variable n'est jamais modifiée à proprement parler. Elle est détruite au moment où elle est remplacée par une nouvelle valeur grâce à l'opérateur =.

Voyons maintenant le cas d'un tableau.

1
2
3
4
const tab = [81, 12, 283, 29, 7];
tab.sort((a, b) => a - b));
console.log(tab);
// expected output : [7, 12, 29, 81, 283]

Dans cet exemple, nous avons utilisé la méthode sort() des tableaux.

Vous pouvez observez que la valeur du tableau est modifiée sans qu'on n'ait eu besoin de réassigner un nouveau tableau dans la variable.

On dit dans ce cas que la variable a mué.

Performances

Le tableau est, dans tous les langages, la structure de donnée la plus légère et donc la plus performante dans la plupart des cas.

Cependant, du fait de sa taille dynamique, un tableau JavaScript sera moins performant que dans d'autres langages où la taille est fixée à la création, comme en C/C++ ou en Java.

En lecture

L'accès à une donnée par son index est très peu coûteuse, donc un tableau sera très rapide pour un accès à une donnée si l'on connait son index.

En écriture

L'écriture d'une donnée se fait aussi via un accès par l'index et n'est donc pas plus coûteuse qu'un accès en lecture.

Dans le cas d'une recherche

Lorsque vous ne connaissez pas l'index de la variable que vous voulez récupérer, vous devez d'abord la rechercher dans votre tableau. Puisque l'accès en lecture se fait par l'index, vous n'avez pas d'autre choix que de parcourir les index un par un pour y rechercher la donnée souhaitée.

Si vous devez effectuer de nombreuses recherches dans votre collection, une structure comme un arbre ou une table associative (map) sera probablement plus adaptée qu'un tableau.

Conclusion

Si vous avez des idées d’amélioration pour cet article, laissez-nous un commentaire !

Et si vous avez réussi à suivre, vous pouvez passer au chapitre suivant : “Javascript - Les fonctions"

Sources

• Developer Mozzila : Array
• Pierre Giraud - Javascript apprendre à coder : Les tableaux en JavaScript et l’objet global Array
• ToutJavascript : Les tableaux en javaScript