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 pass arrays as function arguments in JavaScript?
In JavaScript, you can pass arrays as function arguments using two main approaches: the traditional apply() method and the modern ES6 spread operator (...). The spread operator is now the preferred approach as it provides cleaner, more readable code.
Using apply() Method (Traditional)
The apply() method was the traditional way to pass array elements as individual arguments to a function. It requires two parameters: the context (this value) and the array of arguments.
Syntax
functionName.apply(thisContext, arrayOfArguments)
Example
<html>
<body>
<script>
function displayMarkets(market1, market2, market3) {
document.write(market1);
document.write("<br>");
document.write(market2);
document.write("<br>");
document.write(market3);
}
var markets = ['NSE', 'BSE', 'NIFTY'];
displayMarkets.apply(null, markets);
</script>
</body>
</html>
NSE BSE NIFTY
Using Spread Operator (Modern ES6)
The spread operator (...) provides a cleaner and more intuitive way to pass array elements as individual arguments. It eliminates the need for apply() and the unnecessary null context.
Example
<html>
<body>
<script>
function displayMarkets(market1, market2, market3) {
document.write(market1);
document.write("<br>");
document.write(market2);
document.write("<br>");
document.write(market3);
}
var markets = ['NSE', 'BSE', 'NIFTY'];
displayMarkets(...markets);
</script>
</body>
</html>
NSE BSE NIFTY
Practical Example with Math Functions
A common use case is finding the maximum or minimum value from an array:
<html>
<body>
<script>
var numbers = [15, 8, 23, 42, 7];
// Using spread operator
var max = Math.max(...numbers);
var min = Math.min(...numbers);
document.write("Maximum: " + max + "<br>");
document.write("Minimum: " + min);
</script>
</body>
</html>
Maximum: 42 Minimum: 7
Comparison
| Method | Syntax | Readability | ES6 Support |
|---|---|---|---|
apply() |
func.apply(null, array) |
Less readable | Not required |
| Spread operator | func(...array) |
More readable | Required |
Conclusion
The spread operator (...) is the modern and preferred way to pass arrays as function arguments in JavaScript. It provides cleaner syntax and better readability compared to the traditional apply() method.
4K+ Views
