How to call a Function inside another Function in JS

avatar

Borislav Hadzhiev

Tue Nov 16 20212 min read

banner

Photo by Josh Withers

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 access any of the available variables in the scope.

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 that the inner function can access the variables declared before it in the scope. This is because of how hoisting works in JavaScript.

index.js
function outerFunc() { const num1 = 5; const num2 = 10; function innerFunc() { return num1 + num2; } const result = innerFunc(); 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 any of the variables declared before it are still accessible.

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 parenthesis () to invoke the inner function inside the outer one.

We returned the function without invoking it.

This allows us to invoke the inner functions 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 every time we call the inner function.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee