Rest parameters and Spread syntax

Pranchal Agrahari
Last Updated: May 13, 2022

Introduction

Javascript is one of the most used programming languages, and nearly 95% of websites use javascript. Javascript has plenty of features that help developers to handle and manipulate the data.

Arrays are one of the most used data structures in javascript, so most of the time, you, as a javascript developer, would be handling the data in arrays. To ease the data handling and manipulation, rest parameters and spread syntax were introduced in ES6.

In this blog, we will be discussing rest parameters and spread syntax in detail, along with some examples. 

Rest Parameters

Rest parameter is an effective and enhanced way to handle the parameters. It allows us to handle the parameters of a function easily. The rest parameters allow us to handle and represent the indefinite input as an array. With the use of rest parameters, a function can be called with any number of arguments 

Syntax:

function fun(...parameters) //... is the rest parameters
{

}

To understand the rest parameters in detail, let’s take a look at an example to add numbers without rest parameters and with rest parameters.

//without rest parameters

function add(a,b)
{
    return a+b;
}
console.log(add(1,2)); //3
console.log(add(1,2,3,4,5)); //3

One thing to note in the above code is that it will not throw any error even when we are passing arguments more than what is defined in the function signature, but the first two arguments would be taken, and the code will execute. While with the use of rest parameters, any number of arguments can be taken, and we can do what we want.

//with rest parameters

function add(...input)
{
    let sum=0;
    for( let i of input)
    {
        sum=sum+i;
    }

    return sum;
}
console.log(add(1,2)); //3
console.log(add(1,2,3,4,5)); //15

Using the rest parameters, we are able to get the sum of any arbitrary number of input parameters.

But one important point to keep in mind while using rest parameters is the rest parameter must be the last argument of function as its work is to collect all the remaining parameters.

For example, the following code will throw an error on execution.

// function will throw error
function fun(a,...b,c){
    console.log("Wrong function defination");
}

fun(1,2,3,4,5);

Spread syntax

The spread syntax allows an array or a string to expand in the places where zero or more than zero arguments are expected. In simple words, if you have an array or string, then you can spread them into the function call with the help of spread syntax. Spread syntax also has the same notation of three dots( … ). It might look similar to the rest parameter, but it is the opposite.

Whenever we use ...arr it expands the arr to the list of arguments.

For example

let arr=[1,6,3,7];
console.log(Math.max(...arr)); // 7

The same can also be done without the use of spread, but to achieve this, we need to use a loop to iterate over and find max.

We can also pass different iterable as well

let arr=[1,6,3,7];
let arr1=[1,2,3,10];
console.log(Math.max(...arr,...arr1)); // 10

We can integrate the spread syntax with the normal values also.

let arr=[1,6,3,7];
let arr1=[1,2,3,10];
console.log(Math.max(11,...arr,18,...arr1,20)); // 20

It requires a lengthy code to merge two arrays, but with the help of spread syntax, it can be achieved in a single line.

let arr=[1,6,3,7];
let arr1=[1,2,3,10];
let merged=[...arr,...arr1];
console.log(merged)//1,6,3,7,1,2,3,10

Important points

We have gone through both rest parameters and spread syntax, and gone through different examples to understand it better. Rest parameters and spread syntax can be a bit confusing as both seem to be similar, but rest parameters and spread syntax are entirely opposite of each other. Rest parameters and spread syntax have a similar notation of three dots … To understand the difference between rest parameters and spread syntax, we would discuss some points to clarify your confusion.

The easy way of distinguishing between rest parameters and spread syntax is as follows.

  • Whenever the three dots(...) are at the end of function parameters, it’s rest parameters.
  • Whenever three dots(...) are in a function call, it is spread syntax that expands an array into a list of arguments.

Frequently asked questions

  1. What is the difference between rest parameters and spread syntax?
    Rest parameters and spread syntax might seem similar but are completely opposite. Spread syntax expands an array into elements, whereas the rest parameter condenses multiple elements into a single element.
     

2. How to merge two arrays using spread syntax?
We can merge two arrays using the following code.

let arr=[1,6,3,7];
let arr1=[1,2,3,10];
let merged=[...arr,...arr1];
console.log(merged)//1,6,3,7,1,2,3,10

Key Takeaways

The article discussed the rest parameters and spread syntax. We discussed rest parameters and spread syntax in detail, along with examples. At the end of the article, we have gone through some of the frequently asked questions.

You may check out Full Stack Web Development Course — Node.js + HTML/CSS/JS on Coding Ninjas

If you are preparing for the next interview, check out the blogs 15 Most Frequently Asked React JS Interview Questions and 10 Best ReactJS Interview Questions. And if you are a beginner, check out the Top 5 skills to learn before you start with ReactJs to know the prerequisites to learn React.

If you are preparing for your DSA interviews then , Codestudio is a one-stop destination. This platform will help you acquire effective coding techniques and give you an overview of student interview experience in various product-based companies.

Happy learning!

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think