() after function call

Discussion in 'Javascript' started by Brownie Guy, Feb 6, 2008.

  1. Brownie Guy

    Brownie Guy Guest

    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
    Brownie Guy, Feb 6, 2008
    #1
    1. Advertising

  2. Brownie Guy <> writes:

    > 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.
    Joost Diepenmaat, Feb 6, 2008
    #2
    1. Advertising

  3. Brownie Guy

    Brownie Guy Guest

    On Feb 6, 2:42 pm, Joost Diepenmaat <> wrote:
    > Brownie Guy <> writes:
    > > 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.


    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
    Brownie Guy, Feb 6, 2008
    #3
  4. Brownie Guy <> writes:

    > 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.
    Joost Diepenmaat, Feb 6, 2008
    #4
  5. Brownie Guy

    Brownie Guy Guest

    On Feb 6, 3:07 pm, Joost Diepenmaat <> wrote:
    > Brownie Guy <> writes:
    > > 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.


    Thanks, thats all the info I need.

    Travis
    Brownie Guy, Feb 6, 2008
    #5
  6. Joost Diepenmaat wrote:
    > [...]
    > (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
    --
    Use any version of Microsoft Frontpage to create your site.
    (This won't prevent people from viewing your source, but no one
    will want to steal it.)
    -- from <http://www.vortex-webdesign.com/help/hidesource.htm>
    Thomas 'PointedEars' Lahn, Feb 10, 2008
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. schaf
    Replies:
    0
    Views:
    426
    schaf
    May 29, 2005
  2. grbgooglefan
    Replies:
    2
    Views:
    417
    Pascal Bourguignon
    Jan 30, 2008
  3. grbgooglefan
    Replies:
    4
    Views:
    437
    Kenny McCormack
    Jan 30, 2008
  4. grbgooglefan
    Replies:
    0
    Views:
    388
    grbgooglefan
    Jan 30, 2008
  5. Alok
    Replies:
    3
    Views:
    246
Loading...

Share This Page