#spread _Spread_operator :
The spread operator is a smart thing in JavaScript ES6
The spread operator is basically denoted by three dot symbols
Let’s see what the spread operator is and how it works
Assuming we have an Array this is
let number = [1, 2, 3, 4, 5];
If I create this function to add it
function sum (a,b,c,d,e){
console.log(a+b+c+d+e);
}
I must call the function to see the sum so here I am calling my function like this
sum(number);
Then we will see such result
1,2,3,4,5undefinedundefinedundefinedundefined
Why did we get such a result?
Because the number we passed as argument is an Array But we have taken 5 parameters in our function a, b, c, d, e.
That’s why it accepts five arguments
But notice that we have passed an entire Array (considered as an argument).
Due to which we did not get our correct results.
If we write like this we get correct output
sum(1,2,3,4,5);
Or if we want to use number Array then how can we use it
let number = [1, 2, 3, 4, 5]
function sum(a,b,c,d,e){
console.log(a+b+c+d+e);
}
sum.apply(null, number);
It was about ES5
However, this seems like a lot of trouble, so we can easily do this by using JavaScript’s ES6 Spread operator.
Let’s see how we can do this with the spread operator
let number = [1, 2, 3, 4, 5];
function sum(a,b,c,d,e){
console.log(a+b+c+d+e);
Get RAIHAN BISWAS’s stories in your inbox
Join Medium for free to get updates from this writer.
}
sum(…number);
Similarly using Spread operator we can do many more things
We use push or unshift to add new elements
If we take such an array
let arr = [“Raihan”,”Niloy”,”Jamal”, “Kamal”];
arr.unshift(“Tamim”);
console.log(arr);
[‘Tamim’, ‘Raihan’, ‘Niloy’, ‘Jamal’, ‘Kamal’]
Similarly at the end if we want to add any element
let arr = [“Raihan”,”Niloy”,”Jamal”, “Kamal”];
arr.push(“Tamim”);
Ans : [‘Raihan’, ‘Niloy’, ‘Jamal’, ‘Kamal’, ‘Tamim’]
Let’s take a look at how it would have looked if this could have been done with the JavaScript spread operator
let arr = [“Raihan”,”Niloy”,”Jamal”, “Kamal”];
const newarr = [“biswas”, “tareq”, …arr, “newarr”];
console.log(newarr);
Now our array will look like this
[‘biswas’, ‘tareq’, ‘Raihan’, ‘Niloy’, ‘Jamal’, ‘Kamal’, ‘newarr’]
Then we can easily add new elements to the Array wherever we want through the spread operator
If we want to add 2 arrays
let arr1 = [1,2,3,4,5];
let arr2 = [6,7,8,9];
arr1 = arr1.concat(arr2);
console.log(arr1);
Ans : [1, 2, 3, 4, 5, 6, 7, 8, 9]
If we do this through the spread operator, it will be much easier
So let’s see how we can do this very easily with the spread operator
let arr1 = [1,2,3,4,5];
let arr2 = [6,7,8,9];
arr1 = […arr1, …arr2];
console.log(arr1);
Ans : [1, 2, 3, 4, 5, 6, 7, 8, 9]
So, from now on we can do such tasks very easily with spread operator
The spread operator is represented by three dots(…)
