What is the difference in the following JS syntax?

Question

Below are two ways to determine BW.Timer. Can someone tell me what the difference is? I'm not sure that the first is even true, but if it is valid, what is the difference between the syntax myfunc=(function(){}()) ?

 BW.Timer = (function () { return { Add: function (o) { alert(o); }, Remove: function (o) { alert(o); } }; } ()); 

BUT...

 BW.Timer = function () { return { Add: function (o) { alert(o); }, Remove: function (o) { alert(o); } }; }; 

Answer 1

The first is the return value of the function called immediately. The second function. In fact, it comes down to the fact that there is a difference between them:

 var f = (function() { return 0; })(); var f = function() { return 0; }; 

Since the first function is called immediately, the value 0 is set by the variable f . The first f not a function. However, we must call the second f in order to get the value:

 f(); // 0 

It follows that in your example, the first BW.Timer is the object literal itself, and the second is a function that returns the object literal. You must call the function to go to the object:

 BW.Timer().Add(x); 

Why use the first one first?

You may ask yourself why instead of a = {} should use syntax like a = (function() { return {}; })() , but there is a good reason. IIFE (Immeditately-Invoked Function Expression), unlike a regular function, allows the emulation of static variables (variables that support their value through a single instance). For example:

 var module = (function() { var x = 0; return { get: function() { return x }, set: function(n) { x = n } }; })(); 

The above is an example of a Module Pattern tutorial. Since the function is called immediately, the variable x is created, and the return value (object) is assigned to module . We cannot get to x except using the get and set methods provided for us. Therefore, x is static, that is, its variable will not be redefined every time you use module .

 module.set(5); module.get(); // 5 

On the other hand, look at an example where module declared as a function instead:

 // assume module was made as a function module().set(5); module().get(); // 0 

When we call module() , the variable x overridden every time. Therefore, we effectively use different instances of module and x each time we call module .

Answer 2

The difference is pretty big.

In the first case, BW.Timer is executed when it first occurs, and this is the static version assigned by BW.Timer . In this case, BW.Timer.Add(1) can be used. Each call to BW.Timer will be the same object.

In the second case, BW.Timer not executed the first time it is detected, but instead is a referece function that must be called by BW.Timer() . For Add to be used, this should be the case for BW.Timer().Add(1) . Alternatively, you can issue var timer = new BM.Timer(); . Each instance of BW.Timer() will be unique here.

Answer 3

In the first example, BW.Timer refers to the object returned by the self- BW.Timer function, while in the second example it refers to the object of the function, in other words, it is a function that can be executed by BW.Timer() .