Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use Spread Syntax with arguments in JavaScript functions?
We use the Spread Syntax of JavaScript to expand an array, string, or object in place. Such types of values are called iterable. This is similar to destructuring the iterable in place. Its utility in a function call allows us to extract function parameters from an iterable. In this tutorial, we learn how to use Spread Syntax with arguments in JavaScript functions.
Spread operator in JavaScript
A Spread operator, denoted with (...) followed by the name of the iterable expands the iterable into its constituent elements.
e.g.
const [x, y, ...z] = [1, 2, 3, 4, 5]
This creates three variables x, y, and z. The first two values are stored in the corresponding variables. So, x = 1, y = 2, and z = [3, 4, 5].
The spread operator stores the rest of the iterable into the z variable.
It is most commonly used in function calls to expand the iterable at the time of parameter initialization.
Example 1
Here we are going to show the use of the spread operator in the function call. We will create an array of strings and pass it as a function argument for printing. Let’s look at the code for the same.
<!DOCTYPE html> <html> <head> </head> <body> <p>Spread operator in javascript:<br> <div id="result"> </div> </p> <script> function print(a, b, c) { document.getElementById("result").innerHTML = a + "<br>" + b + "<br>" + c } var arr = ["first", "second", "third"] print(...arr) </script> </body> </html>
In the above code, the variables take the corresponding values from the array. This happens in order. So a = arr[0], b = arr[1] and c = arr[2].
The spread operator can be used to handle cases in which only some part of the iterable list is useful, and the rest can be ignored. The example from the beginning emphasizes that use case.
Let us look at an example to see this use case.
Example 2
Here we are going to show the use of the spread operator in the function call. We will create an array of strings and pass it as a function argument for printing. In this example, however, we will emphasize only the first element in the list.
<!DOCTYPE html> <html> <head> </head> <body> <p>Spread operator in javascript:<br> <div id="result"> </div> </p> <script> function print(f, ...rest) { document.getElementById("result").innerHTML = f + "<br>" + rest } var arr = ["first", "second", "third", "fourth"] print(...arr) </script> </body> </html>
Only the first element is put to use, and the rest of the elements can be put into a different variable using the spread operator. This also provides us the utility of handling cases in which we have no information on the upper bound of the size of the iterable, but we know the lowest size.
The spread operator can also be used with objects. Note however that the spread operator provides an easy way to copy an iterable. This copy is separate from the original iterable, and any changes in the new copy are not reflected in the original one.
The spread operator can also concatenate iterable in the function call.
Here’s an example −
Example 3
Here we will create two separate lists of strings and use the spread operator to concatenate the two lists when calling the function.
<html> <head> </head> <body> <p>Spread operator in javascript:<br> <div id="result"> </div> </p> <script> function print(arr) { var text = ""; for(var i = 0 ; i < arr.length ; i++) text += arr[i] + ","; document.getElementById("result").innerHTML = text } var arr = ["first", "second", "third", "fourth"] var rest = ["fifth", "sixth", "seventh"] print([...arr, ...rest]) </script> </body> </html>
Here we are passing a concatenated list of the two arrays as the argument for the function call print(). The spread operator expands both lists and creates a new list that acts as a single complete argument.
Conclusion
The Spread operator is pretty useful for single-dimensional arrays or iterable but is unsuitable for multidimensional iterable. It can also be used with objects.
1K+ Views
