Can i call a function inside the same function javascript?

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.

Copied!
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.

Copied!
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.

Copied!
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.

Copied!
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.

Copied!
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 #

• How to call a Function inside an Object in JavaScript
• Check if a Function returns a Promise in JavaScript

Can we call a function inside the same function in JavaScript?

How do you use a function within a function in JavaScript?

Can a function be called inside another function?

What is the name of calling a function inside a same function?