What is the spread operator in JavaScript?
The spread operator is a new addition to the set of operators in JavaScript ES6. It takes in an iterable (e.g an array) and expands it into individual elements.
The spread operator is commonly used to make deep copies of JS objects. When we have nested arrays or nested data in an object, the spread operator makes a deep copy of top-level data and a shallow copy of the nested data. Using this operator makes the code concise and enhances its readability.
Syntax
The spread operator is denoted by three dots, ….
Examples
Since the array data structure is widely used, it will be considered in all the subsequent examples.
1. Copying an array
The array2 has the elements of array1 copied into it. Any changes made to array1 will not be reflected in array2 and vice versa.
If the simple assignment operator had been used then array2 would have been assigned a reference to array1 and the changes made in one array would reflect in the other array which in most cases is undesirable.
let array1 = ['h', 'e', 'y'];// Copying array1 to array2let array2 = [...array1];// Printing array2console.log(array2);
2. Inserting the elements of one array into another
It can be seen that the spread operator can be used to append one array after any element of the second array. In other words, there is no limitation that baked_desserts can only be appended at the beginning or the end of the desserts2 array.
let baked_desserts = ['cake', 'cookie', 'donut'];// Appending baked_desserts to desserts arraylet desserts = ['icecream', 'flan', 'frozen yoghurt', ...baked_desserts];// Printing desserts arrayconsole.log(desserts);// Appending baked_desserts after flan in desserts2 arraylet desserts2 = ['icecream', 'flan', ...baked_desserts, 'frozen yoghurt'];// Printing desserts2 arrayconsole.log(desserts2);
3. Array to arguments
Instead of having to pass each element like numbers[0], numbers[1] and so on, the spread operators allows array elements to be passed in as individual arguments.
function multiply(number1, number2, number3) {console.log(number1 * number2 * number3);}let numbers = [1,2,3];// Calling multiply function and passing arguments// using spread operatormultiply(...numbers);
The Math object of Javascript does not take in a single array as an argument but with the spread operator, the array is expanded into a number or arguments with just one line of code.
// Passing elements of the array as arguments// to the Math Objectlet numbers = [1,2,300,-1,0,-100];console.log(Math.min(...numbers));
4. Copying a nested array
The spread operator will deep copy the top-level elements of array1 but shallow copy the nested arrays.
If we make changes at array1[0], the data at array2[0] will not be affected, but if we make changes at array1[1], the data at array2[1] will also change.
Look at the following example to understand this.
let array1 = ['h', ['e', [1, true, 9], "hello"], ['y']];// Copying array1 to array2 using spread operatorlet array2 = [...array1];// Printing array2 after copyingconsole.log("Array 2 after nested copying:\n", array2);// Updating array1[0] from 'h' to 'a'array1[0] = 'a'// Printing array2 after updating array1[0]console.log("Array 2 after updating array1[0] to 'a':\n", array2);// Updating array1[1][0] from 'e' to 'b'array1[1][0] = 'b'// Printing array1 after updating array1[1][0]console.log("Array 1 after updating array1[1][0] to 'b':\n", array1);// Printing array2 after updating array1[1][0]console.log("Array 2 after updating array1[1][0] to 'b':\n", array2);
To avoid this, we can copy the nested data of array1 to array2 index-wise.
Let’s look at the following example to understand this.
let array1 = ['h', ['e', [1, true, 9], "hello"], ['y']];// Copying array1 to array2 using spread operatorlet array2 = [...array1];// Copying array1[1] nested array to array2[1] using spread operatorarray2[1] = [...array1[1]]// Copying array1[2] nested array to array2[2] using spread operatorarray2[2] = [...array1[2]]// Printing array2 after copying the data index wiseconsole.log("Array 2 after nested copying:\n", array2);// Updating array1[0] from 'h' to 'a'array1[0] = 'a'// Printing array2 after updating array1[0]console.log("Array 2 after updating array1[0] to 'a':\n", array2);// Updating array1[1][0] from 'e' to 'b'array1[1][0] = 'b'// Printing array1 after updating array1[1][0]console.log("Array 1 after updating array1[1][0] to 'b':\n", array1);// Printing array2 after updating array1[1][0]console.log("Array 2 after updating array1[1][0] to 'b':\n", array2);
