Javascript function within return statement

Question

I'm starting new with javascript and still learning. I came across this code with different function declaractions. What are the differences between funcA, funcB, and funcX? In the code funcA, funcB are used within the module, and funcX & funcY are called from outside the module as someModule.funcX(). Likely very simple but I don't know what this is called to even do a rearch. Any pointers will be appreciated.

var someModule = (function() {
    var funcA = (function() {...})();
    var funcB = function() {...};

    return {
        funcX: function(){...},
        funcY: function(){...}
    };
})();

`funcA` is not necessary a function. And no difference between `funcB`, `funcX` and `funcY`. Keywords to search: IIFE — zerkms, Aug 04 '14 at 06:39
@zerkms, `funcA` can be a function if the code inside `(function() {...})()` returns a function. — Frédéric Hamidi, Aug 04 '14 at 06:39
So `funcA` is an object (or sub-module?) inside the parent `someModule`? — Andrew, Aug 04 '14 at 06:41
@Andrew: `funcA` is what the IIFE returns. It might be of any type. — zerkms, Aug 04 '14 at 06:42
@zerkms, So `funcB` same as `funcX` here. But is there any other reason to declare in these 2 different ways? Maybe it's useful in other parts of the code I didn't include? — Andrew, Aug 04 '14 at 06:50
@Andrew: you don't *declare* them in different ways. They both are declared as `function() { ... };` — zerkms, Aug 04 '14 at 07:28
@zerkms, sorry my wording was misleading. I meant to ask what's the differences having the func inside vs outside the return statement. Thanks all. — Andrew, Aug 04 '14 at 20:26
@Andrew: there is no such a thing as "inside of the return statement". `return` returns data from a function. That is, no any more magic. — zerkms, Aug 04 '14 at 21:02

score 2 · Accepted Answer · answered Aug 04 '14 at 07:02

If you just want the difference between all of the functions here is the difference.

First difference between funcA, funcB and funcX, funcY.

Whatever we have inside return statement will be accessible by someModule. So we can do both of these below

someModule.funcX();
someModule.funcY();

But we cannot do someModule.funcA() or someModule.funcB(). To understand why that we can do this is to understand how () this behaves. Whatever expression is put inside brackets is executed and result is returned there. So in this example we have put a function inside these brackets, so an anonymous function will be created inside memory and it object will be returned here.

Now we have put one more pair of brackets after function declaration. So, what happens here is (returned function object)(). So this function will be called immediately and an object containing two properties funcX and funcY whose value are function will be returned.

Now moving to second part that is inside the function. Here the difference between funcA and funcB is that funcA is same as someModule i.e. it is also an IIFE and depending upon the body of funcA, it will be decided that if we are returning function object from inside the body of funcA, then it will also be a function otherwise it will contain whatever we return from inside of body of funcA.

Apart from that all other are simple functions.

Also, not related to what was asked. We can access funcA and funcB inside funcX and funcY, and even after containing function is executed then also we will still be able to access both of these function. For more details on this behavior look for closure in JavaScript. Happy learning JavaScript. :)

khagesh, Etai, MarkM & zerkms all good explainations. It's much more clear to me now. So to sum up, the 3 keywords here are IIFE, module pattern, and closure. — Andrew, Aug 04 '14 at 20:41

score 1 · Answer 2 · answered Aug 04 '14 at 07:01

This is simply a module pattern. The way this is written is very similar to the revealing module pattern.

Basically, you the function returns something (anything, really) which is meant to be the public interface to the module (note that by interface I do not mean one that needs to be implemented, merely that this is the endpoint to interact with the module, like an API).

The classical way to do this (as a revealing module pattern) would actually be:

var someModule = (function() {
    var funcA = (function() {...})();
    var funcB = function() {...};
    var funcX = function(){...}
    var funcY = function(){..}
    return {
        funcX: funcX,
        funcY: funcY
    };
})();

The reason this is called the revealing module pattern, is because you define your module and all private and public functions in the module, and in the end you reveal what you want to expose.

This makes it easy to understand what's happening inside and to change it if necessary.

A good resource to quickly learn about various module patterns is this site

score 1 · Answer 3 · answered Aug 04 '14 at 07:09

Andrew,

So it's a little confusing, but it's pretty basic javascript weirdness.

You can save a function in a variable like this:

var a = function(){return 30}

Here a hold the function itself. You can then call this function with ():

a() // result is 30;

Alternatively I could forget the variable and just call the function by adding the () to the end:

(function(){return 30})();

this also results in 30, although we didn't assign it to anything.

So now if I assign that last one to a variable:

var b = (function(){return 30})();

Unlike a above, which holds the function itself, b holds the result, whatever that might be, of calling the function — b is 30 because the function is called and then the result is assigned to b.

Javascript function within return statement

3 Answers3