Spread and Rest Operator in JavaScript

JavaScript (ECMAScript) is one of the powerful scripting language which provides many features to developer. In the first place, it is the technology which makes a website lively. Not to mention, there are many ways to do a task in JavaScript. This language might not have been started with that planning, but the standards are developed every year which make it more robust. The ECMAScript standard ES6 introduced a syntax called spread operator which made many things a lot easier. Therefore, we will see the usage of spread operator in JavaScript. Furthermore, rest operator is another syntax in JavaScript, which resembles spread operator.

I also suggest you to look at this post here if you are interested in React, Router and Redux.

https://nepcodex.com/2019/07/a-guide-to-react-redux-router-latest-version/

According to MDN website:

Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

Firstly, let’s see an example to combine to arrays together.

let a = ["Pokhara", "Kathmandu"];
let b = ["Dhangadhi", "Biratnagar"];

// Merge two arrays
let c = a.concat(b);

console.log(c);

Merge using Spread Operator in JavaScript

The merging can be done using spread operator as follows:

let c = [...a, ...b];

As we can see above that, ...a and ...b generate "Pokhara", "Kathmandu" and "Dhangadhi", "Biratnagar" respectively. Similarly, the [] operator converts the spread elements sequentially to a new array c. The same applies for the objects too.

Let’s provide another example of objects. We can use spread operator to combine JavaScript objects as well. In ES6, there is a different way to do this, however we can use spread operator now.

let capitals1 = {Nepal: "Kathmandu", India: "New Delhi"};
let capitals2 = {Bangladesh: "Dhaka", Pakistan: "Islamabad"};
// Merge two objects
let capitals = Object.assign({}, capitals1, capitals2);
console.log(capitals);

Using spread operator, we can get the same result as,

let capitals = {...capitals1, ...capitals2};

In the same way, if we want to copy an array to a new array, we can do the following:

function sum(a, b) {
    return a+b;
}
let args = [5, 7];
// invoke
let argsSum = sum.apply(null, args);
console.log(argsSum);

We can replace the above function invocation with spread operator as follows:

let argsSum = sum(...args);

Rest Parameter

In this way, we can use spread operator in JavaScript. On the other hand, the rest parameter syntax allows us to represent an indefinite number of arguments as an array.

Let’s look at an example to calculate the sum:

function sum() {
    var total = 0;
    for(var i in arguments) {
        total += arguments[i];
    }
    return total;
}
totalSum = sum(2, 4, 6);
console.log(totalSum);

In the above example reduce method could also be used in the same way. You can learn about arguments object from here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments

However, we can simplify this code using rest parameters as follows:

function sum(...numbers){
    return numbers.reduce((total, currentNumber, index, numbers) => total + currentNumber, 0);
}

In conclusion, spread operator has provided many features to ease your coding life. This way, we can use spread and rest operator in JavaScript.