In this section, we will learn what does it mean to pass a function as the argument to other functions and how to use this feature in JavaScript.

Note: we’re assuming you’re already familiar with the JavaScript functions.

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

function funcOne(){
  document.querySelector(".output").innerText = "Hello from Function One";
}
function funcTwo(func){
  func();
}
funcTwo(funcOne);

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

function greet(arrowFnc){
  arrowFnc("John");
}
greet(function fnc(name){
  document.querySelector(".output").innerText = `Welcome ${name}`;
});

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.