What do parentheses surrounding an object function class declaration mean

Question

I m new to both JavaScript and YUI  In YUI library examples  you can find many uses of this construct    function         var Dom   YAHOO util Dom      Event   YAHOO util Event      layout   null                      I think the last couple of parentheses are to execute the function just after the declaration       But what about the previous set of parentheses surrounding the function declaration   I think it is a matter of scope  that s to hide inside variables to outside functions and possibly global objects  Is it  More generally  what are the mechanics of those parentheses

User · Answer

A few considerations on the subject    The parenthesis   The browser  engine parser  associates the keyword function with   optional name   optional parameters      code       So in an expression like function       the last parenthesis makes no  sense   Now think at  name function       name         Yes  the first pair of parenthesis force the anonymous function to turn into a variable  stored expression  and the second launches evaluation execution  so   function         makes sense    The utility      For executing some code on load and isolate the used variables from the rest of the page especially when name conflicts are possible  Replace eval  string   with   new Function  string      Wrap long code for          operator like   result   exp to test    function       long code            function

User · Answer

The first parentheses are for  if you will  order of operations  The  result  of the set of parentheses surrounding the function definition is the function itself which  indeed  the second set of parentheses executes   As to why it s useful  I m not enough of a JavaScript wizard to have any idea   P

User · Answer

Juts to follow up on what Andy Hume and others have said   The      surrounding the anonymous function is the  grouping operator  as defined in section 11 1 6 of the ECMA spec  http   www ecma-international org publications files ECMA-ST Ecma-262 pdf    Taken verbatim from the docs     11 1 6 The Grouping Operator  The production PrimaryExpression     Expression   is evaluated as follows    Return the result of evaluating Expression  This may be of type Reference    In this context the function is treated as an expression

User · Answer

See this question   The first set of parenthesis aren t necessary if you use a function name  but a nameless function requires this construct and the parenthesis serve for coders to realize that they ve viewing a self-invoking function when browsing the code  see one blogger s best-practices recommendation

User · Answer

The first parentheses are for  if you will  order of operations  The  result  of the set of parentheses surrounding the function definition is the function itself which  indeed  the second set of parentheses executes   As to why it s useful  I m not enough of a JavaScript wizard to have any idea   P

User · Answer

Andy Hume pretty much gave the answer  I just want to add a few more details   With this construct you are creating an anonymous function with its own evaluation environment or closure  and then you immediately evaluate it  The nice thing about this is that you can access the variables declared before the anonymous function  and you can use local variables inside this function without accidentally overwriting an existing variable   The use of the var keyword is very important  because in JavaScript every variable is global by default  but with the keyword you create a new  lexically scoped variable  that is  it is visible by the code between the two braces  In your example  you are essentially creating short aliases to the objects in the YUI library  but it has more powerful uses   I don t want to leave you without a code example  so I ll put here a simple example to illustrate a closure   var add gen   function n      return function x        return n   x          var add2   add gen 2   add2 3      result is 5   What is going on here  In the function add gen you are creating an another function which will simply add the number n to its argument  The trick is that in the variables defined in the function parameter list act as lexically scoped variables  like the ones defined with var   The returned function is defined between the braces of the add gen function so it will have access to the value of n even after add gen function has finished executing  that is why you will get 5 when executing the last line of the example   With the help of function parameters being lexically scoped  you can work around the  problems  arising from using loop variables in anonymous functions  Take a simple example   for var i 0  i lt 5  i        setTimeout function   alert i    10       The  expected  result could be the numbers from zero to four  but you get four instances of fives instead  This happens because the anonymous function in setTimeout and the for loop are using the very same i variable  so by the time the functions get evaluated  i will be 5   You can get the naively expected result by using the technique in your question and the fact  that function parameters are lexically scoped   I ve used this approach in an other answer   for var i 0  i lt 5  i        setTimeout        function j           return function   alert j            i   10       With the immediate evaluation of the outer function you are creating a completely independent variable named j in each iteration  and the current value of i will be copied in to this variable  so you will get the result what was naively expected from the first try   I suggest you to try to understand the excellent tutorial at http   ejohn org apps learn  to understand closures better  that is where I learnt very-very much

