49

Possible Duplicate:
JavaScript: var functionName = function() {} vs function functionName() {}
Declaring functions in JavaScript

I've seen 2 different syntaxes for defining functions in javascript:

function f() {
   ...
}

As well as

var f = function() {
    ...
};

What's the difference between these? Is one of them deprecated?

Community
  • 1
  • 1
CaptainCodeman
  • 1,951
  • 2
  • 20
  • 33
  • Here's an answer to your question: http://stackoverflow.com/a/1013387/236135 and here's the question that was asked with proper terms http://stackoverflow.com/questions/1013385/what-is-the-difference-between-a-function-expression-vs-declaration-in-javascrip – Misha Reyzlin Feb 24 '12 at 00:46

1 Answers1

47

Neither are deprecated, and both will work. The difference here is that one is a named function ( function f() ) while the other is a variable equal to a function ( var f = function() ).

You have to be careful when setting variables equal to functions. This will work:

var f = function(n) { console.log(n); };
f(3); // logs 3

But this will break, since the variable is defined after the call to it.

f(3); // what is f? breaks.
var f = function(n) { console.log(n); };

But normal functions work fine.

function abc(n) { console.log(n); }

abc(3); // logs 3
xyz(5); // logs 5

function xyz(n) { console.log(n); }

This is because the code is analysed before execution, and all functions are available to call. But setting a var equal to a function is like setting a var to anything else. The order of when it happens is important.

Now for some more confusing stuff...

There are also 'self-executing' anonymous functions. They go by a variety of names. The most common way to do it looks something like this:

(function() {
    // code in here will execute right away
    // since the () at the end executes this (function(){})
})();

There is also an arguably better version.

!function() {
    // again, the tailing () will execute this
}();

Check out this Stack Overflow post for more on anonymous functions.

Community
  • 1
  • 1
Marshall
  • 4,716
  • 1
  • 19
  • 14
  • 1
    You can also have self-invoking named functions: `(function foo() {...}())`, or named functions assigned to a variable: `var foo = function bar() {...};`. The actual noteworthy difference is that one is a *function declaration* which always has to be named, whereas a *function expression* can either be named or anonymous. – Felix Kling Feb 24 '12 at 00:53
  • @FelixKling Good point. The self-invoked named functions `(function foo() {...}())` are interesting since you can call `foo` from within itself, but not outside. Even when writing it as `!function foo() {...}();`. – Marshall Feb 24 '12 at 00:59
  • 1
    Yes, when you have a named function expression, the name is only available inside the function itself. Sadly, IE has some problems with named function expressions (it creates two copies of the same function), so it is better to be avoided. But theoretically it works ;) – Felix Kling Feb 24 '12 at 01:03
  • 6
    What is the ! before the last function definition? – Juergen Aug 15 '13 at 20:46
  • 2
    @Juergen see http://stackoverflow.com/questions/3755606/what-does-the-exclamation-mark-do-before-the-function for a great explanation – dspies Jan 24 '14 at 21:12
  • This isn't just because the code is "analysed before execution" but because of hoisting. With the function expression syntax (`var func = function(){}`) the `var func` part is hoisted up to the top of the scope and that is why in the first example the comment is incorrect, there is an `f` variable declared, it's just has an `undefined` value assigned to it. With the function declaration syntax (`function funcName (){}`) the whole thing is hoisted up to the top of the scope and thats why its always available. – Lior Jun 23 '14 at 10:10