Transformer des tableaux et objets en JavaScript avec le spread operator

Copier un tableau

Il est très courant d’utiliser des tableaux et/ou des objets lorsqu’on travaille avec JavaScript (js pour les intimes). En effet les tableaux permettent de stocker des informations répétitives dans une seule variable.

Par exemple si vous avez besoin de stocker une liste d’utilisateurs vous pouvez utiliser les tableaux comme ceci:

let listUsers = ['membre_1','membre_2','membre_3'];
Langage du code : JavaScript (javascript)

Ci-dessus on déclare dans la variable « listUsers » une liste de 3 membres (plus précisément 3 pseudonymes).

Maintenant vous souhaitez ajouter un nouvel utilisateur à votre liste vous pouvez utiliser la commande push() pour « pousser » un nouvel élément à la fin de votre tableau :

listUsers.push('membre_4')
//en faisant console.log(listUsers) vous aurez comme résultat :
// [
//  "membre_1",
//  "membre_2",
//  "membre_3",
//  "membre_4"
// ]Langage du code : JavaScript (javascript)

Votre variable « listUsers » a désormais 4 valeurs comme prévu. Mais peut-être que vous souhaitez stocker cette liste de 4 utilisateurs dans une copie de votre variable « listUsers » et garder celle-ci intact (c’est à dire avec la liste initiale des 3 membres).

let listUsers2 = listUsers //listUsers2 est une copie de listUsers
listUsers2.push('membre_4')Langage du code : JavaScript (javascript)

En faisant ça, vous avez introduit un effet de bord sans forcément vous en rendre compte. Si vous faites un console.log de vos deux variables, vous obtenez ceci :

console.log(listUsers,listUsers2)
Array(4) [ "membre_1", "membre_2", "membre_3", "membre_4" ] //listUsers
 
Array(4) [ "membre_1", "membre_2", "membre_3", "membre_4" ] //listUsers2Langage du code : JavaScript (javascript)

La variable « listUsers » a aussi été modifiée même si ce n’était pas votre intention première. Pour remédier à ce problème, on peut utiliser le « spread operator » en javascript qui s’écrit avec 3 petits points (comme etc).

let listUsers2 = [...listUsers, 'membre_4']

//ou en version longue :

let listUsers2 = [...listUsers]
listUsers2.push('membre_4')Langage du code : JavaScript (javascript)

En faisant ça, on va copier le tableau « listUsers » et lui accoler une nouvelle valeur (membre_4) mais sans modifier le tableau original.

Étendre un tableau

On l’a vu ci-dessus mais si vous souhaitez étendre un tableau (avec de nouvelles valeurs), on peut utiliser le spread operator à cette fin.

let fruits = ['banane','poire'] //on créé un tableau avec 2 valeurs

//on veut ajouter les éléments "pomme" et "cerise"

let fruits2 = [...fruits, 'pomme', 'cerise']
Langage du code : JavaScript (javascript)

Spread Operator et objets

Le spread operator peut aussi être utilisé avec des objets. Un objet permet de regrouper plusieurs types d’informations dans une seule variable. Exemple avec un utilisateur qui aurait renseigné diverses informations sur son profil :

let user = {
name: 'Dupont',
firstname: 'Paul',
age: 26
}Langage du code : JavaScript (javascript)

Vous pouvez ajouter une nouvelle propriété à cet objet en utilisant le spread operator :

let userClone = {...user, location: 'France'}Langage du code : JavaScript (javascript)

Votre variable « userClone » est maintenant identique, et indépendante, de « user » mais avec la propriété « location » en plus.

On peut, bien entendu, coupler les objets et tableaux dans un même cas d’usage :

const users = [
{
name: 'Durand',
firstname: 'Fred'
},
{
name: 'Martin',
firstname: 'Louise'
}
]Langage du code : JavaScript (javascript)

La constante « users » contient une liste d’objets (ici une liste d’utilisateurs). Pour ajouter un nouvel utilisateur à cette liste, le procédé reste le même.

PS: Notons ici l’utilisation de const au lieu de let, ce qui indique que « users » est une constante. La variable « users » ne peut donc pas être ré-assignée mais les éléments du tableau, oui.

const usersFinal = [...users, {
name: 'Anneau',
firstname: 'Jean-Jacques'
}
]Langage du code : JavaScript (javascript)

La constante « usersFinal » a désormais 3 utilisateurs.