User · Answer

but what about the previous round parenteses surrounding all the function declaration    Specifically  it makes JavaScript interpret the  function          construct as an inline anonymous function expression  If you omitted the brackets   function         alert  hello           You d get a syntax error  because the JS parser would see the  function  keyword and assume you re starting a function statement of the form   function doSomething            and you can t have a function statement without a function name   function expressions and function statements are two different constructs which are handled in very different ways  Unfortunately the syntax is almost identical  so it s not just confusing to the programmer  even the parser has difficulty telling which you mean

User · Answer

but what about the previous round parenteses surrounding all the function declaration    Specifically  it makes JavaScript interpret the  function          construct as an inline anonymous function expression  If you omitted the brackets   function         alert  hello           You d get a syntax error  because the JS parser would see the  function  keyword and assume you re starting a function statement of the form   function doSomething            and you can t have a function statement without a function name   function expressions and function statements are two different constructs which are handled in very different ways  Unfortunately the syntax is almost identical  so it s not just confusing to the programmer  even the parser has difficulty telling which you mean

User · Answer

Juts to follow up on what Andy Hume and others have said   The      surrounding the anonymous function is the  grouping operator  as defined in section 11 1 6 of the ECMA spec  http   www ecma-international org publications files ECMA-ST Ecma-262 pdf    Taken verbatim from the docs     11 1 6 The Grouping Operator  The production PrimaryExpression     Expression   is evaluated as follows    Return the result of evaluating Expression  This may be of type Reference    In this context the function is treated as an expression

User · Answer

but what about the previous round parenteses surrounding all the function declaration    Specifically  it makes JavaScript interpret the  function          construct as an inline anonymous function expression  If you omitted the brackets   function         alert  hello           You d get a syntax error  because the JS parser would see the  function  keyword and assume you re starting a function statement of the form   function doSomething            and you can t have a function statement without a function name   function expressions and function statements are two different constructs which are handled in very different ways  Unfortunately the syntax is almost identical  so it s not just confusing to the programmer  even the parser has difficulty telling which you mean

User · Answer

It is a self-executing anonymous function  The first set of parentheses contain the expressions to be executed  and the second set of parentheses executes those expressions   It is a useful construct when trying to hide variables from the parent namespace  All the code within the function is contained in the private scope of the function  meaning it can t be accessed at all from outside the function  making it truly private   See   http   en wikipedia org wiki Closure  28computer science 29  http   peter michaux ca articles javascript-namespacing

User · Answer

Andy Hume pretty much gave the answer  I just want to add a few more details   With this construct you are creating an anonymous function with its own evaluation environment or closure  and then you immediately evaluate it  The nice thing about this is that you can access the variables declared before the anonymous function  and you can use local variables inside this function without accidentally overwriting an existing variable   The use of the var keyword is very important  because in JavaScript every variable is global by default  but with the keyword you create a new  lexically scoped variable  that is  it is visible by the code between the two braces  In your example  you are essentially creating short aliases to the objects in the YUI library  but it has more powerful uses   I don t want to leave you without a code example  so I ll put here a simple example to illustrate a closure   var add gen   function n      return function x        return n   x          var add2   add gen 2   add2 3      result is 5   What is going on here  In the function add gen you are creating an another function which will simply add the number n to its argument  The trick is that in the variables defined in the function parameter list act as lexically scoped variables  like the ones defined with var   The returned function is defined between the braces of the add gen function so it will have access to the value of n even after add gen function has finished executing  that is why you will get 5 when executing the last line of the example   With the help of function parameters being lexically scoped  you can work around the  problems  arising from using loop variables in anonymous functions  Take a simple example   for var i 0  i lt 5  i        setTimeout function   alert i    10       The  expected  result could be the numbers from zero to four  but you get four instances of fives instead  This happens because the anonymous function in setTimeout and the for loop are using the very same i variable  so by the time the functions get evaluated  i will be 5   You can get the naively expected result by using the technique in your question and the fact  that function parameters are lexically scoped   I ve used this approach in an other answer   for var i 0  i lt 5  i        setTimeout        function j           return function   alert j            i   10       With the immediate evaluation of the outer function you are creating a completely independent variable named j in each iteration  and the current value of i will be copied in to this variable  so you will get the result what was naively expected from the first try   I suggest you to try to understand the excellent tutorial at http   ejohn org apps learn  to understand closures better  that is where I learnt very-very much

