The three dots (...) signify both the rest and spread operators in JavaScript, their functionality depends on where they're used. These operators are used when working with arrays and objects.
What's the difference?
The rest operator is used to gather a set of values into one container, while the spread operator is used to take the values out of a container, possibly into another one. Demonstrations are given below.
Using rest and spread operators in arrays
The operators can either be used to collect values into a single array or concatenate elements from another array with another one.
Using rest in arrays
Let's look at a function that takes more than one argument, for example, say you're only interested in the first argument passed but would like to store the remaining for later:
(function(first_elem, ...remaining){
console.log(first_elem);
console.log(remaining);
})('apple', 1, 2, 3, 'mangoes');
// apple
// [1, 2, 3, "mangoes"]
all other arguments passed are now stored in an array remaining
, this technique is especially useful when you do not know the number of arguments that would be passed.
Using spread in arrays
we'll be looking at another example with an array passed as the single argument to a function, we'll use the spread operator to take all the elements out and print to the console.
const numbers = [1, 2, 3, 4, 5];
(function(single_array){
console.log(...single_array);
})(['James','Janet', ...numbers]) // spreading numbers array into this one
// James Janet 1 2 3 4 5
Notice how I used the spread operator to copy elements from the numbers
array into the single_array
. Spread is one way to merge a copy of an array or object into another.
Combining both in arrays
It's also possible to use both operators interchangeably, just be careful not to mistake one for the other, I'll indicate what operator I used where.
(function(...fruits){
const extra = ['squash', 'banana', ...fruits]; //spread
console.log(extra)
})('pinapple', 'apple', 'orange');
// ["squash", "banana", "pinapple", "apple", "orange"]
Using rest and spread operators in objects
The use cases for the spread and rest operators in objects are not different from that of arrays.
Using rest in objects
Imagine we had a large object given to us from an API response. If we wanted only the users
property from the object, we can use destructuring to take them out and save the rest in another variable.
const response = {
users: [
{
name: 'Anthony Davis',
occupation: 'athlete'
},
{
name: 'Chance the rapper',
occupation: 'artiste'
}
],
response_time: '20ms',
cached: true,
request_count: 2
}
const {users, ...metadata} = response;
console.log(metadata);
// {response_time: "20ms", cached: true, request_count: 2}
If you're not familiar with destructuring, [check out this article](theninja.blog/how-to-destructure-arrays-and.. "How to destructure arrays and objects").
Using spread in objects
We can use the spread operator to concatenate another one object with another.
Using the previous code snippet:
const response = {
users: [
{
name: 'Anthony Davis',
occupation: 'athlete'
},
{
name: 'Chance the rapper',
occupation: 'artiste'
}
],
response_time: '20ms',
cached: true,
request_count: 2
}
const {users, ...metadata} = response;
// using spread to merge both variables into one object
const merged = {users, ...metadata};
console.log(merged);
// {users: Array(2), response_time: "20ms", cached: true, request_count: 2}
To read more on them, check out this doc on MDN [here](developer.mozilla.org/en-US/docs/Web/JavaSc.. "spread and rest syntaxes ").