() after function call

[Brownie Guy]

Today while researching a bug I found this script:

var Event = {
add: function() {
if (window.attachEvent) {
return function(el, type, fn) {
var f = function() { fn.call(Dom.get(el), window.event); };
Dom.get(el).attachEvent('on' + type, f);
};
}
}()
};

Its the () at the end of the function definition that leaves me
scratching my head. I looked around but I wasn't able to learn the
name of this feature and thus unable to research it farther. Can
someone point me in the right direction or explain it.

Much Appreciated
Travis

 

[Joost Diepenmaat]

Today while researching a bug I found this script:

var Event = {
add: function() {
if (window.attachEvent) {
return function(el, type, fn) {
var f = function() { fn.call(Dom.get(el), window.event); };
Dom.get(el).attachEvent('on' + type, f);
};
}
}()
};

Its the () at the end of the function definition that leaves me
scratching my head. I looked around but I wasn't able to learn the
name of this feature and thus unable to research it farther. Can
someone point me in the right direction or explain it.

Basically, it's just a function call on the anynonymous function.

I.e:

a = {
b: function() { return "result" }()
};

alert(a.b); // note: a.b. is a string, not a function

Note that in some cases you need additional parentheses to make it work:

function(){ alert("call" }(); // error

(function(){ alert("call"} )(); // works

Joost.

 

[Brownie Guy]

Basically, it's just a function call on the anynonymous function.

I.e:

a = {
b: function() { return "result" }()

};

alert(a.b); // note: a.b. is a string, not a function

Note that in some cases you need additional parentheses to make it work:

function(){ alert("call" }(); // error

(function(){ alert("call"} )(); // works

Joost.

Thanks Joost.

Now I understand the () after the definition calls the function that
was just defined immediately.

During what circumstances would you wrap the def in () as your second
example demonstrates?

Is this supported by all browsers?

Travis

 

[Joost Diepenmaat]

Thanks Joost.

Now I understand the () after the definition calls the function that
was just defined immediately.

During what circumstances would you wrap the def in () as your second
example demonstrates?

When I use this construct I always wrap it in extra parentheses, because
I simply don't want to think about when I do or don't need to. One case
where you need to wrap it is if you don't assign the result (which is
useful, because it creates a new scope):

(function() {
var temp = a;
function Something() {
return a;
}
function Inc() {
a++;
}
})();

// temp is not available here, so it won't overwrite anything

Is this supported by all browsers?

As far as I know it should work in everything. I know for sure it works
in fairly recent versions of opera, mozilla, safari and IE. I'm not
aware of any problems in older versions / other browsers.

Joost.

 

[Brownie Guy]

When I use this construct I always wrap it in extra parentheses, because
I simply don't want to think about when I do or don't need to. One case
where you need to wrap it is if you don't assign the result (which is
useful, because it creates a new scope):

(function() {
var temp = a;
function Something() {
return a;
}
function Inc() {
a++;
}

})();

// temp is not available here, so it won't overwrite anything


As far as I know it should work in everything. I know for sure it works
in fairly recent versions of opera, mozilla, safari and IE. I'm not
aware of any problems in older versions / other browsers.

Joost.

Thanks, thats all the info I need.

Travis

 

[Thomas 'PointedEars' Lahn]

[...]
(function() {
var temp = a;
function Something() {
return a;
}
function Inc() {
a++;
}
})();

// temp is not available here, so it won't overwrite anything

Is this supported by all browsers?

As far as I know it should work in everything. I know for sure it works
in fairly recent versions of opera, mozilla, safari and IE. I'm not
aware of any problems in older versions / other browsers.

It is supported where FunctionExpressions are supported, meaning that if

var o = {
x: function()
{
return 42;
}
};

is supported, it is safe to write

var o = {
x: (function()
{
return 42;
})()
};

http://PointedEars.de/es-matrix#f


PointedEars