User · Answer

Andy Hume pretty much gave the answer  I just want to add a few more details   With this construct you are creating an anonymous function with its own evaluation environment or closure  and then you immediately evaluate it  The nice thing about this is that you can access the variables declared before the anonymous function  and you can use local variables inside this function without accidentally overwriting an existing variable   The use of the var keyword is very important  because in JavaScript every variable is global by default  but with the keyword you create a new  lexically scoped variable  that is  it is visible by the code between the two braces  In your example  you are essentially creating short aliases to the objects in the YUI library  but it has more powerful uses   I don t want to leave you without a code example  so I ll put here a simple example to illustrate a closure   var add gen   function n      return function x        return n   x          var add2   add gen 2   add2 3      result is 5   What is going on here  In the function add gen you are creating an another function which will simply add the number n to its argument  The trick is that in the variables defined in the function parameter list act as lexically scoped variables  like the ones defined with var   The returned function is defined between the braces of the add gen function so it will have access to the value of n even after add gen function has finished executing  that is why you will get 5 when executing the last line of the example   With the help of function parameters being lexically scoped  you can work around the  problems  arising from using loop variables in anonymous functions  Take a simple example   for var i 0  i lt 5  i        setTimeout function   alert i    10       The  expected  result could be the numbers from zero to four  but you get four instances of fives instead  This happens because the anonymous function in setTimeout and the for loop are using the very same i variable  so by the time the functions get evaluated  i will be 5   You can get the naively expected result by using the technique in your question and the fact  that function parameters are lexically scoped   I ve used this approach in an other answer   for var i 0  i lt 5  i        setTimeout        function j           return function   alert j            i   10       With the immediate evaluation of the outer function you are creating a completely independent variable named j in each iteration  and the current value of i will be copied in to this variable  so you will get the result what was naively expected from the first try   I suggest you to try to understand the excellent tutorial at http   ejohn org apps learn  to understand closures better  that is where I learnt very-very much

User · Answer

It is a self-executing anonymous function  The first set of parentheses contain the expressions to be executed  and the second set of parentheses executes those expressions   It is a useful construct when trying to hide variables from the parent namespace  All the code within the function is contained in the private scope of the function  meaning it can t be accessed at all from outside the function  making it truly private   See   http   en wikipedia org wiki Closure  28computer science 29  http   peter michaux ca articles javascript-namespacing

User · Answer

The first parentheses are for  if you will  order of operations  The  result  of the set of parentheses surrounding the function definition is the function itself which  indeed  the second set of parentheses executes   As to why it s useful  I m not enough of a JavaScript wizard to have any idea   P

User · Answer

A few considerations on the subject    The parenthesis   The browser  engine parser  associates the keyword function with   optional name   optional parameters      code       So in an expression like function       the last parenthesis makes no  sense   Now think at  name function       name         Yes  the first pair of parenthesis force the anonymous function to turn into a variable  stored expression  and the second launches evaluation execution  so   function         makes sense    The utility      For executing some code on load and isolate the used variables from the rest of the page especially when name conflicts are possible  Replace eval  string   with   new Function  string      Wrap long code for          operator like   result   exp to test    function       long code            function

