Introduction


Le spread operator (“...”) permet, entre autres, d’affecter de nouvelles propriétés à un objet, ainsi que de mettre à jour des propriétés existantes.


Exemple 1 : Fusionner deux objets

const partialMovie = { title: 'The Lord Of The Rings: The Fellowship of the Ring', director: 'Peter Jackson', extended: false };

const otherMovieProperties = { year: 2001, extended: true };

const movie = { ...partialMovie, ...otherMovieProperties };
console.log(movie); // { title: 'The Lord Of The Rings: The Fellowship of the Ring', director: 'Peter Jackson', year: 2001, extended: true }


Exemple 2 : Modifier une propriété

// Create a book object
const book = { title: 'Brave New World', author: 'Aldous Huxley', year: 1932, rate: 5 };
// We want to update the rate
// First way (classic)
book.rate = 7;
console.log(book); // { title: 'Brave New World', author: 'Aldous Huxley', year: 1932, rate: 7 }

// Second way (spread operator)
const updatedBook = { ...book, rate: 7 };console.log(updatedBook); // { title: 'Brave New World', author: 'Aldous Huxley', year: 1932, rate: 7 }


Exemple 3 : Modifier une propriété dans un tableau d’objets

// Create a movies array
const movies = [
  { title: 'The Lord Of The Rings: The Fellowship of the Ring', director: 'Peter Jackson', year: 2001, rate: 8 },
  { title: 'The Lord Of The Rings: The Two Towers', director: 'Peter Jackson', year: 2002, rate: 8 },
  { title: 'The Lord Of The Rings: The Return of the King', director: 'Peter Jackson', year: 2003, rate: 9 },
  { title: 'Shutter Island', director: 'Martin Scorsese', year: 2010, rate: 8.5 }
];
        
// Create a new array with an updated rate for Peter Jackson movies

const updatedMovies = movies.map((movie, index) => ({
  ... movie, // here we have the entire object
  rate: director === 'Peter Jackson' ? 9 : movie.rate // new rate is 9 for Peter Jackson movies, and is unchanged for other movies});


Conclusion


Nous avons vu dans cet article comment utiliser le spread operator pour affecter de nouvelles propriétés à un objet. Dans certains contextes, cette technique peut être très pratique et permet de simplifier la lecture du code, comme montré dans le dernier exemple.