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.