Javascript immediate function invocation

Question

I am experimenting with different javascript function calls, I tried running the code below. Here is the fiddle link https://jsfiddle.net/7de5vfpj/

var app = function () {
 var ans = {
 power: alert("power"),
 wow: alert("wow")
 }
 return ans;
}();

From the fiddle it alerts both "power" and "wow", when I was just expecting it to alert "wow". Why does it happen this way?

• elclanrs: Why do you expect that? The behavior is correct. Both alert run as soon as the function is executed. Since it is a blocking operation, the second alert will open when the first one is closed.
• AdityaParab: It shows alerts becuase when you initialize your power and wow properties, you are initializing them with a call to alert :)

Answer 1

Original Fiddle:

var app = function () {
var ans = {
 power: alert("power"),
 wow: alert("wow")
 }
 return ans;
}();
app.power();

The alert methods are triggered because of the object literal syntax. calling the ans.power(); on the bottom of the fiddle is causing the following exception to be thrown.

Uncaught TypeError: app.power is not a function

the alert method does not have any return value. This is causing the power and wow properties to have undefined values.

This is also causing the invocation at the bottom of the fiddle to throw the exception above.

Answer 2

You're assigning to alert to a variable and upon initialization, this will trigger the alert.

var x = alert("aa"); //this will trigger alert on initialization.

Probably a better solution would be to make both power and wow functions.

var app = function () {
var ans = {
 power: function(){alert("power")},
 wow: function(){alert("wow")}
}
return ans;
}();

Hope this helps.

Answer 3

You're actually immediately invoking both alerts. To get the expected behavior, you need to pass function references to the methods, not already-invoked functions (your IIFE is fine, it's your method declarations that are the cause of your problem):

var app = function () {
 var ans = {
 power: function() { alert("power") },
 wow: function() { alert("wow") }
 }
 return ans;
}();

See the updated jsfiddle.

You can also, alternatively, take advantage of the fact that Function.prototype.bind returns a function reference:

var app = function () {
 var ans = {
 power: alert.bind(this, 'power'),
 wow: alert.bind(this, 'wow')
 }
 return ans;
}();
app.power();

Here's that jsfiddle.

In your original code, if you open up your console, you'll see Uncaught TypeError: app.power is not a function. That's because window.alert returns undefined, and the window.alert functions were already invoked... therefore, they return undefined, and when you try to call app.power(), you're trying to invoke the return value of that method... and obviously undefined isn't a function, as the error very semantically states.

Answer 4

I created something that might be able to do what you wanted.

function app() {
 this.power = function(){
 alert('power');
 }
 this.wow = function(){
 alert('wow');
 }
};
var app = new app;
app.power()
app.wow()

you can use app.power() to call the power method, or app.wow() for the wow method. to create new methods, just follow the format of using

this.methodName = function(){
 //code you want to execute
}
//to call that method, outside of the function, 
//and after you set a variable to new app, call this
app.methodName();