How to call a Function inside another Function in JS

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Call a Function inside another Function #

To call a function inside another function, define the inner function inside the outer function and invoke it. When using the function keyword, the function gets hoisted to the top of the scope and can be called from anywhere inside of the outer function.

index.js
function outerFunc(a, b) { function innerFunc(a, b) { return a + b; } const result = innerFunc(a, b); return result; } console.log(outerFunc(10, 10)); // 👉️ 20 console.log(outerFunc(10, 20)); // 👉️ 30

The following example shows how we can call the inner function before it is declared. This is because of how hoisting works in JavaScript.

index.js
function outerFunc() { const num1 = 5; const num2 = 10; // 👇️ call inner function before it's declared const result = innerFunc(); function innerFunc() { return num1 + num2; } return result; } console.log(outerFunc()); // 👉️ 15

This only works for functions declared using the function keyword (not arrow functions).

You can imagine that the declaration of the function gets hoisted to the top of the scope, therefore it can be called from anywhere in the scope.

An alternative approach is to return the inner function from the outer one.

index.js
function outerFunc() { function innerFunc(a, b) { return a + b; } return innerFunc; } const innerFunc = outerFunc(); console.log(innerFunc(2, 3)); // 👉️ 5 console.log(innerFunc(3, 3)); // 👉️ 6

Notice that we didn't use parentheses () to invoke the inner function inside the outer one.

We returned the function without invoking it. In other words, we returned a reference to the inner function, not the result of calling it.

This allows us to invoke the inner function as many times as necessary, passing it different parameters every time.

What's most useful in this scenario is that the inner function remembers the variables declared in the outer function between invocations.

index.js
function outerFunc() { const z = 100; function innerFunc(a, b) { return a + b + z; } return innerFunc; } const innerFunc = outerFunc(); console.log(innerFunc(2, 3)); // 👉️ 105 console.log(innerFunc(3, 3)); // 👉️ 106

Notice that the inner function remembers the value of the z variable between invocations.

This concept is called a closure in JavaScript.

The inner function gets bundled with references to its surrounding state.

This means that the inner function has access to the variables declared inside of the outer function's scope at any time.

This is useful in many different scenarios. For example, you could pass a parameter to the outer function that it will remember for any of the inner function calls.

index.js
function outerFunc(a) { function innerFunc(b, c) { return a + b + c; } return innerFunc; } const innerFunc = outerFunc(10); console.log(innerFunc(1, 1)); // 12 console.log(innerFunc(1, 2)); // 13

We passed 10 as a parameter to the outer function and stored the result in a variable.

The innerFunc variable stores a reference to the innerFunc function, where the a variable points to a value of 10.

Now we can omit 10 from the parameters when calling the inner function.

Further Reading #

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.