The following are the very common uses by which you can improve the coding and make the task in a very short way.
1. Copy
An array can be easily copied with spread operator as shown below. Earlier Array.prototype.slice was used to copy an existing array.
Without spread operator
let fruits = ['Banana', 'Apple', 'Orange'];
let newFruits = fruits.slice();
With spread operator
let countries = ['England','Australia','Brazil'];
let newCountryArray = [...countries];
console.log(newCountryArray); // ['England','Australia','Brazil']
2. Concat
concat() is used to concat two array, You can also use spread operator for the same task.
Without spread operator
let array1 = ['one', 'two', 'three'];
let array2 = ['four', 'five', 'six'];
array1 = array1.concat(array2);
console.log(array1); // ['one', 'two', 'three','four', 'five', 'six']
With spread operator
let array1 = ['one', 'two', 'three'];
let array2 = ['four', 'five', 'six'];
array1 = [...array1, ...array2];
console.log(array1); // ['one', 'two', 'three','four', 'five', 'six']
3. Add elements into Array / Spreading elements together with an individual element
There are methods like push and unshift which normally use to add an element at the end and beginning of the array. The same task can be performed with Spread operator:
Without spread operator
// Adding element at the end of the array
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
console.log(fruits); // ["Banana", "Orange", "Apple", "Mango", "Kiwi"]
// Adding element at the beginning of the array
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Kiwi");
console.log(fruits); // ["Kiwi","Banana", "Orange", "Apple", "Mango"]
With spread operator
// Adding element at the begining of the array
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits = ['Kiwi', ...fruits]; // can also assign to new array
console.log(newFruits); // ["Kiwi","Banana", "Orange", "Apple", "Mango"]
// Adding element at the begining of the array
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits = [...fruits, 'Kiwi']; // can also assign to new array
console.log(newFruits); // ["Banana", "Orange", "Apple", "Mango","Kiwi"]
4. Math
You can also use math functions with the spread operator. Let’s have an example of Math function:
Math.max(50, 30, 40);
// will output 50
Without spread operator
For performing the same task on an array below is the way:
let arr = [20, 60, 90, 30, 10];
function max(arr) {
return Math.max.apply(null, arr);
}
console.log(max(arr)); // output will be 90
With spread operator
let arr = [10, 30, 20, 80, 60,100];
let max = Math.max(...arr);
console.log(max); // output will be 100
5. Spread elements on function calls
Without spread operator
let fruits = ['Banana','Orange','Apple'];
let getFruits = (arg1, arg2, arg3) => {
console.log(Fruits: ${arg1}, ${arg2} and ${arg3}); };
With spread operator
let fruits = ['Banana','Orange','Apple'];
getFruits(...fruits); // Fruits: Apple, Orange and Banana
6. Convert String to Array
A string can also be converted to an array with spread operator.
Without spread operator
let str = 'fruits';
console.log(str.split('')); //will output ["f", "r", "u", "i", "t", "s"]
With spread operator
let str = "fruits";
let newStr = [...str];
console.log(newStr); // will output ["f", "r", "u", "i", "t", "s"]
Conclusion
Use of spread operator makes the task easier and shorter. ES6 has made JavaScript more efficient than earlier.
Click here to see Node.js Sample Application to get started for enterprise-level application.
Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.
Thank You!
Recommended Reading
☞ An Introduction to Test-Driven Development in JavaScript
☞ How to deploy your Vue app with Netlify
☞ The React Cookbook: Advanced Recipes to Level Up Your Next App
☞ 5 useful JavaScript array functions
☞ Firebase login functionality from scratch with React + Redux
☞ Iterators, Generators and Iteration Protocol in Javascript
☞ Top 10 Tips For New Vue.js Developers
☞ MEVN Stack Tutorial With Example From Scratch
☞ React.js Firebase Tutorial: Building Firestore CRUD Web Application
The following are the very common uses by which you can improve the coding and make the task in a very short way.
1. Copy
An array can be easily copied with spread operator as shown below. Earlier Array.prototype.slice was used to copy an existing array.
Without spread operator
let fruits = ['Banana', 'Apple', 'Orange'];
let newFruits = fruits.slice();
With spread operator
let countries = ['England','Australia','Brazil'];
let newCountryArray = [...countries];
console.log(newCountryArray); // ['England','Australia','Brazil']
2. Concat
concat() is used to concat two array, You can also use spread operator for the same task.
Without spread operator
let array1 = ['one', 'two', 'three'];
let array2 = ['four', 'five', 'six'];
array1 = array1.concat(array2);
console.log(array1); // ['one', 'two', 'three','four', 'five', 'six']
With spread operator
let array1 = ['one', 'two', 'three'];
let array2 = ['four', 'five', 'six'];
array1 = [...array1, ...array2];
console.log(array1); // ['one', 'two', 'three','four', 'five', 'six']
3. Add elements into Array / Spreading elements together with an individual element
There are methods like push and unshift which normally use to add an element at the end and beginning of the array. The same task can be performed with Spread operator:
Without spread operator
// Adding element at the end of the array
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
console.log(fruits); // ["Banana", "Orange", "Apple", "Mango", "Kiwi"]
// Adding element at the beginning of the array
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Kiwi");
console.log(fruits); // ["Kiwi","Banana", "Orange", "Apple", "Mango"]
With spread operator
// Adding element at the begining of the array
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits = ['Kiwi', ...fruits]; // can also assign to new array
console.log(newFruits); // ["Kiwi","Banana", "Orange", "Apple", "Mango"]
// Adding element at the begining of the array
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits = [...fruits, 'Kiwi']; // can also assign to new array
console.log(newFruits); // ["Banana", "Orange", "Apple", "Mango","Kiwi"]
4. Math
You can also use math functions with the spread operator. Let’s have an example of Math function:
Math.max(50, 30, 40);
// will output 50
Without spread operator
For performing the same task on an array below is the way:
let arr = [20, 60, 90, 30, 10];
function max(arr) {
return Math.max.apply(null, arr);
}
console.log(max(arr)); // output will be 90
With spread operator
let arr = [10, 30, 20, 80, 60,100];
let max = Math.max(...arr);
console.log(max); // output will be 100
5. Spread elements on function calls
Without spread operator
let fruits = ['Banana','Orange','Apple'];
let getFruits = (arg1, arg2, arg3) => {
console.log(Fruits: ${arg1}, ${arg2} and ${arg3}); };
With spread operator
let fruits = ['Banana','Orange','Apple'];
getFruits(...fruits); // Fruits: Apple, Orange and Banana
6. Convert String to Array
A string can also be converted to an array with spread operator.
Without spread operator
let str = 'fruits';
console.log(str.split('')); //will output ["f", "r", "u", "i", "t", "s"]
With spread operator
let str = "fruits";
let newStr = [...str];
console.log(newStr); // will output ["f", "r", "u", "i", "t", "s"]
Conclusion
Use of spread operator makes the task easier and shorter. ES6 has made JavaScript more efficient than earlier.
Click here to see Node.js Sample Application to get started for enterprise-level application.
Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.
Thank You!
Recommended Reading
☞ An Introduction to Test-Driven Development in JavaScript
☞ How to deploy your Vue app with Netlify
☞ The React Cookbook: Advanced Recipes to Level Up Your Next App
☞ 5 useful JavaScript array functions
☞ Firebase login functionality from scratch with React + Redux
☞ Iterators, Generators and Iteration Protocol in Javascript
☞ Top 10 Tips For New Vue.js Developers
☞ MEVN Stack Tutorial With Example From Scratch
☞ React.js Firebase Tutorial: Building Firestore CRUD Web Application
#javascript
