JavaScript’s Spread Operator or Amazing 3 Dots
Unlike ES5, ES6 is not just a modest set of new APIs added to the language. ES6 is a radical jump forward for the language. It includes a lot of new syntactic forms, some of which may take quite a bit of getting used to.
ES6 introduced a new ...
operator that's typically referred to as the spread or rest operator, depending on where/how it's used. Let's take a look.
Rest Parameters
Rest
parameters collect all the remaining elements into an array which allows us to do really elegant function definitions:
function add(a, b) {
return a + b;
}add(1, 3, 5, 7, 9) //returns 4
The function call above returns 4
as in JavaScript it is possible to call a function with any number of arguments. However, only the first two arguments will be counted.
With rest
parameters, we can gather any number of arguments into an array. So the add
function can be rewritten like this:
Rest
parameters have to be at the last argument because it collects all remaining arguments into an array, so a function definition like this will error out:
function abc(a, ...b, c) {
...
return;
}//Uncaught SyntaxError: Rest parameter must be last formal parameter
We can separately define the first arguments, and the rest of the arguments in the function call (no matter how many they are) will be collected into an array by the rest
parameter:
Since the rest
parameter gives us an array, we can use array methods like Array.find
, Array.map
, etc.
Arguments keyword
Before rest
parameters existed, to get all the arguments in a function, arguments
were used:
function perlFunction() {
return arguments;
}perlFunction("perl", 1987, true)
perlFunction
returns the arguments and their indexes: [Arguments] { 0: "perl", 1: 1987, 2: true }
.
There are two main disadvantages of using the arguments
keyword:
- It returns an array-like object. This means any array methods like
Array.filter
orArray.map
cannot be performed. arguments
cannot be used in arrow functions. This is because arrow functions do not have their ownthis
and, therefore, noarguments
object either.
Spread Operator
The spread
operator allows us to expand elements. With rest
parameters, we can get a list of arguments into an array. Spread
operators, however, let us unpack elements in an array to single/individual arguments.
Some scenarios where this capability is useful include:
Adding array elements to an existing array
const array = ["Bill", "Steven", "Dan"];
const newArray = ["Bjarne", ...array];
The value of newArray
will be ["Bjarne", "Bill", "Steven", "Dan"]
.
Unlike rest
parameters, you can use the spread
operator as the first argument. So if you need to add an element as the last element in your array, you can do this:
const names = [...array, "Bjarne"];
The value of names
in this case will be ["Bill", "Steven", "Dan", "Bjarne"]
.
Copying arrays
We can use the spread operator
to copy an array. This copies array
into array2
:
const array = [1, 2, 3];
const array2 = [...array];
Now we can do things on array2
, and any changes done to array2
will not have any effect on array
.
Pass elements of an array to a function as separate arguments
If we had an array that we wanted to pass as a list of arguments in a function, we would use the spread
operator. Let's reuse our add
function:
The add
function call is similar to doing this: add(1, 3, 5)
.
We used arrays to demonstrate the spread
operator, but any iterable also works. So, if we had a string const str = "Bjarne"
, [...str]
translates to [ "B", "j", "a", "r", "n", "e"]
.
Conclusion
...
could be used to represent either a spread
operator or a rest
parameter. It entirely depends on how we use it, thus, depending on the context in which we use the three dots, it is easy to tell whether we are using it as a rest
parameter or as a spread
operator.
- When
...
is at the end of function parameters, it’s arest
parameter and gathers the rest of the list of arguments into an array. - When
...
occurs in a function call or something similar, it’s called a “spread syntax” and expands an array into a list.
Use patterns:
Rest
parameters are used to create functions that accept any number of arguments.- The
spread
syntax is used to pass the value of an array to functions that normally require a list of many arguments.
Rest
parameters and Spread
syntax work in the opposite direction. But together they help to travel between a list and an array of parameters with ease. They offer a lot of benefits to using them making the code more readable.