in JavaScript by
Q:
What is the rest parameter and spread operator?

1 Answer

0 votes
by

Both rest parameter and spread operator were introduced in the ES6 version of javascript.

Rest parameter ( … )

It provides an improved way of handling parameters of a function.

Using the rest parameter syntax, we can create functions that can take a variable number of arguments.

Any number of arguments will be converted into an array using the rest parameter.

It also helps in extracting all or some parts of the arguments.

Rest parameter can be used by applying three dots (...) before the parameters.

function extractingArgs(...args){

  return args[1];

}

// extractingArgs(8,9,1); // Returns 9

function addAllArgs(...args){

  let sumOfArgs = 0;

  let i = 0;

  while(i < args.length){

    sumOfArgs += args[i];

    i++;

  }

  return sumOfArgs;

}

addAllArgs(6, 5, 7, 99); // Returns 117

addAllArgs(1, 3, 4); // Returns 8

**Note- Rest parameter should always be used at the last parameter of a function:

// Incorrect way to use rest parameter

function randomFunc(a,...args,c){

//Do something

}

// Correct way to use rest parameter

function randomFunc2(a,b,...args){

//Do something

}

Spread operator (…)

Although the syntax of spread operator is exactly the same as the rest parameter, spread operator is used to spread an array, and object literals. We also use spread operators where one or more arguments are expected in a function call.

function addFourNumbers(num1,num2,num3,num4){

  return num1 + num2 + num3 + num4;

}

let fourNumbers = [5, 6, 7, 8];

addFourNumbers(...fourNumbers);

// Spreads [5,6,7,8] as 5,6,7,8

let array1 = [3, 4, 5, 6];

let clonedArray1 = [...array1];

// Spreads the array into 3,4,5,6

console.log(clonedArray1); // Outputs [3,4,5,6]

let obj1 = {x:'Hello', y:'Bye'};

let clonedObj1 = {...obj1}; // Spreads and clones obj1

console.log(obj1);

let obj2 = {z:'Yes', a:'No'};

let mergedObj = {...obj1, ...obj2}; // Spreads both the objects and merges it

console.log(mergedObj);

// Outputs {x:'Hello', y:'Bye',z:'Yes',a:'No'};

***Note- Key differences between rest parameter and spread operator:

Rest parameter is used to take a variable number of arguments and turns into an array while the spread operator takes an array or an object and spreads it

Rest parameter is used in function declaration whereas the spread operator is used in function calls.

Click here to read more about JavaScript
Click here to read more about Insurance

Related questions

+1 vote
asked Feb 11, 2020 in JavaScript by miceperry
0 votes
asked Dec 3, 2019 in SOAPUI by Sinaya
0 votes
asked Dec 5, 2020 in Amazon Elastic Compute Cloud(EC2) by SakshiSharma
0 votes
asked Jun 9, 2020 in C Plus Plus by Robindeniel
0 votes
0 votes
asked Dec 2, 2019 in SOAPUI by Sinaya
+1 vote
asked Dec 5, 2019 in DevOps by rajeshsharma
+1 vote
0 votes
asked Dec 3, 2019 in SOAPUI by Sinaya
...