JavaScript - What's the difference between an anonymous function and just regular code?

Question

I am wondering what the difference is between this:

(function(msg) {
    alert(msg);
}('Hi'));

and this:

alert('Hi');

Because when you use an anonymous function, you can't run it twice, right? You can't do this:

(function(msg) {
    alert(msg);
}('Hi')('Goodbye'));

So what's the point of an anonymous function?

This:

(function(msg) {
    alert(msg);
}('Hi'));

gets the same output as this:

alert('Hi');

Could someone tell me what the difference is?

It's not about the anonymous function, it's about closures and scope, see here http://stackoverflow.com/questions/8228281/what-is-this-construct-in-javascript — elclanrs, Nov 29 '13 at 22:16
In this case - there is no point. There is a point if you declare some variables in the function - in that case the variables will remain in the anonymous function's scope and not be visible from anywhere else. — Vatev, Nov 29 '13 at 22:19

score 3 · Accepted Answer · answered Nov 29 '13 at 22:23

The main difference is that it has its own scope. Example:

(function(msg) {
  var x = msg; // local variable in the scope
  alert(x);
}('Hi'));

// the variable x doesn't exist out here

That is useful when you for example create a function in the scope, and expose it outside. The function still has access to the scope even when executed outside it. That way the function can keep a state, without exposing the state globally:

var f = (function(msg) {
  var cnt = 1;
  return function(){
    alert(msg + ' ' + cnt);
    cnt++;
  };
}('Hi'));

f(); // shows "Hi 1"
f(); // shows "Hi 2"

Thanks! This is just the answer I need. – Oliver Ni Nov 29 '13 at 22:59 — Oliver Ni, Nov 29 '13 at 22:59

score 2 · Answer 2 · answered Nov 29 '13 at 22:25

Your example shows an Anonymous Function that is self-executing. The self-executing Function closes off scope, so you can do things like this:

var count = (function(){
  var c = 0;
  return function(){
    return c++;
  }
})();
console.log(count()); console.log(count());

In your first example nothing different will occur. An Anonymous function, just has no name, so this:

document.getElementById('whatever').addEventListener('click', function(){alert('wow')});

and

function wow(){
  alert('wow');
}
document.getElementById('whatever').addEventListener('click', wow);

do the same thing.

No, that would execute the function on the spot, before the event is fired. A function name is basically a variable that is executed with `()`. — StackSlave, Nov 29 '13 at 23:10

score 1 · Answer 3 · answered Nov 29 '13 at 22:28

the anonymous function is when you declare a function without name i.e

function(){
  ...
}

Your example is an inmediate function, here you can hide properties and functionality (using closures, this is complex I recommend you The secrets of JS Ninja, but is a intermediate lvl book.), so you can use this when use the module pattern:

(function(msg) {
    alert(msg);
}('Hi'));

BTW this is a good resource about patterns in JS: http://addyosmani.com/resources/essentialjsdesignpatterns/book/

JavaScript - What's the difference between an anonymous function and just regular code?

3 Answers3