Similar to C/C++/Java, we can pass the entire array as a parameter to a function in JavaScript. This method of array passing is called call by reference in JavaScript.
To pass an array argument to a function, simply pass the name of an array (a reference to an array) without brackets.
For example, if we have declared an array marks as:
let hourlyTemp = new Array(30);
then function call statement:
modifyArray(hourlyTemp);
passes array hourlyTemp to the function modifyArray(). JavaScript automatically passes arrays to functions using call-by-reference (or passed by reference).
Function Receiving an Array via Function Call
For a function to receive an array via a function call, you must specify a parameter in the function’s parameter list that will refer to the array in the function body.
Unlike other programming languages, JavaScript does not hand over any specific syntax for this purpose. JavaScript simply needs that the name of an array to be specified in the function parameter list.
For example, we can write the function definition for the function modifyArray as:
function modifyArray(x)
The above function definition indicates that modifyArray() receives an array of integers in parameter x (the argument supplied in the calling function must be an array).
When the called function uses the array name x, it points to the original array in the caller (array hourlyTemp).
Therefore, when the called function updates any array elements in its function body, it is updating the actual elements of the array in their original memory locations.
Passing Array to Function as Pass by Reference
1. Let’s create a JavaScript program in which we will pass an initialized array to a function. Then, we will multiply each array element by 5 and display it.
Program code 1:
<script>
let nums = new Array(20, 10, 25, 15, 35, 40);
let arrayLength = nums.length;
document.write("Original array elements are: ", "<br/>");
for(i = 0; i < arrayLength; i++) {
document.write(nums[i]+ " ");
}
document.write("<hr>");
// Function to pass an array by reference.
function modifyArray(x) {
document.write("Modified array elements: ", "<br/>");
for(i = 0; i < arrayLength; i++) {
document.write(nums[i] * 5 + " ");
}
}
// Calling function by passing array.
modifyArray(nums); // entire array passed by reference.
</script>
Output:
Original array elements are:
20 10 25 15 35 40
Modified array elements:
100 50 125 75 175 200
In this example program, we have passed an array nums into modifyArray() as pass by reference. That is, the parameter nums is passed into modifyArray() function with reference to x. Inside the function the array elements are multiplied by 5 and displayed.
Program code 2:
<script>
let nums = [10, 20, 30, 40, 50];
let arrayLength = nums.length;
document.write("Original array elements are: ", "<br/>");
for(i = 0; i < arrayLength; i++) {
document.write(nums[i]+ " ");
}
document.write("<br/>");
// Function to pass an array by reference.
function modifyArray(newArray, len) {
document.write("Modified array elements are: ", "<br/>");
for(i = 0; i < len; i++) {
document.write(nums[i] * 2 + " ");
}
}
// Calling function by passing array and array length.
modifyArray(nums, arrayLength); // entire array passed by reference.
</script>
Output:
Original array elements are:
10 20 30 40 50
Modified array elements are:
20 40 60 80 100
Passing Individual Array Element to Function as Pass by Value
Let’s create a JavaScript program in which we will pass the entire array as a pass by reference to the function in JavaScript. Then we will pass the individual array element to the function as a pass by value in JavaScript.
Program code 3:
<script>
let nums = [10, 20, 30, 40, 50];
document.write("Original array: ", "<br/>");
for(i = 0; i < nums.length; i++)
document.write(nums[i]+ " ");
document.write("<br/>");
document.write("Modified array: ", "<br/>");
// Create a function that modifies elements of an array.
function modifyArray(newArray) {
for(j = 0; j < nums.length; j++)
document.write((newArray[j] *= 4)+ " ");
}
modifyArray(nums); // passing an array as passed by reference.
document.write("<br/>");
document.write("nums[3] before modifyElement: " +nums[3], "<br/>");
// Create a function that modifies the value passed.
function modifyElement(e) {
e *= 3;
document.write("nums[3] after modifyElement: " +e);
}
modifyElement(nums[3]); // passing array element nums[3] as passed by value.
</script>
Output:
Original array:
10 20 30 40 50
Modified array:
40 80 120 160 200
nums[3] before modifyElement: 160
nums[3] after modifyElement: 480
Although the entire array is passed by reference, whereas individual numeric and boolean array elements are passed by value.
To pass an element of an array to a function, use the sub-scripted name of the element as an argument value in the function call.
In this tutorial, you learned an interesting topic “passing array to function in JavaScript” with many example programs. Hope that you will have understood how to pass an individual element of an array in JavaScript.
Thanks for reading!!!
Next ⇒ Arrays methods in JavaScript⇐ Prev Next ⇒