The spread syntax allows an array expression or string or anything which can be iterated to be expanded in places where zero or more arguments for function calls or elements for the array are expected or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.
Let’s say we have two arrays containing domestic and wild animals.
const domesticAnimals = [‘Cows’, ‘Sheep’, ‘Goat’]; const wildAnimals = [‘Lion’, ‘Tiger’, ‘Fox’];
and we need to combine two of them, we would normally use the concat() array method.
const newAnimalsArray = domesticAnimals.concat(wildAnimals);
Using the ES6 spread syntax, we could also write the above code like so:
const newAnimalsArray = [ …domesticAnimals, …wildAnimals];
These two lines of code both do the same thing, and the latter is known as the spread syntax. While generally, you would want to stick to using array methods when working with arrays, the advantage of using spread over concat can be seen in large operations where the spread operator is significantly faster. The spread syntax also enforces immutability, which is really important if you are working with data that should not be mutated. Basically, the spread syntax allows us to copy, into the new array, the values of already defined array(s).
Let’s check some use cases where we can use the Spread syntax.
- Inserting an array (push) / (concat)
- Copy an array(slice)
- Converting String to array
- Apply for new
1) Inserting an array
Suppose we have two arrays to perform some operation you need to perform merging of these arrays into one.
const arr1 = [3, 4] const arr2 = [1, 2, 5];
now we merge one array to other so we can do it like
const arr3 = [1, 2, arr1, 5];
when you run this output is like [1, 2, [3, 4], 5] and you expect like [1, 2, 3, 4, 5]
const arr3 = [1, 2, …arr1, 5];
By running the above example you got a simple array instead of nesting array.
2) Copy an array
const arr1 = [1, 2, 3]; const arr2 = arr1; console.log(arr2);
const arr1= [1, 2, 3]; const arr2 = arr1; arr2.push(5); console.log(arr1); // (5) [1, 2, 3, 5]
In this case, both arrays have the same element. Above, you push a new element into arr2 and it also affects arr1 too. You will see the new d element into arr1 also
so, here you also use Spread syntax to reducing this problem.
const arr1 = [1, 2, 3]; const arr2 = [...arr1]; arr2.push(5); console.log(arr1); // (3) [1, 2, 3] console.log(arr2); // (5) [1, 2, 3, 5]
while executing this code you will get an array which will insertt an element in arr2 only using spread syntax and arr1 remain as same as above
3) String converting to the array
While reading this paragraph you might be surprised because spread syntax is also used to convert a string to the array by just simply used the spread syntax within the pair of square braces.
const str = 'Hello'; const charArray = [...str]; console.log(charArray); // (5) ["H", "e", "l", "l", "o"]
4) Apply for new
When calling a constructor with new, it's not possible to directly use an array and apply (apply does a [[Call]] and not a [[Construct]]). However, an array can be easily used with new thanks to spreading syntax:
const birthday = [14, 09, 1990]; const date = new Date(...birthday);
we can just write a two-line instead of long code.