Why do you need to invoke an anonymous function on the same line

Question

I was reading some posts about closures and saw this everywhere  but there is no clear explanation how it works - everytime I was just told to use it         Create a new anonymous function  to use as a wrapper  function           The variable that would  normally  be global     var msg    Thanks for visiting            Binding a new function to a global object     window onunload   function               Which uses the  hidden  variable         alert  msg              Close off the anonymous function and execute it         Ok I see that we will create new anonymous function and then execute it  So after that this simple code should work  and it does     function  msg  alert msg     SO      My question is what kind of magic happens here  I thought that when I wrote    function  msg  alert msg      then a new unnamed function would be created like function    msg       but then why doesn t this work    function  msg  alert msg       SO      Why does it need to be in the same line   Could you please point me some posts or give me an explanation

User · Answer

In summary of the previous comments   function       alert  hello           when not assigned to a variable  yields a syntax error   The code is parsed as a function statement  or definition   which renders the closing parentheses syntactically incorrect   Adding parentheses around the function portion tells the interpreter  and programmer  that this is a function expression  or invocation   as in   function       alert  hello            This is a self-invoking function  meaning it is created anonymously and runs immediately because the invocation happens in the same line where it is declared   This self-invoking function is indicated with the familiar syntax to call a no-argument function  plus added parentheses around the name of the function   myFunction       There is a good SO discussion JavaScript function syntax

User · Answer

examples without brackets   void function  msg    alert msg       SO       this is the only real use of void  afaik   or   var a   function  msg    alert msg       SO      or   function  msg    alert msg       SO      work as well  the void is causing the expression to evaluate  as well as the assignment and the bang  the last one works with       -  delete  typeof  some of the unary operators  void is one as well   not working are of couse     -- because of the requirement of a variable   the line break is not necessary

User · Answer

My understanding of the asker s question is such that   How does this magic work    function        input        Used in his example   I may be wrong  However  the usual practice that people are familiar with is    function      input       The reason is such that JavaScript parentheses AKA     can t contain statements and when the parser encounters the function keyword  it knows to parse it as a function expression and not a function declaration   Source  blog post Immediately-Invoked Function Expression  IIFE

User · Answer

The IIFE simply compartmentalizes the function and hides the msg variable so as to not  pollute  the global namespace  In reality  just keep it simple and do like below unless you are building a billion dollar website   var msg    later dude   window onunload   function msg     alert  msg         You could namespace your msg property using a Revealing Module Pattern like   var myScript    function         var pub             myscript msg     pub msg    later dude       window onunload   function msg            alert msg                API     return pub

User · Answer

Another point of view   First  you can declare an anonymous function   var foo   function msg    alert msg       Then you call it   foo   Few      Because foo   function msg  alert msg    so you can replace foo as   function msg    alert msg       Few      But you should wrap your entire anonymous function inside pair of braces to avoid syntax error of declaring function when parsing  Then we have    function msg    alert msg        Few      By this way  It s easy understand for me

User · Answer

The code you show    function  msg  alert msg       SO      consist of two statements  The first is an expression which yields a function object  which will then be garbage collected because it is not saved   The second is an expression which yields a string  To apply the function to the string  you either need to pass the string as an argument to the function when it is created  which you also show above   or you will need to actually store the function in a variable  so that you can apply it at a later time  at your leisure  Like so   var f    function  msg  alert msg     f  SO      Note that by storing an anonymous function  a lambda function  in a variable  your are effectively giving it a name  Hence you may just as well define a regular function   function f msg   alert msg    f  SO

User · Answer

Anonymous functions are functions that are dynamically declared at runtime  They   re called anonymous functions because they aren   t given a name in the same way as normal functions   Anonymous functions are declared using the function operator instead of the function declaration  You can use the function operator to create a new function wherever it   s valid to put an expression  For example you could declare a new function as a parameter to a function call or to assign a property of another object   Here   s a typical example of a named function   function flyToTheMoon       alert  Zoom  Zoom  Zoom       flyToTheMoon    Here   s the same example created as an anonymous function   var flyToTheMoon   function       alert  Zoom  Zoom  Zoom       flyToTheMoon     For details please read here   http   helephant com 2008 08 23 javascript-anonymous-functions

