How to Pass Array to a Function in JavaScript

1. Use the apply() Method to Pass an Array to a Function in JavaScript
2. Use the spread Operator to Pass an Array to a Function in JavaScript
3. Use the arguments Object to Pass an Array to a Function in JavaScript

This tutorial aims to teach you the different ways of passing an array to a function using JavaScript. It highlights the apply() method, spread operator, arguments object, and the way to pass an entire array to a function as a parameter.

The apply() method executes a function with this value and gives arguments as an array or array-like object. It is used on a particular function that has to be passed.

In the apply() method, this value is the first parameter that calls to the function, and arguments are the second with the array of arguments to be passed.

Remember, if this value cannot be the original value seen by a function (if the method is a function in non-strict mode code). The global object will be null and undefined, while primitive values will be boxed.

ECMAScript 6 (ES6) provides an amazing operator named spread. It is written as ... within the JavaScript code. This operator allows iterable, for instance, arrays. It is used to process all the array elements or an object.

On the other hand, the arguments object is an array-like (means the arguments have the length property) object that we can use within the function that has the arguments’ values.

Use the apply() Method to Pass an Array to a Function in JavaScript

var names = ['Mehvish', 'John', 'Henry', 'Thomas'];
displayName.apply(this, names);

function displayName() {
  for (var i = 0; i < names.length; i++) {
    console.log(names[i]);
  }
}

Output:

"Mehvish"
"John"
"Henry"
"Thomas"

In the example given above, we have an array of names and a function named displayName() to print all elements of the names array. We use apply() method to pass an array to displayName() function.

Use the spread Operator to Pass an Array to a Function in JavaScript

var names = ['Mehvish', 'John', 'Henry', 'Thomas'];
displayName(...names);

function displayName() {
  for (var i = 0; i < names.length; i++) {
    console.log(names[i]);
  }
}

Output:

"Mehvish"
"John"
"Henry"
"Thomas"

Here, we have the names array and displayNames() function again to print all array elements. We use the spread syntax ... to pass the whole array to the function.

Use the arguments Object to Pass an Array to a Function in JavaScript

var names = ['Mehvish', 'John', 'Henry', 'Thomas'];
displayName(names);

function displayName() {
  for (var i = 0; i < arguments.length; i++) {
    console.log(arguments[i]);
  }
}

Output:

["Mehvish", "John", "Henry", "Thomas"]

In the code snippet given above, we use the arguments object to pass the names array to displayName() function. We can pass the entire array to the function as an argument to simplify the code.

For this, you can practice the following code.

var names = ['Mehvish', 'John', 'Henry', 'Thomas'];
displayName(names);

function displayName() {
  for (var i = 0; i < names.length; i++) {
    console.log(names[i]);
  }
}

Output:

"Mehvish"
"John"
"Henry"
"Thomas"