在 IIFE 内部调用 function

Question

I have the following code:

function doStuff() {
    var increaseNumber = 0;

    function doSomeStuff() {
        console.log(++increaseNumber);
    }

    return doSomeStuff();
};

doStuff();

When function “doStuff” is executed, function “doSomeStuff”, which is inside function “doStuff”, gets triggered via “return doSomeStuff()” and increments variable “increaseNumber” by 1 each time it is called. If I change “return doSomeStuff();” to “return doSomeStuff;”, calling “doStuff” via “doStuff()” doesn't work, as I'd assume.

Furthermore, I have the following code which yields the same result as the previous code:

var doStuff = (function () {
    var increaseNumber = 0;

    function doSomeStuff() {
        console.log(++increaseNumber);
    }

    return doSomeStuff;
})();

doStuff();

In this code, an IIFE is stored inside variable “doStuff”. Inside the IIFE, function “doSomeStuff” is stored and apparently gets triggered via “return doSomeStuff” and increments variable “increaseNumber” by 1 each time it is called via “doStuff()”. When I change “return doSomeStuff;” to “return doSomeStuff();”, the code doesn't work as laid out anymore.

When:

    return doSomeStuff();
})();

//doStuff();

the IIFE and “doSomeStuff” are executed once and increaseNumber is = 1. Calling the IIFE further times via “doStuff()” doesn't work, because of error: “JavaScript error: doStuff is not a function”.

There are mostly two things that I don't understand here:

1. Why does the code work when “return doSomeStuff;”. I don't see how this triggers function “doSomeStuff”, as the () is missing. When I call a function, I make sure to add (). That's how I learned it.
2. ABOVE EVERYTHING: Why can I not call “doStuff” as a function when I change “return doSomeStuff;” to “return doSomeStuff();”?

You will notice that I'm still a Javascript novice rather. I hope I'm not repeating a question here (I honestly couldn't find anything via search or on Google which would answer my query).

Thanks a million for any hints.

Answer 1

In this code, an IIFE is stored inside variable “doStuff”

No, the IIFE is run immediately, and its return value is stored in doStuff . So if you want doStuff to be a function that you can call multiple times, you need to return a function.

Why does the code work when “return doSomeStuff;”. I don't see how this triggers function “doSomeStuff”, as the () is missing.

It's not going to trigger doSomeStuff, not on its own. The code inside the IIFE is just trying to create the function, not actually run it. The spot where you call the function is the () at the end of doStuff() .

Why can I not call “doStuff” as a function when I change “return doSomeStuff;” to “return doSomeStuff();”?

Because in that case, your IIFE is returning a number, and then that number gets assigned to doStuff .

Answer 2

In Javascript functions are just like any other objects, we can return a function from another function, they can be passed as arguments to other functions etc.

When you return doSomeStuff; you are returning the function.

When you return doSomeStuff(); you are returning the value returned by invoking doSomeStuff function. It is same as

    var result = doSomeStuff();
    return result;

Now to answer the questions.

1. Why does the code work when “return doSomeStuff;”. I don't see how this triggers function “doSomeStuff”, as the () is missing. When I call a function, I make sure to add (). That's how I learned it.

As mentioned above you are returning the function here, Which gets stored to var doStuff . And it gets executed when you do doStuff()

2. ABOVE EVERYTHING: Why can I not call “doStuff” as a function when I change “return doSomeStuff;” to “return doSomeStuff();”?

If you change to return doSomeStuff(); you are not returning function anymore, instead you are returning the value returned by doSomeStuff function and gets stored to var doStuff . You can do () only on functions, since doStuff is not function you cant do doStuff()

Answer 3

In JavaScript return func(); returns the value which is returned by func() . On the other hand return func; returns a function , that itself returns the value returned by the function func . Both are two different things. return func returns a function object. In javascript functions are treated as objects. return func will return the callable function object. Returning func() returns the value returned by the callable function.

Answer 4

Here is how it works.

Q1 (rephrased): "Why does this work?"

var doStuff = (function () {
  var increaseNumber = 0;

  function doSomeStuff() {
    console.log(++increaseNumber);
  }

  return doSomeStuff;
})();

doStuff();

A1: Let's break it down to simple steps.

1. The variable doStuff is declared.
2. The IIFE runs, returning the function declaration doSomeStuff , which gets assigned to the variable doStuff .
3. Since the variable doStuff now holds a function, you can call it as you would call a normal function.

Please note, the once the IIFE has finished, the variable increaseNumber remains enclosed in its inner scope and is accessible to the function doSomeStuff . This inner scope doesn't get destroyed for the lifetime of doSomeStuff , which is now assigned to doStuff ; This is why calling doStuff() leads to the desired effect, ie console.log outputs a number increment every time the function gets executed.

Q2 (rephrased): "Why can't I call doStuff as a function?"

var doStuff = (function () {
  var increaseNumber = 0;

  function doSomeStuff() {
    console.log(++increaseNumber);
  }

  return doSomeStuff();
})();

doStuff();

A2: Again, let's break it down to better understand what happens under the hood.

1. The variable doStuff is declared.
2. When the IIFE runs, is calls the function doSomeStuff . Since doSomeStuff does not explicitly return anything, the JavaScript engine assumes it returns undefined . So doStuff now holds a value of undefined .
3. Since undefined is not a function and is therefore not callable, you will get a runtime error uncaught TypeError: doStuff is not a function .

Hope it helps.