/ / JavaScript Rest Operator: What Is the Rest Parameter?

JavaScript Rest Operator: What Is the Rest Parameter?

What exactly is the rest operator?

The rest operator is used to put the rest of some specific user-supplied values into a JavaScript array.

In this article, we will discuss how rest works with JavaScript functions and the destructuring assignments.

But let’s first see how the rest operator’s syntax looks.

What does the rest syntax look like?

Here is the rest syntax:

...yourValues

The three dots (...) in the snippet above symbolize the rest operator.

The text after the rest operator references the values you wish to encase inside an array. You can only use it before the last parameter in a function definition.

To understand the syntax better, let’s see how rest works with JavaScript functions.

How does the rest operator work in a function?

In JavaScript functions, rest gets used as a prefix of the function’s last parameter.

Here’s an example:

// Define a function with two regular parameters and one rest parameter:
function myBio(firstName, lastName, ...otherInfo) { 
  return otherInfo;
}

The rest operator (...) instructs the computer to encase the rest of some specific user-supplied arguments into an array. Then, assign that array to the otherInfo parameter.

As such, we call ...otherInfo a rest parameter.

The anatomy of a JavaScript rest parameter
Rest parameter = Rest operator + Regular parameter

Note

Arguments are optional values you may pass to a function’s parameter through an invocator.

Here’s another example:

// Define a function with two regular parameters and one rest parameter:
function myBio(firstName, lastName, ...otherInfo) { 
  return otherInfo;
}

// Invoke myBio function while passing five arguments to its parameters:
myBio("Oluwatobi", "Sofela", "CodeSweetly", "Web Developer", "Male");

// The invocation above will return:
["CodeSweetly", "Web Developer", "Male"]

Try it on StackBlitz

In the snippet above, notice that myBio’s invocation passed five arguments to the function.

In other words, "Oluwatobi" and "Sofela" got assigned to the firstName and lastName parameters.

At the same time, the rest operator added the remaining arguments ("CodeSweetly", "Web Developer", and "Male") into an array and assigned that array to the otherInfo parameter.

Therefore, myBio() function correctly returned ["CodeSweetly", "Web Developer", "Male"] as the content of the otherInfo rest parameter.

Beware! You cannot use “use strict”; inside a function containing a rest parameter

Keep in mind that you cannot use the “use strict”; directive inside any function containing a rest parameter, default parameter, or destructuring parameter. Otherwise, the computer will throw a syntax error.

For instance, consider this example below:

// Define a function with one rest parameter:
function printMyName(...value) {
  "use strict";
  return value;
}

// The definition above will return:
"Uncaught SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list"

Try it on CodeSandbox

printMyName() returned a syntax error because we used the “use strict”; directive inside a function with a rest parameter.

But suppose you need your function to be in strict mode while also using the rest parameter. In such a case, you can write the “use strict”; directive outside the function.

Here’s an example:

// Define a “use strict” directive outside your function:
"use strict";

// Define a function with one rest parameter:
function printMyName(...value) {
  return value;
}

// Invoke the printMyName function while passing two arguments to its parameters:
printMyName("Oluwatobi", "Sofela");

// The invocation above will return:
["Oluwatobi", "Sofela"]

Try it on CodeSandbox

Note

Only place the “use strict”; directive outside your function if it is okay for the entire script or enclosing scope to be in strict mode.

So now that we know how rest works in a function, we can talk about how it works in a destructuring assignment.

How the rest operator work in a destructuring assignment

The rest operator typically gets used as a prefix of the destructuring object’s last variable.

Here’s an example:

// Define a destructuring array with two regular variables and one rest variable:
const [firstName, lastName, ...otherInfo] = [
  "Oluwatobi", "Sofela", "CodeSweetly", "Web Developer", "Male"
];

// Invoke the otherInfo variable:
console.log(otherInfo); 

// The invocation above will return:
["CodeSweetly", "Web Developer", "Male"]

Try it on StackBlitz

The rest operator (...) instructs the computer to add the rest of the user-supplied values into an array. Then, assign that array to the otherInfo variable.

As such, you may call ...otherInfo a rest variable.

The anatomy of a JavaScript rest variable
Rest variable = Rest operator + Regular variable

Here’s another example:

// Define a destructuring object with two regular variables and one rest variable:
const { firstName, lastName, ...otherInfo } = {
  firstName: "Oluwatobi",
  lastName: "Sofela", 
  companyName: "CodeSweetly",
  profession: "Web Developer",
  gender: "Male"
}

// Invoke the otherInfo variable:
console.log(otherInfo); 

// The invocation above will return:
{companyName: "CodeSweetly", profession: "Web Developer", gender: "Male"}

Try it on StackBlitz

In the snippet above, notice that the rest operator assigned a properties object — not an array — to the otherInfo variable.

In other words, whenever you use rest in a destructuring object, the rest operator will produce a properties object.

However, if you use rest in a destructuring array or function, the operator will yield an array literal.

Before we wrap up our discussion on rest, you should be aware of some differences between JavaScript arguments and the rest parameter. So, let’s talk about that below.

Arguments vs rest parameters: What’s the difference?

Here are some of the differences between JavaScript arguments and the rest parameter:

Difference 1: The arguments object is an array-like object — not a real array!

Keep in mind that the JavaScript 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.

The rest parameter, however, is a real array object. As such, you can use all array methods on it.

So for instance, you can call the sort(), map(), forEach(), or pop() method on a rest parameter. But you cannot do the same on the arguments object.

Difference 2: You cannot use the arguments object in an arrow function

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.

Difference 3: Let rest be your preference

It is best to use rest parameters instead of the arguments object — especially while writing ES6 compatible code.

Overview

This article discussed what the JavaScript rest operator is. We also looked at how it works in a function and destructuring assignment.

Now that we know how rest works, let’s discuss the spread operator in this article so we can see the differences.

Thanks for reading!

Get Notified of the Latest Publications

Similar Posts