rest and spread operator (...
)
π rest and spread operators came out with release of ECMA6
π...
can be used as rest as well as spread operator
rest
π collects all remaining params into a single array
π Problem statement : write a function which can perform sum of N numbers
πCode
const sum = (n1,n2,n3) => {
return n1+n2+n3;
}
π this solution works for only 3 numbers but as per the definition we've to add N numbers
π now the problem is we don't know how many params are going to passed maybe 3 maybe 5 maybe 100?
π we can't write 100 function for 100 numbers
π Solution : use rest operator
π rest operator (...
) collects all the actual values passed and then combines them into one array , so we can pass n number of params without having to write separate functions for each of problems
π Example
const sumOfN = (...elements) => {
let total = 0;
// remember rest passes array as arguement
// we'll loop through each element and add them into total.
for(i=0;i<elements.length;i++)
{
// += is short hand for 'total = total + elements[i]`
total+=elements[i]; // will add items from array one by one
}
return total;
}
// let's check
sumOfN(1); // β returns 1
sumOfN(1,2); // β returns 3
sumOfN(1,2,3); // β returns 6
sumOfN(1,2,3,4); // β returns 10
π according to ECMA standards the param which will use rest operator need to be last in parameters
π Example
: sumOfN(someOtherVar,...elements)
Spread operator
π Spread operator have similar (...
) expression as rest operator but it works in different context
πSpread operators allows us to expand elements without having to write loops explicitly
Let's understand it through example
π Problem statement : create a program which can merge two arrays
π The old way :
let arr1=[1,2,3];
let arr2 = [4,5,6];
let mergedArray = [];
for(let item of arr1)
{
// push method is used to push elements into array at last index
mergedArray.push(item);
}
for(let item of arr2)
{
mergedArray.push(item);
}
console.log(mergedArray);
// will print [1,2,3,4,5,6]
π The new way with spread operator :
let arr1 = [1,2,3];
let arr2 = [4,5,6];
// '...arr1' will unpack 1,2,3 into mergedArray
// '...arr2' will unpack 4,5,6 into mergedArray
let mergedArray = [...arr1,...arr2];
console.log(mergedArray);
// will print [1,2,3,4,5,6]
π Spread makes it easy to work with day to day array operations
Destructuring
π Descructuring in JavaScript simply refers to popping out the desired values from Objects and Arrays
π Example : The old way
const π = {
name : "sharron",
color : "black",
age : 9
}
// old way to access values
const name = π.name;
const color = π.color;
const age = π.age;
π Example : The new way
const π = {
name : "sharron",
color : "black",
age : 9
}
// using destructuring to extract values
const {name,color,age} = π;
console.log(name); // sharron
console.log(color); // black
console.log(age); // age
const heros = ['iron man', 'super man', 'spider man'];
const [hero1, hero2, hero3] = heros;
console.log(hero1); // "iron man"
console.log(hero2); // "super man"
console.log(hero3); // "spider man"
Let me know in comment section if you have any doubt or feedback. it's always worth to give time to the thriving developer community :)
Keep Coding β€
Top comments (5)
You could also write your sum function like that:
Nice idea ! reduce, map and bind are being written in upcoming article :)
Nice job on this entire series.
Great, concise!
Respecting everyone's time is great thing to do π