The Spread operator (feature of ES6)
The Spread operator is three dot (...)
operator that perform different types of operations and after learning it you
can say “I could do it with my eyes shut”.
So here are the examples :
1. Combine the content of the array :
If we have two arrays and we want a third
array that combine the two arrays into one:
var devTeams = ["Yukon", "Thor",
"Bradford", "Bristol"]
var qaTeams = ["Ward", "Blackwood"]
var teams= [...devTeams,
...qaTeams]
console.log(teams) // [
"Yukon", "Thor", "Bradford", "Bristol",
"Ward", "Blackwood" ]
Here all the items of devTeams and qaTeams are
pushed to one array called teams. You can also achieve this using concate().
var devTeams = ["Yukon", "Thor",
"Bradford", "Bristol"]
var qaTeams = ["Ward", "Blackwood"]
var teams=
devTeams.concat(qaTeams);
console.log(teams) // [
"Yukon", "Thor", "Bradford", "Bristol",
"Ward", "Blackwood" ]
Note: Concatenation
using the spread operator is three times slower than using concat. So, it
better to use concat() for large data set.
2. Copy array :
As we know, slice() is javascript array method
that allows us to copy the array.
For example :
// old
var devTeams = ["Yukon", "Thor",
"Bradford", "Bristol"]
var cloneDevTeams =
devTeams.slice();
console.log(cloneDevTeams
); // [ "Yukon", "Thor",
"Bradford", "Bristol"]
// new
var devTeams = ["Yukon", "Thor",
"Bradford", "Bristol"]
var cloneDevTeams =
[...devTeams];
console.log(cloneDevTeams
); // [ "Yukon", "Thor",
"Bradford", "Bristol"]
In both examples devTeams and cloneDevTeams pointing to the different
memory.
3.Grab the last item from the array
var devTeams = ["Yukon", "Thor",
"Bradford", "Bristol"]
var [last] = devTeams
.reverse()
console.log(last) //
Bristol
console.log(devTeams.join(',
'))
// Bristol, Bradford, Thor,
Yukon
So here what happened? Can
you try to find the problem?
Actually the reverse function has been altered
or mutated the array. In a world of the spread operator, we don’t have to
mutate the original array. First, we can create a copy of the array and then
reverse it:
var devTeams = ["Yukon", "Thor",
"Bradford", "Bristol"]
var [last] = [...devTeams
].reverse()
console.log(last) //
Bristol
console.log(devTeams.join(',
'))
// Yukon, Thor,
Bradford, Bristol
4. Get some, or the rest, of the
items in the array
var devTeams = ["Yukon", "Thor",
"Bradford", "Bristol"]
var [first, ...rest] =
devTeams;
console.log(rest.join(",
")) // Thor, Bradford, Bristol
console.log(first); //Yukon
Note: Here first and
rest are not keywords as mentioned below
var [first, ...rest] =
devTeams;
Or
var [start, ...remaining] =
devTeams;
5. Insert array into the middle of
the array but not an array within array
var middleArr = [0, 0];
var arr = [8, 7, middleArr,
6, 5];
From the above mentioned
code, Can you guess the answer of arr?
The answer is :
[8, 7, [0, 0], 6, 5]
It’s good if you want the same result but what
if I want a single array, not like as mentioned above.
So,
here we can use the Spread operator as its allow us to expand the array too.
var middleArr = [0, 0];
var arr = [8,
7,...middleArr, 6, 5];
console.log(arr);
// [8, 7, 0, 0, 6, 5]
It is like magic…….. And also you can say It’s easy as
pie… :)
6. Math
We can also use math functions with the Spread
operator and here I will be using Math.max() for explanation.
Math.max();
// -Infinity
Math.max(1, 2, 3);
// 3
Math.max(100, 3, 4);
// 100
Without the spread operator, easy way to use
Math.max() with apply
var arr = [2, 4, 8, 6, 0];
function max(arr) {
return Math.max.apply(null, arr);
}
console.log(max(arr));
// Output: 8
So, What you think, what is
the syntax of finding the max value with the Spread operator?
Here is the code:
var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);
console.log(max);
7. String to Array
Could you imagine, how many
lines of code you will write to achieve the goal as mentioned?
Use the spread operator to simply convert a
string to an array of characters:
var str =
"helloworld";
var chars = [...str];
console.log(chars);
// [ "h",
"e", "l", "l", "o", "w",
"o", "r", "l", "d" ]
8. Replace apply:
In cases where you want to use the elements of
an array as arguments to a function.
Example with apply
function myFunction(x, y,
z) { console.log('Value y is ' + y); }
var args = [0, 1, 2];
myFunction.apply(null,
args);
Example with Spread operator
function myFunction(x, y,
z) { console.log('
// Value of y is 1
Value y is ' + y); }
var args = [0, 1, 2];
myFunction(...args);
// Value of y is 1
9. Shallow-cloning
Shallow-cloning (excluding prototype) or
merging of objects is now possible using a shorter syntax than Object.assign().
var obj1 = { foo: 'bar', x:
42 };
var obj2 = { foo: 'baz', y:
13 };
var clonedObj = { ...obj1
};
// Object { foo:
"bar", x: 42 }
var mergedObj = { ...obj1,
...obj2 };
// Object { foo:
"baz", x: 42, y: 13 }
