Spread operator — 7 astuces super pratiques

Le spread opérator a été introduit avec ES6 et c’est un outil qui a eu beaucoup de succès. Utile pour faire des concaténations de tableaux et d’objets, il a en réalité d’autres utilités !

Voici 7 choses que tu peux faire avec le spread operator pour l’utiliser au maximum de son potentiel 🔥

1. Ajouter des propriétés

Cloner un objet et lui ajouter des propriétés simultanément.

Dans cet exemple on ajoute la propriété “couleur” à notre voiture 🏎️

const voiture = { id: 1, vitesseMax: 180 }
const voitureAvecCouleur = { ...voiture , couleur : 'Rouge'}

console.log(voitureAvecCouleur)
// Affiche =>  { id: 1, vitesseMax: 180, couleur : 'Rouge' }

2. Fusionner des objets

Combiner 2 objets et garder les propriétés communes.
Ici la prop idest conservée.

const partie1 = { id: 100, name: 'Codiku' }
const partie2 = { id: 100, password: 'Password!' }

const user = { ...part1, ...part2 }
// user vaut => { id: 100, name: 'Codiku', password: 'Password!' }

3. Retirer des propriétés d’un objet

On va pouvoir retirer des propriétés d’un objet en le destructurant puis en spécifiant quelles propriétés on veut extraire. On utilisera ensuite le spread operator pour récupérer le “reste” de notre objet.

const fruits = { 
  fruitsRouges : ['Fraise', 'framboise'], 
  fruitsJaunes : ['citron','banane'], 
  fruitsVerts: ['Kiwi'] 
}
// Finalementje me débarasse des fruitsVerts (le kiwi c'est trop acide)

jconst {fruitsVerts , ...fruitsRestants} = fruits 

/* 
fruitsRestant vaut :
{ 
  fruitsRouges : ['Fraise', 'framboise'], 
  fruitsJaunes : ['citron','banane'], 
}
*/

Tu peux aussi utiliser :

delete fruits.fruitsVerts

Mais attention cela va modifier ton objet initial, alors qu’ici il reste inchangé !

4. Retirer des propriétés dynamiquement

Dans l’exemple précédent on a retiré une propriété en la nommant spécifiquement. Ce qui serait plus sympa c’est d’avoir une fonction qui pourrait retirer une propriété d’un objet dynamiquement.

const user1 = {
  id: 1,
  name: "Codiku",
  password: "Password!"
};

const retirePropriete = (objet, propARetirer) => {
  const { [propARetirer]: _, ...reste } = objet;
  return reste;
};

const userSansPassword = retirePropriete(user1, "password");
// userSansPassword vaut : {id: 1, name: "Codiku"}

const userSansId = retirePropriete(user1, "id");
// userSansId vaut : {name: "Codiku", password: "Password!"}

5. Réorganiser l’odre des propriétés

Parfois une propriété n’est pas ordonnée comme on le souhaiterait. Pour replacer une propriété au début d’un objet on peut le destructurer et lui affecter undefined, puis spread le reste de l’objet à la suite..

const user3 = {
    password: 'Password!',
    name: 'Codiku',
    id: 1
  }
  
  const organiser = object => ({ id: undefined, ...object })
  // Déplace "id" en première propriété
  
  const userBienOrganise = organiser(user3)
  // userBienOrganise vaut : { id: 1, password: 'Password!', name: 'Codiku' }

Pour passer le password en dernière position d’abord on extrait le password , puis on renvoit un objet contenant en première position le reste de l’objet suivis du password

const user3 = {
  password: "Password!",
  name: "Codiku",
  id: 1
};

const organiser = ({ password, ...reste }) => ({ ...reste, password });
// Déplace "id" en première propriété

const userBienOrganise = organiser(user3);
console.log(userBienOrganise);
// userBienOrganise vaut : {   name: 'Codiku',id: 1, password: 'Password!' }

6. Propriété par défauts

Les propriétés par défauts sont appliquées uniquement quand la propriété en question n’est pas présente dans l’objet initial.

Dans cet exemple, si il n’y a pas de propriété “citation” dans l’objet, on en ajoute une par défaut.

const user1 = {
  id: 1,
  name: "Spiderman"
};

const user2 = {
  id: 2,
  name: "Batman",
  citation: "Je suis Batman..."
}

const setDefaults = ({
  citation = "Un grand pouvoir implique de grandes responsabilités",
  ...object
}) => ({ ...object, citation });

const user1AvecDefault = setDefaults(user1);
console.log(user1AvecDefault);

/*
 user1AvecDefault vaut : {
  id: 1, name: "Spiderman",
  citation: "Un grand pouvoir implique de grandes responsabilités
}
*/

const user2AvecDefault = setDefaults(user2);
/*
 user2AvecDefault vaut : {
  id: 2, 
  name: "Batman", 
  citation: "Je suis Batman..."
}
*/

7. Renommer une propriété

Alors attention celui ci peut faire mal àla tête 🤯

On se crée une fonction de renommage.

On envoit le nom de la propriété a changer : oldKey, puis un nouveau nom pour celle ci : oldKey

Enfin on envoit l’objet a modifier : object

Lors du passage en paramètre de l’objet on extrait la props ayant pour clé oldKey et on récupère sa valeur qu’on nomme à la volée: oldKeyValue ,puis on spread le reste de l’objet. Il nous reste a retourner le reste de l’objet accompagné d’une nouvelle propriété ayant pour nom newKey et pour valeur oldValue.

Et Boom, renommage réussi.

const rename = (oldKey, newKey, { [oldKey]: oldValue, ...object }) => {
  return { [newKey]: oldValue, ...object };
};
const user = {
  ID: 1,
  name: "Aragorn"
};
const userWithIDRenamed= rename("ID", "id", user);
console.log(userWithIDRenamed);
// {id: 1, name: "Aragorn"}

8. Bonus ! Ajouter une propriété conditionnellement.

Ici le passwordest ajouté, si et seulement si la variable password est “truthy” donc contient quelques chose qui n’est ni false, ni null,ni "", ni undefined.

const user = { id: 1, name: 'Tyler D' }
const password = 'Password!'

const userAvecPassword = {
  ...user,
  ...(password && { password })
}
// userAvecPassword  vaut : { id: 1, name: 'Tyler D', password: 'Password!' }

Conclusion

J’ai essayé de lister quelques cas d’utilisations fréquents du spread operator. Alors biensûr ,en réalité, les possibilités ne sont limités que par tes idées ;) N’hésites pas, si tu as d’autre idées de cas, à les ajouter dans les commentaires !