JS Interview #5— Rest vs Spread Operator

Rest vs Spread Operator

JavaScript uses three dots (...) for both the rest and spread operators. But these two operators are not the same.

ES6 Introduce the Rest and Spread operators. which eases the work of developers.

Rest Operator

The rest operator (...) allows us to call a function with any number of arguments.

function showName(firstName, ...titles) {
    console.log(firstName); // Mighty
    // the rest go into titles array
    console.log(titles[0]); // Ghost
    console.log(titles[1]); // Hack
    console.log(titles.length); // 2
}

showName("Mighty", "Ghost", "Hack");

In the above example, we used the rest operator to pass n number of arguments, which can be accessed inside an array of title variables.

The rest Operator cannot be called at the beginning of the parameter, it must be called at the end only.

Before ES6, if we want to implement such a scenario then we used The “arguments” variable.

function showName() {
    console.log(arguments.length);
    console.log(arguments[0]); 
    console.log(arguments[1]);

    // it's iterable
    for(let arg of arguments) console.log(arg);
}

// shows: 2, Mighty, Ghost
showName("Mighty", "Ghost");

// shows: 1, Mighty, undefined (no second argument)
showName("Mighty");

The Problem with the “arguments” variable.

1. it’s not an array. It does not support array methods, it returns an object.
2. it always contains all arguments. We can’t capture them partially.

Spread Operator

The spread operator will allow you to split an array into single arguments.

A spread operator is effective only when used within array literals, function calls, or initialized properties objects.

function showName(nameOne, nameTwo, nameThree) {
    console.log(nameOne); // Mighty
    console.log(nameTwo); // Ghost
    console.log(nameThree); // Hack
}

let channelName = ["Mighty", "Ghost", "Hack"];

showName(...channelName);

In the above example, we used the spread operator to spread the channelName array’s content across showName function parameters.

if the channelName array had more than three items. In such a case, the computer will only use the first three items as showName() function arguments and ignore the rest.

Spread operator with Array

const channelName = ["Mighty", "ghost", "hack"];
const action = ["Subscribe", "to", ...channelName, "youtube", "channel."];

console.log(action); 
// [ 'Subscribe', 'to', 'Mighty', 'ghost', 'hack', 'youtube', 'channel.' ]

Here the spread operator simply copied and pasted channelName content into action without creating any reference back to the original array.

Spread operator with Object

const channelName = { "first": "Mighty", "second": "ghost", "third": "hack" };
const action = { ...channelName, "actionOne": "youtube", "actionTwo": "channel." };

console.log(action);

Similarly, here we simply copied and pasted object content into another object without creating any reference.

Key Points to remember

• There must be only one rest operator in javascript functions.
• There can be more than one spread operator in javascript functions.
• The rest parameters must be at the end.
• You cannot use the arguments variable in an arrow function.
• It is best to use rest parameters instead of the arguments object — especially while writing ES6-compatible code.
• The “arguments” variable is an optional value in functions.
• You Cannot Use “use strict” Inside a Function Containing a Rest Parameter
• The spread operator does not clone identical properties.

To understand in a much better way here is the video link