JavaScript with Uses of ES6 Spread Operator

JavaScript with Uses of ES6 Spread Operator

JavaScript ES6 (ECMAScript 6) introduced the spread operator. It expends the array in individual elements. The syntax is three-dot(...) before the item you want to spread.

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 [email protected]. 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 [email protected]. 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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

Data Types In JavaScript

JavaScript data types are kept easy. While JavaScript data types are mostly similar to other programming languages; some of its data types can be unique. Here, we’ll outline the data types of JavaScript.

JavaScript Memory Management System

The main goal of this article is help to readers to understand that how memory management system performs in JavaScript. I will use a shorthand such as GC which means Garbage Collection. When the browsers use Javascript, they need any memory location to store objects, functions, and all other things. Let’s deep in dive that how things going to work in GC.

Create a Line Through Effect with JavaScript

In this post we are going to create an amazing line through effect, with help of CSS and lots of JavaScript. So, head over to your terminal and create a folder LineThroughEffect. Create three files -index.html, main.js and styles.css inside it.

Grokking Call(), Apply() and Bind() Methods in JavaScript

In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.