4

Possible Duplicate:
Javascript: var functionName = function() {} vs function functionName() {}

Way 1:

function fancy_function(){
    // Fancy stuff happening here
}

Way 2:

var fancy_function = function(){
    // Fancy stuff happening here, too.
}

I use the former when I'm just defining a "normal" function that I'm gonna use one or several times and the latter when I'm passing it a callback for another function or so, but it looks to work fine in the both ways.

Is it really a difference in some way?

Community
  • 1
  • 1
Erik Escobedo
  • 2,655
  • 21
  • 41
  • 1
    it's been answered really well several times here. just search on google or stackoverflow. – Anurag Jul 13 '10 at 15:52
  • 2
    http://stackoverflow.com/questions/336859/javascript-var-functionname-function-vs-function-functionname and http://stackoverflow.com/questions/1925976/declaring-functions-in-javascript-closed – Anurag Jul 13 '10 at 16:00
  • Thank you, @Anurag. I choose an answer for closing this already. I'll be more cautious in the future. – Erik Escobedo Jul 13 '10 at 16:08
  • 1
    @Eric - No worries. My point was that the linked articles have been there for ages, and contain some well thought out answers. It's difficult to match a well thought, edited, long refined answer like that in say 15 minutes. – Anurag Jul 13 '10 at 17:40

6 Answers6

2
  1. function definition
  2. function literal assignment

only difference is you can access the former instantly in certain cases whereas you have to wait for the assignment on the latter.

Don't run this in firebug console/interpreter to test it, rather test on a real html page.

say('spotted');
function say(msg){ alert(msg) }

The above will work, but if you defined a function literal with var say = function(){} below, it would complain that it isn't defined yet.

meder omuraliev
  • 171,706
  • 64
  • 370
  • 423
2

In the first sample you are defining a named function -- that function will always be known by that name. Defining a different function with the same name will be an error (unless you assign to the window property directly). In the second sample, you are defining an anonymous function and assigning it as the value of a variable. You can change the value of the variable to any other function later as desired; losing, of course, any reference to the anonymous function in the process unless you've stored it elsewhere. So, you're not really doing the same thing in both cases, though you can treat it that way if you wish -- and make sure to define the function before it's used in the second case, though that's more a function of variables than functions per se.

tvanfosson
  • 490,224
  • 93
  • 683
  • 780
2

There is no difference to the function itself, but the latter gives you more flexibility as you have a reference to the function and it is different with regard to how it behaves if overwritten.

This allows you to achieve behaviours with the latter that you cannot achieve with the former; such as the following trick to "override" an existing function and then call the "base":

var myOriginalFunction = function() {
    window.alert("original");
}

var original = myOriginalFunction;

var myOriginalFunction = function() {
    window.alert("overridden");
 original();
}

myOriginalFunction();

This gives you an alert "overridden", followed by an alert "original".

However, if you attempt this with the former notation, you'll find you get stuck in a never ending loop of alert "overidden".

Rob Levine
  • 37,567
  • 13
  • 78
  • 108
0

You can use either depending on the situation, both become the methods of the window object. The later is known as anonymous function.

Sarfraz
  • 355,543
  • 70
  • 511
  • 562
0

As far as the function is concerned, they will behave identically.

See here for more details: http://javascript.about.com/library/blfunc.htm

leecbaker
  • 3,283
  • 2
  • 31
  • 48
0

Functions defined with the Function(){} style are available throughout the program, without having to be defined earlier in the code than where they are called. It's called 'hoisting', I believe.

so this works

cow('spotted');
function cow(color){ return 'cow is '+color; }

but this throws an error

cow('spotted');//cow isn't defined yet!
var cow=function(color){ return 'cow is '+color; }
JAL
  • 20,237
  • 1
  • 45
  • 63