Introduction


Spread operator (“...”) allows, among many other things, the assignation of new properties to an object, and the update of existing properties.



Example 1: Merge two objects


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 }



Example 2: Update a specific property




// 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 }




Example 3 : Update a property in an objects array



// 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


We have seen how to use the spread operator in order to update values of object properties. In some cases, this feature can be really useful and ease the code reading, as shown in the last example.



--------------------------------------------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------- Version française ---------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------



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.