CODEWITHSUNDEEP
javascriptfunction
Andrew
Andrew

Reputation: 127

Javascript function within return statement

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(){...}
    };
})();

Upvotes: 1

Views: 128

Answers (3)

Mark
Mark

Reputation: 92440

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.

Upvotes: 1

khagesh
khagesh

Reputation: 948

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. :)

Upvotes: 2

Etai
Etai

Reputation: 1503

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

Upvotes: 1

Related Questions