Rest Operator – What Is a JavaScript Rest Parameter?
The rest operator is used to put the rest of some 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.
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.
You can use the rest operator only before the last parameter of a function definition.
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 put 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. A visual representation is shown below.
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"]
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"
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"]
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.
Learn Flexbox with Images
How the Rest Operator Work in a Destructuring Assignment
The rest operator typically gets used as a prefix of the destructuring assignment'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"]
The rest operator (...) instructs the computer to put 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. A visual representation is shown below.
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"}
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, we can move on to the spread operator article to see how rest compares with spread.
Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.
Tweet this article