Rest Parameter and Spread Operator in JavaScript

The Rest Parameters and Spread Operator are some of the great features that come with ES6 and make life easy for JavaScript users.

It is now relatively easy and interesting to group parameters and merge multiple objects or arrays.

Now, let's dive deeper.

Spread Operator (...)

Three dots (...) before an iterable( array or string ) denotes what we call "The Spread Operator".

It is used to unpack the elements or properties of an object or array and list them one by one from the beginning to the end within another array or object.

Merging two or more arrays or objects

We can merge two arrays or objects with the use of the spread operator as in:

Array example

let eProductPrices = ["$10", "$23", "$40"];

let physicalProductPrices = ["$70", "$80", "$100"];

let prices = [...eProductPrices, ... physicalProductPrices]

We have merged the arrays.

Object example

let gadgetsQuotation = {phone: "$1000", laptop: "$2000"};

let otherQuotation= { banana: "$300", massage: "$390"};

let quotations = {...gadgetsQuotation,...otherQuotation};

Yeah! We have merged two objects into a new one.

Coping elements of an array or object to another

Hey, wait!

I want to ask you a stupid question because there is a sense in nonsense.

I want to copy all the elements of an array called "firstNumberList" to another array called "secondNumberList".

How can I do that with the spread operator?

Never mind! Check below:

Array example

let firstNumberList = [1, 2, 3, 4];
let secondNumberList = [ ...firstNumberList ]

console.log( secondNumberList ) // [1, 2, 3, 4];

Object example

let schoolProperties = { cheap: true, position: "1st"};
let properties = {...schoolProperties};

console.log(properties) // { cheap: true, position: "1st"};

We use the spread operator to copy the properties of the "schoolProperties" to "properties". So, they now have similar elements.

Using the spread operator in a function call.

Sometimes, we may have an array or object we want to pass its elements or properties as parameters to a function one by one. In that case, we can use the spread operator as in:

let multiplyThreeNumbers = (firstNumber, secondNumber, lastNumber) => firstNumber * secondNumber * lastNumber;

In the above code, multiplyThreeNumbers takes three parameters and it multiplies them.

It is possible to spread the elements of the "numbers" array as the arguments to multiplyThreeNumbers as in:

Array example

let numbers = [1, 2, 3]
multiplyThreeNumbers( ...numbers); //6

Object example

let numbers = {firstNumber: 1, secondNumber: 2, lastNumber: 3}
multiplyThreeNumbers( ...numbers);// 6

In short, we can use the spread operator to spread the elements of an array or properties of an object as arguments to call a function.

Yeah! You can spread everywhere

let numbers = [1, 2, 3, 4];

//At the beginning:
let spreadAtTheBeginning = [...numbers, 5, 6];
console.log(spreadAtTheBeginning) // [1,2,3,4,5,6]

//At the middle
let spreadInTheMiddle = [5, ...numbers, 6];
console.log(newNumbers) // [5, 1, 2, 3, 4, 6]

//At the end
let spreadAtTheEnd = [5, 6, ...numbers]
console.log(spreadAtTheEnd) // [5, 6, 1, 2, 3, 4]

In short, you can use the spread operator at the beginning, middle and end of an array or object.

The Rest Operator (...)

The rest operator gathers the remaining parameters or elements into an array.

Packing remaining parameters with the rest operator

Parameters can be passed into a function as in:

let add3 = ( firstNumber, secondNumber, thirdNumber) => firstNumber + secondNumber + thirdNumber; 

Sometimes, we may want to pack all parameters of a function to an array for some reasons, then we can use the rest operator to pack the parameters into an array as in:

let add3 = (...theRest) => theRest.reduce( (accum, oneOfTheRest) => {
   console.log(theRest); 
   return accum + oneOfTheRest;
});

console.log(add3(4, 5, 6)) // 

"...theRest" packs parameters passed to the function into an array and that is why we can easily use reduce on it as in above example.

Before the introduction of es6, I did use "arguments" in place of the rest parameters as in:

function add3() { console.log(arguments) }

add(4,5,6); // 

Yeah! It works.

Hey, wait! There is a problem.

The array created with the arguments keyword is an array-like object. That is to say, it is not really an array because it doesn't have all the array methods.

So, we cannot do:

function add3() { 
   arguments.reduce( function(accum, oneOfTheRest){
   console.log(theRest); // [4, 5, 5] 
   accum + oneOfTheRest;
  }
}

add(4,5,6); // Uncaught TypeError: arguments.reduce is not a function

Oops! You can't do that.

Also, the fat arrow function (=>) doesn't have the arguments keywords. That means "arguments" is not available in the fat arrow function.

Let's see how it goes:

let multiply = () => console.log(arguments);

multiply()//Uncaught ReferenceError: arguments is not defined

Oops! It is not accessible just like the air of "yesteryears".

Defining some parameters before the rest parameters

When creating a function, we can pass some parameters before using the rest operator as the last parameter as in:

let merge = (firstNumber, ...theRest) => [firstNumber, theRest];

console.log(merge(2,3,4,5,6)); [2, [3, 4, 5, 6]];

"firstNumber" is an element on it own but other arguments are packed into an array as we can see in the above example.

The rest(...) always come alone or last

"The rest always come alone or last" is a statement to remember we only use the rest parameters alone or last.

What will happen if it doesn't come alone or last?

See it for yourself as in:

let subtract = (first, ...second, third) => console.log(second);

subtract(1,2,3,4) //Uncaught SyntaxError: Rest parameter must be last formal parameter

Oops! It doesn't work.

Hey, trust me, I am lying.

Oh! Sorry, trust me, I am right.

The rest as an operator in destructuring

The rest (...) can be used as an operator in destructuring as in:

let [first, second, ...theRest] = [ 1, 2, 3, 4, 5, 6];

console.log(theRest) // [3, 4, 5, 6]

That is it.

The rest and spread operator make it easy to deal with parameters and variables in JavaScript.

Hoooooooooooorrah!

See you in the next lessons.

One more thing

Are you having difficulties to learn and understand JavaScript and build projects with it? JavaScript for a Total Novice teaches JavaScript and Project Making Fundamentals with simple illustrations and examples that make everything so easy. You can now handle any difficult projects without fear.

Don't trust me, get a free previous to judge by yourself: https://bit.ly/3o3TMyg