53

I am calling a function on button click like this:

<input type="button" onclick="outer();" value="ACTION">​

function outer() { 
    alert("hi");       
}

It works fine and I get an alert:

Now when I do like this:

function outer() { 
    function inner() {
        alert("hi");
    }
}

Why don't I get an alert?

Though inner function has a scope available in outer function.

1
  • 2
    Where do you try to call inner?
    – Bergi
    Nov 4, 2012 at 12:47

11 Answers 11

76

You could make it into a module and expose your inner function by returning it in an Object.

function outer() { 
    function inner() {
        console.log("hi");
    }
    return {
        inner: inner
    };
}
var foo = outer();
foo.inner();
3
  • 4
    The first part of the marked answer is the correct answer for this particular question, but Google brought me here and this is actually what I was looking for, searching: "javascript access a function inside a function." I'm guessing that's why this has so many up-votes even though it's wrong for the question.
    – JoePC
    Mar 16, 2018 at 15:30
  • 1
    Thanks a lot! I've been searching for this answer for some time. :D Dec 16, 2019 at 6:13
  • 2
    can also return { inner }
    – Toni Leigh
    Nov 25, 2021 at 9:35
66

The scoping is correct as you've noted. However, you are not calling the inner function anywhere.

You can do either:

function outer() { 

    // when you define it this way, the inner function will be accessible only from 
    // inside the outer function

    function inner() {
        alert("hi");
    }
    inner(); // call it
}

Or

function outer() { 
    this.inner = function() {
        alert("hi");
    }
}

<input type="button" onclick="(new outer()).inner();" value="ACTION">​
3
  • 4
    btw what is that piece called onclick="(new outer()).inner();", I am seeing it for the first time
    – Mike
    Nov 4, 2012 at 12:58
  • 3
    @Mike: Better forget it, it's not really suited for this. He is creating a new instance of the outer constructor and calls a method on it
    – Bergi
    Nov 4, 2012 at 13:25
  • @Mike - In case you need inner() accessible outside outer(), the second way will let you. But you do not need the second way for your requirement here.
    – techfoobar
    Nov 4, 2012 at 13:27
9

You are not calling the function inner, just defining it.

function outer() { 
    function inner() {
        alert("hi");
    }

    inner(); //Call the inner function

}
6

You can also try this.Here you are returning the function "inside" and invoking with the second set of parenthesis.

function outer() {
  return (function inside(){
    console.log("Inside inside function");
  });
}
outer()();

Or

function outer2() {
    let inside = function inside(){
      console.log("Inside inside");
    };
    return inside;
  }
outer2()();
4

Again, not a direct answer to the question, but was led here by a web search. Ended up exposing the inner function without using return, etc. by simply assigning it to a global variable.

var fname;

function outer() {
    function inner() {
        console.log("hi");
    }
    fname = inner;
}

Now just

fname();
1

you can also just use return:

   function outer() { 
    function inner() {
        alert("hi");
    }
return inner();

}
outer();
1
function parent() {
    this.child1 = function child1(string){
        console.log(string);
    }
    this.child2 = function child2(string){
        console.log(string);
    }
}

new parent().child1("hello world child1");
new parent().child2("hello world child2");

Output:

"hello world child1"

"hello world child2"

0

If you want to call the "inner" function with the "outer" function, you can do this:

function outer() { 
     function inner() {
          alert("hi");
     }
     return { inner };
}

And on "onclick" event you call the function like this:

<input type="button" onclick="outer().inner();" value="ACTION">​
0
function outer() { 

    function inner() {
        alert("hi");
    }
    inner();
}

you should try this

1
  • While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. You can find more information on how to write good answers in the help center: stackoverflow.com/help/how-to-answer . Good luck 🙂
    – nima
    Oct 8, 2021 at 11:33
0

In JavaScript

If using ES6
static functions can be used in a class

If using ES5
After several days of usage, below is what I came up with,
it is minimal & also has a lot of conveniences:

function MathFunctions() {
    let thefo = {}; // the functions object

    thefo.sum = sum = (a, b) => {
        return a + b;
    };
    thefo.avg = avg = (a, b) => {            // name is repeated 2 times - minor inconvenience
        return sum(a, b) / 2;                // calls sum, another function without using 'this'
    };

    return thefo;                            // no need to go down & export here always for each new function - major convenience
}

// Usage
console.log(MathFunctions().sum(1, 2));
console.log(MathFunctions().avg(1, 2));
// OR
const mf = MathFunctions();
console.log(mf.sum(1, 2));
console.log(mf.avg(1, 2));
0

Try This Solution

const greet = (greeting) => {
    return function (name) {
        console.log(`${greeting} ${name}`);
    };
};

greet('Hi !')('JAHID');

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.