undevweb

,

Le spread en JS « … »

undevweb

L’opérateur js « … » permet de décomposer et copier un objet / tableau

Copier un objet

JavaScript
const powers = {
  flight: true,
  strength: 'Superhuman'
};
const superHero = { ...powers };
console.log(superHero); // { flight: true, strength: 'Superhuman'}

powers.flight = false;
console.log(superHero); // { flight: true, strength: 'Superhuman' }

Cela crée une réelle copie, superHero.flight n’a pas changé de valeur alors qu’on a changé la valeur de powers.flight.
Par contre, s’il y a plus d’un niveau, la profondeur sera copiée par référence :

JavaScript
const powers = {
  flight: true,
  laserVision: {
    color: "red"
  },
};
const superHero = {...powers};
console.log(superHero); // { flight: true, laserVision: { color : "red" } }

powers.flight = false;
powers.laserVision.color = "green";
console.log(superHero); // { flight: true, laserVision: { color : "green" } }

flight : ne change pas car niveau 1
color : change car niveau 2 (supérieur à 1)
C’est du au fait que le niveau 1 laserVision est un objet. Un objet est toujours copié par référence. Quand on spread, en réalité ce n’est pas une copie de l’objet mais une copie de ses propriétés, ce qui est fondamentalement différent.

Fusionner des objets

JavaScript
const powers = {
  flight: false,
  strength: 'Strong'
};

const gadgets = {
  utilityBelt: ['Batarang', 'Smoke Bombs', 'Grappling Hook'],
  vehicle: 'Batmobile'
};

const costume = {
  color: 'Black',
  material: 'Kevlar',
  cape: true
};

const batman = { name:"batman", ...powers, ...gadgets, ...costume  };
console.log(batman);

/*
{
  name:"batman"
  flight: false,
  strength: 'Strong',
  utilityBelt: ['Batarang', 'Smoke Bombs', 'Grappling Hook'],
  vehicle: 'Batmobile'
  color: 'Black',
  material: 'Kevlar',
  cape: true
}
*/

Ici les objets powers, gadget et costume ont été spread dans la variable batman. Batman a donc toutes les propriétés des autres.
On voit aussi qu’on peut ajouter les propriétés que l’on veut à l’objet.

Surcharger des propriétés

Surcharger des propriétés
const powers = {
  flight: true,
  strength: 'Normal'
};

const superHero = { ...powers, strength: 'Superhuman', name : "Superman" };
console.log(superHero); // { flight: true, strength: 'Superhuman', name : "Superman" }

const miniHero = { strength: 'Mini', name : "Miniman", ...powers };
console.log(miniHero); // { flight: true, strength: 'Normal', name : "Miniman" }

Dans le premier cas strength: ‘Superhuman’ surcharge powers donc superHero.strength vaut « Superhuman »
Dans le deuxieme cas c’est powers qui surcharge la propriété donc miniHero.strength vaut « normal ».

Surcharger un objet avec un autre objet
const powers = {
  flight: true,
  strength: 'Normal'
};

const superHero = { strength: 'Superhuman', lazer: true };
const superMan = { ...powers, ...superHero };
console.log(superMan); // { flight: true, strength: 'Superhuman', lazer: true }

superHero.strength surcharger powers.strength
Les autres propriétés sont copiées simplement.

Les tableaux

JavaScript
const marvels = ['Black widow', 'Spiderman', 'Ironman'];
const dc = ['Supergirl', 'Batman'];
const heroes = [...marvels, ...dc]; 
console.log(heroes); // ['Black widow', 'Spiderman', 'Ironman', 'Supergirl', 'Batman']

Au final, pas de surprise, ça fonctionne pareil !

N’oublions pas qu’une string est un tableau de charactères donc :

JavaScript
const blackwidow = 'Black widow';
const letters = [...blackwidow];
console.log(letters); // [ "B", "l", "a", "c", "k", " ", "w", "i", "d", "o", "w" ]

,

You might also like