JavaScript:Rest vs Spread Operator

JavaScript uses three dots (...) for both the rest and spread operators.

But these two operators are not the same.

what is differtence ?

Rest operator puts the rest of some specific user-supplied values into a

JavaScript array. But the spread syntax expands iterables into individual

elements.

Using rest operator with function parameter.

Code:

function usingRestOperator(firstName, lastName, ...otherInfo) {

return otherInfo;

}

var result = usingRestOperator("santosh", "gawade", "98654534512",

"researcher", "Male");

console.log(result)

Output:

[ '98654534512', 'researcher', 'Male' ]

Explanation:

In above snippet, we used the ...otherInfo rest parameter to put

"98654534512", "researcher", and "Male" into an array.

Note:

we cannot use the “use strict” directive inside any function containing

a rest parameter, default parameter, or destructuring parameter.

Using Rest with Object:

Code:

var userObject = {

firstName: "sangram",

lastName: "desai",

city: "kankavali",

pin: "416602",

};

var {firstName,lastName,...rest} = userObject

console.log(rest)

Output:

{ city: 'kankavali', pin: '416602' }

Using Rest with Array:

Code:

var [firstName,lastName,...otherInfo]=["sangram","desai",

"9890868345","researcher","Male"]

console.log(otherInfo)

Output:

[ '9890868345', 'researcher', 'Male' ]

Spread Operator with function:

Code:

function usingSpreadOperator(firstName, lastName, company) {

return `${firstName} ${lastName} runs ${company}`;

}

// spread operator expands an array items into individual arguments:

usingSpreadOperator(...["sangram", "desai", "kankavali"]);

Explanation:

Here we are pssing array ["sangram", "desai", "kankavali"] as argument

preceeded by '...' i.e. spread operator. Effect of using spread

operator is it convert our array into individual elements.

so usingSpreadOperator(...["sangram", "desai", "kankavali"]) is

effectively same as

usingSpreadOperator("sangram", "desai", "kankavali")

argument object of function and rest operator:

With Normal Function:

Code:

function usingRestOperator(...otherInfo) {

console.log("Arguments:",arguments)

console.log("OtherInfo:",otherInfo)

}

var result = usingRestOperator(

"santosh",

"gawade",

"98654534512",

"researcher",

"Male"

);

Output:

Arguments: [Arguments] {

'0': 'santosh',

'1': 'gawade',

'2': '98654534512',

'3': 'researcher',

'4': 'Male'

}

OtherInfo: [ 'santosh', 'gawade', '98654534512', 'researcher', 'Male' ]

Explanation:

Here rest operator otherInfo & argument have same data though it is

saved bit differently.

Note:

arguments object is not a real array. Instead, it is an array-like

object that does not have the comprehensive features of a regular

JavaScript array.

With Arrow Function:

Code:

let usingRestOperator = (...otherInfo) => {

console.log("Arguments:", arguments);

console.log("OtherInfo:", otherInfo);

};

var result = usingRestOperator(

"santosh",

"gawade",

"98654534512",

"researcher",

"Male"

);

Output:

Arguments: [Arguments] {

//contain some data which not useful here

}

OtherInfo: [ 'santosh', 'gawade', '98654534512', 'researcher', 'Male' ]

Explanation:

The arguments object is not available within an arrow function,

so you can’t use it there. But you can use the rest parameter within

all functions — including the arrow function.