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.