User · Answer

The first parentheses are for  if you will  order of operations  The  result  of the set of parentheses surrounding the function definition is the function itself which  indeed  the second set of parentheses executes   As to why it s useful  I m not enough of a JavaScript wizard to have any idea   P

User · Answer

Andy Hume pretty much gave the answer  I just want to add a few more details   With this construct you are creating an anonymous function with its own evaluation environment or closure  and then you immediately evaluate it  The nice thing about this is that you can access the variables declared before the anonymous function  and you can use local variables inside this function without accidentally overwriting an existing variable   The use of the var keyword is very important  because in JavaScript every variable is global by default  but with the keyword you create a new  lexically scoped variable  that is  it is visible by the code between the two braces  In your example  you are essentially creating short aliases to the objects in the YUI library  but it has more powerful uses   I don t want to leave you without a code example  so I ll put here a simple example to illustrate a closure   var add gen   function n      return function x        return n   x          var add2   add gen 2   add2 3      result is 5   What is going on here  In the function add gen you are creating an another function which will simply add the number n to its argument  The trick is that in the variables defined in the function parameter list act as lexically scoped variables  like the ones defined with var   The returned function is defined between the braces of the add gen function so it will have access to the value of n even after add gen function has finished executing  that is why you will get 5 when executing the last line of the example   With the help of function parameters being lexically scoped  you can work around the  problems  arising from using loop variables in anonymous functions  Take a simple example   for var i 0  i lt 5  i        setTimeout function   alert i    10       The  expected  result could be the numbers from zero to four  but you get four instances of fives instead  This happens because the anonymous function in setTimeout and the for loop are using the very same i variable  so by the time the functions get evaluated  i will be 5   You can get the naively expected result by using the technique in your question and the fact  that function parameters are lexically scoped   I ve used this approach in an other answer   for var i 0  i lt 5  i        setTimeout        function j           return function   alert j            i   10       With the immediate evaluation of the outer function you are creating a completely independent variable named j in each iteration  and the current value of i will be copied in to this variable  so you will get the result what was naively expected from the first try   I suggest you to try to understand the excellent tutorial at http   ejohn org apps learn  to understand closures better  that is where I learnt very-very much

User · Answer

It is a self-executing anonymous function  The first set of parentheses contain the expressions to be executed  and the second set of parentheses executes those expressions   It is a useful construct when trying to hide variables from the parent namespace  All the code within the function is contained in the private scope of the function  meaning it can t be accessed at all from outside the function  making it truly private   See   http   en wikipedia org wiki Closure  28computer science 29  http   peter michaux ca articles javascript-namespacing

User · Answer

See this question   The first set of parenthesis aren t necessary if you use a function name  but a nameless function requires this construct and the parenthesis serve for coders to realize that they ve viewing a self-invoking function when browsing the code  see one blogger s best-practices recommendation

User · Answer

but what about the previous round parenteses surrounding all the function declaration    Specifically  it makes JavaScript interpret the  function          construct as an inline anonymous function expression  If you omitted the brackets   function         alert  hello           You d get a syntax error  because the JS parser would see the  function  keyword and assume you re starting a function statement of the form   function doSomething            and you can t have a function statement without a function name   function expressions and function statements are two different constructs which are handled in very different ways  Unfortunately the syntax is almost identical  so it s not just confusing to the programmer  even the parser has difficulty telling which you mean

User · Answer

It is a self-executing anonymous function  The first set of parentheses contain the expressions to be executed  and the second set of parentheses executes those expressions   It is a useful construct when trying to hide variables from the parent namespace  All the code within the function is contained in the private scope of the function  meaning it can t be accessed at all from outside the function  making it truly private   See   http   en wikipedia org wiki Closure  28computer science 29  http   peter michaux ca articles javascript-namespacing

[javascript] What do parentheses surrounding an object/function/class declaration mean?

Examples related to javascript

Examples related to syntax