ES6 added a lot of cool features to JavaScript. The Rest
and Spread
operators are powerful new features that allow us to access and manipulate data easily.
The word Rest
here simply means gathering up parameters and putting them all into a single array.
Also, the word Spread
refers to spreading out the elements of an iterable (arrays, objects and strings).
They both make use of the three dots ...
but apply it differently to suit their purpose.
In this post, we'll learn about the Rest
and Spread
operators, how to use them and when to use them.
Table of Content:
- Rest Operators
- Spread Operators
- Summary
Rest Operators
As we stated earlier, The Rest
operators gather up parameters and put them all in a single array.
It makes use of the ...
symbol which precedes a named parameter that will become an array that will just gather up the remaining parameters passed to a function. See the following example:
function showNames(...names){
console.log(names);
}
showNames("Runo","Tega","Ejiro") // ["Runo","Tega","Ejiro"]
In the example above, the rest parameter
is names
which is preceded by a ...
to denote that names
is indeed a rest parameter
. When the function is invoked the console prints the value of names
as ["Runo","Tega","Ejiro"]
which is an array created by gathering all the arguments passed into the, into the showNames
functions.
When You Should Use the Rest Operators
The rest operators
can be very useful when you need to create function definitons that can accept unlimited number of parameters, let's see an example:
function add(a, b){
return console.log(a + b);
}
add(1,2); // 3
add(1, 2, 3, 4, 5); //3
The first function call, add(1,2)
returns 3. This is quite normal and straight forward, but what if you needed to pass in more arguments to your function to help you add more than 2 parameters?
After invoking the next add
function which is add(1, 2, 3, 4, 5)
we'll still get 3
because in JavaScript you can call a function with any number of arguments but the number of arguments that will be used depends on the number of parameters specified in the function definition.
In this case, only 2 parameters are specified. Hence, Javascript picks up the first 2 arguments.
Rest parameters to the rescue
With the rest parameters
we can gather any number of arguments into an array and do whatever you want with them. We can use array methods like higher-order functions like forEach(), map(), reduce()
.
Using rest parameters, we can rewrite the add function like this:
function add(...rest){
let total = 0;
rest.forEach(num => total += num);
return console.log(total);
}
add(1,2); //3
add(1, 2, 3); //6
add(1, 2, 3, 4, 5, 6);//21
By doing so, we have succeeded in making our function flexible and adaptable to accept as much arguments as possible because the rest parameter will gather them up in an array and we make good use of the forEach()
method to iterate over each element in the array add it to the total
variable.
Note: If you need to specify a parameter (or parameters) alongside a rest parameter
, ensure that the rest parameter is last in your function definition.
function allNames(name1, ...name2, name3){
console.log(name2); // Error!
}
allNames("Runo", "Tega", "Ejiro", "Simi", "Gare");
Please DON'T DO this, it doesn't make any sense to JavaScript. The rest parameters
job is to gather the excess arguments that will be passed into a function. This function should be rewritten like so:
function allNames(name1, name2, ...name3){
console.log(name2); // Tega
console.log(name3); // ["Ejiro", "Simi", "Gare"];
console.log(name3.length); // 3
}
allNames("Runo", "Tega", "Ejiro", "Simi", "Gare");
It's also important to know that the length property
of functions ignores the rest parameters
, lets see what we'll get if we try to find the length of the allNames
function:
function allNames(name1, name2, ...name3){
console.log(name2); // Tega
}
console.log(allNames.length) // 2
Spread Operators
The spread operator
simply does the opposite of what the rest operator does, it unpacks an array.
The spread operator
can be used with other iterable data types like strings and objects.
The spread operator
is applied in the following scenarios:
When you need to copy an array
let arr = ["a", "b", "c"];
let newArr = [...arr];
console.log(newArr) // ["a", "b", "c"]
Its that's easy, all you need to do is to add a preceding ...
to an existing array and it simply removes all the values from the array.
Adding array elements to another array
const arr = ["a", "b"];
const newArr = [...arr, "c", "d"];
console.log(newArr) //["a", "b", "c", "d"]
The values of arr
is transferred to newArr
.
Splitting Strings
let name = 'Runo';
console.log(...name) // 'R' 'u' 'n' 'o'
Merge Objects
const obj1 = {
name: "Runo"
}
const obj2 = {
age: 19
}
const obj3 = {
...obj1,
...obj2
}
console.log(obj3) // {name: "Runo", age: 19}
Summary
The rest operator
stores the remaining data passed into a function in an array. In other words, it creates a new array. On the other hand, The spread operator
simply works with an existing array or iterable like strings and objects, It's commonly used in modern frameworks like ReactJs
to copy data from state
.
I hope this helps someone, Happy Coding fam!
Top comments (0)