User · Answer

This answer is not strictly related to the question  but you might be interested to find out that this kind of syntax feature is not particular to functions  For example  we can always do something like this   alert       foo   I am foo   bar   I am bar   foo       alerts  I am foo    Related to functions  As they are objects  which inherit from Function prototype  we can do things like   Function prototype foo   function          return function              alert  foo               var bar    function        foo     bar       alerts foo   And you know  we don t even have to surround functions with parenthesis in order to execute them  Anyway  as long as we try to assign the result to a variable   var x   function              this function is executed but does nothing  function              syntax error   One other thing you may do with functions  as soon as you declare them  is to invoke the new operator over them and obtain an object  The following are equivalent   var obj   new function          this foo    bar       var obj         foo    bar

User · Answer

There is one more property JavaScript function has  If you want to call same anonymous function recursively    function forInternalOnly         you can use forInternalOnly to call this anonymous function       forInternalOnly can be used inside function only  like   var result   forInternalOnly             this will not work forInternalOnly      no such a method exist

User · Answer

Drop the semicolon after the function definition    function  msg  alert msg      SO      Above should work   DEMO Page  https   jsfiddle net e7ooeq6m   I have discussed this kind of pattern in this post   jQuery and   questions  EDIT   If you look at ECMA script specification  there are 3 ways you can define a function   Page 98  Section 13 Function Definition   1  Using Function constructor  var sum   new Function  a   b    return a   b     alert sum 10  20      alerts 30   2  Using Function declaration   function sum a  b        return a   b     alert sum 10  10      Alerts 20    3  Function Expression  var sum   function a  b    return a   b     alert sum 5  5       alerts 10   So you may ask  what s the difference between declaration and expression    From ECMA Script specification      FunctionDeclaration         function Identifier   FormalParameterListopt    FunctionBody          FunctionExpression         function Identifieropt   FormalParameterListopt    FunctionBody       If you notice   identifier  is optional for function expression  And when you don t give an identifier  you create an anonymous function  It doesn t mean that you can t specify an identifier   This means following is valid   var sum   function mySum a  b    return a   b      Important point to note is that you can use  mySum  only inside the mySum function body  not outside  See following example   var test1   function test2     alert typeof test2      alert typeof test2      alerts  undefined   surprise    test1      alerts  function  because test2 is a function    Live Demo  Compare this to   function test1     alert typeof test1       alert typeof test1     alerts  function    test1      alerts  function      Armed with this knowledge  let s try to analyze your code   When you have code like        function msg    alert msg       You created a function expression  And you can execute this function expression by wrapping it inside parenthesis        function msg    alert msg       SO      alerts SO

User · Answer

It s just how JavaScript works  You can declare a named function   function foo msg      alert msg       And call it   foo  Hi       Or  you can declare an anonymous function   var foo   function  msg        alert msg       And call that   foo  Hi       Or  you can just never bind the function to a name    function msg      alert msg        Hi       Functions can also return functions   function make foo         return function msg   alert msg         make foo     Hi       It s worth nothing that any variables defined with  var  in the body of make foo will be closed over by each function returned by make foo   This is a closure  and it means that the any change made to the value by one function will be visible by another     This lets you encapsulate information  if you desire   function make greeter msg       return function     alert msg        var hello   make greeter  Hello      hello      It s just how nearly every programming language but Java works

User · Answer

When you did    function  msg  alert msg       SO      You ended the function before   SO   because of the semicolon  If you just write    function  msg  alert msg      SO      It will work   Working example  http   jsfiddle net oliverni dbVjg

User · Answer

