Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
Example of spread in destructuring:
const [x, y, ...z] = [1, 2, 3, 4, 5] // x = 1, y = 2, 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: Basic Spread in Function Arguments
Here we show how to use the spread operator to pass array elements as individual function arguments:
<!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) // Spreads array elements as individual arguments
</script>
</body>
</html>
first second third
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].
Example 2: Rest Parameters with Spread
The spread operator can be used to handle cases where only some part of the iterable list is useful, and the rest can be captured using rest parameters:
<!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.join(", ")
}
var arr = ["first", "second", "third", "fourth"]
print(...arr)
</script>
</body>
</html>
first second, third, fourth
Only the first element is assigned to parameter 'f', and the rest of the elements are collected into the 'rest' array using the rest parameter syntax. This provides utility for handling cases where we don't know the upper bound of the iterable size.
Example 3: Concatenating Arrays with Spread
Here we create two separate lists of strings and use the spread operator to concatenate the arrays 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.slice(0, -2); // Remove last comma
}
var arr = ["first", "second", "third", "fourth"]
var rest = ["fifth", "sixth", "seventh"]
print([...arr, ...rest]) // Concatenates both arrays
</script>
</body>
</html>
first, second, third, fourth, fifth, sixth, seventh
Here we pass 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 array that acts as a single complete argument.
Key Benefits
The spread operator provides several advantages:
- Creates shallow copies of arrays without mutating the original
- Allows flexible function parameters with variable argument counts
- Simplifies array concatenation and manipulation
- Works with any iterable (arrays, strings, sets, etc.)
Conclusion
The Spread operator is a powerful feature for handling arrays and iterables in function arguments. It simplifies parameter passing, enables flexible function signatures with rest parameters, and provides clean array concatenation. While it works excellently for single-dimensional arrays, be aware of its shallow copy behavior with nested structures.
2K+ Views
