In this section we will learn what does it mean to pass a function as the argument to anther function and how to use this feature in JavaScript.
JavaScript Functions as Arguments to Other Functions
In JavaScript, besides of passing variables with primitive values, we can pass the name of a function as the argument to another function as well.
Passing a function as the argument to another function will only send the memory address of that function to the target function.
You see, a function when is defined, will be stored in a portion of the memory and we just get its address.
So when we call a function with its name, we’re basically telling the JavaScript’s execution engine to go ahead and find the function that is linked to this name and start to execute its body.
Likewise, when we pass the name of a function as the argument to another function, we’re simply passing the memory address of that function to another function.
So the parameter of that function will hold the address key.
Now via this address, inside the target function we can call the same function.
Note: when passing a function as the argument to another function, we don't use the pair of parentheses on the right side of the function's name that we're passing. Basically, we don't call the function, we're just passing the memory address of that function. If you call a function when passing it as the argument to another function, you’re actually passing the result (if any) of calling that function.
Example: passing functions as arguments to other functions in JavaScript
<!DOCTYPE html>
<html>
<head>
<title>JavaScript is fun! :)</title>
</head>
<body>
<p class = "output">Output: </p>
<script type="text/javascript">
function funcOne(){
document.querySelector(".output").innerText = "Hello from Function One";
}
function funcTwo(func){
func();
}
funcTwo(funcOne);
</script>
</body>
</html>There are two functions in this example:
-
funcOne
-
funcTwo
Both of these two names are basically holding the memory addresses in which the bodies of the functions are stored.
The funcTwo function takes one argument and that is a function. As you can see, in the body of this function, we’ve called the func parameter as if it is a function.
Alright, so when we actually called the funcTwo() function, we’ve passed the name funcOne as the argument of this function. So now the memory address that is stored in the funcOne is copied and passed to the func function.
Basically both func and funcOne are pointing to the same function in the memory at this time.
For this reason, when the execution engine ran the body of the funcTwo function, the func(); statement actually worked and caused the body of the function that both func and funcOne are pointing at to be executed properly.
Example: pass function as argument to another function in JavaScript
<!DOCTYPE html>
<html>
<head>
<title>JS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h3>Output:</h3>
<p id = "link"></p>
<script>
function greet(arrowFnc){
arrowFnc("John");
}
greet(function fnc(name){
document.querySelector(".output").innerText = `Welcome ${name}`;
});
</script>
</body>
</html>Other than creating a function in a separate line and passing the variable that holds the function as the argument to another function; we can directly create a function as the argument when calling the target function that needs one.
Here the greet() function has one parameter and in the body of the function this parameter is being called as if it’s a function. This means when we call the greet() function, we need to pass a reference of another function as its argument.
So here instead of creating a function in a separate line, we directly created one in the pair of parentheses where we invoked the greet function.
This function is stored in the memory and its address is assigned to the arrowFnc parameter then. So when the execution engine starts to execute the body of the greet() function, it basically invokes the body of the function that we passed as the argument to the greet function and will execute its body.