One thing I found confusing is that the      are grouping operators    Here is your basic declared function    Ex  1   var message    SO    function foo msg        alert msg      foo message     Functions are objects  and can be grouped  So let s throw parens around the function    Ex  2   var message    SO    function foo msg       declares foo     alert msg       foo  message          calls foo   Now instead of declaring and right-away calling the same function  we can use basic substitution to declare it as we call it    Ex  3   var message    SO     function foo msg        alert msg      message               declares  amp  calls foo   Finally  we don t have a need for that extra foo because we re not using the name to call it  Functions can be anonymous    Ex  4   var message    SO     function  msg         remove unnecessary reference to foo     alert msg      message     To answer your question  refer back to Example 2  Your first line declares some nameless function and groups it  but does not call it  The second line groups a string  Both do nothing   Vincent s first example     function  msg  alert msg         SO                             nothing    foo     msg     Still nothing    But    foo   msg     works

User · Answer

It s called a self-invoked function     What you are doing when you call  function      is returning a function object   When you append    to it  it is invoked and anything in the body is executed   The   denotes the end of the statement  that s why the 2nd invocation fails

User · Answer

Anonymous functions are meant to be one-shot deal where you define a function on the fly so that it generates an output from you from an input that you are providing  Except that you did not provide the input  Instead  you wrote something on the second line   SO    - an independent statement that has nothing to do with the function  What did you expect

User · Answer

An anonymous function is not a function with the name     It is simply a function without a name   Like any other value in JavaScript  a function does not need a name to be created  Though it is far more useful to actually bind it to a name just like any other value   But like any other value  you sometimes want to use it without binding it to a name  That s the self-invoking pattern   Here is a function and a number  not bound  they do nothing and can never be used   function    alert  plop      2    So we have to store them in a variable to be able to use them  just like any other value   var f   function    alert  plop      var n   2    You can also use syntatic sugar to bind the function to a variable   function f    alert  plop      var n   2    But if naming them is not required and would lead to more confusion and less readability  you could just use them right away    function    alert  plop             will display  plop  alert 2   3      will display 5   Here  my function and my numbers are not bound to a variable  but they can still be used   Said like this  it looks like self-invoking function have no real value  But you have to keep in mind that JavaScript scope delimiter is the function and not the block        So a self-invoking function actually has the same meaning as a C    C  or Java block  Which means that variable created inside will not  leak  outside the scope  This is very useful in JavaScript in order not to pollute the global scope

User · Answer

function  msg  alert msg      SO      This is a common method of using an anonymous function as a closure which many JavaScript frameworks use   This function called is automatically when the code is compiled   If placing   at the first line  the compiler treated it as two different lines  So you can t get the same results as above   This can also be written as    function  msg  alert msg    SO       For more details  look into JavaScript Anonymous Functions

User · Answer

It is a self-executing anonymous function  The first set of brackets contain the expressions to be executed  and the second set of brackets executes those expressions    function          return   10   20            Peter Michaux discusses the difference in An Important Pair of Parentheses   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    Closure  computer science  JavaScript Namespacing Important Pair of Javascript Parentheses

User · Answer

The simple reason why it doesn t work is not because of the   indicating the end of the anonymous function  It is because without the    on the end of a function call  it is not a function call  That is   function help    return true     If you call result   help    this is a call to a function and will return true   If you call result   help  this is not a call  It is an assignment where help is treated like data to be assigned to result   What you did was declaring instantiating an anonymous function by adding the semicolon    function  msg       Code here          and then tried to call it in another statement by using just parentheses    Obviously because the function has no name  but this will not work     SO      The interpreter sees the parentheses on the second line as a new instruction statement  and thus it does not work  even if you did it like this    function  msg    code here       SO      It still doesn t work  but it works when you remove the semicolon because the interpreter ignores white spaces and carriages and sees the complete code as one statement    function  msg    code here               This space is ignored by the interpreter   SO      Conclusion  a function call is not a function call without the    on the end unless under specific conditions such as being invoked by another function  that is  onload  help  would execute the help function even though the parentheses were not included  I believe setTimeout and setInterval also allow this type of function call too  and I also believe that the interpreter adds the parentheses behind the scenes anyhow which brings us back to  a function call is not a function call without the parentheses

[javascript] Why do you need to invoke an anonymous function on the same line?

Examples related to javascript

Examples related to anonymous-function

Examples related to iife