The difference between the two functions? (“function x” vs “var x = function”) [duplicate]

Answer 1

They mean the exact same thing. It's just syntactic sugar. The latter is IMO more revealing of what JavaScript is really doing; i.e. "sum" is just a variable, initialised with a function object, which can then be replaced by something else:

$ js
js> function sum(x,y) { return x+y; }
js> sum(1,2);
3
js> sum=3
3
js> sum(1,2);
typein:4: TypeError: sum is not a function
js> sum
3

Answer 2

The two code snippets you've posted there will, for almost all purposes, behave the same way.

However, the difference in behaviour is that with the second variant, that function can only be called after that point in the code.

With the first variant, the function is available to code that runs above where the function is declared.

This is because with the second variant, the function is assigned to the variable foo at run time. In the first, the function is assigned to that identifier foo at parse time.

More technical info

Javascript has three ways of defining functions.

1. Your first example is a function declaration. This uses the "function" statement to create a function. The function is made available at parse time and can be called anywhere in that scope. You can still store it in a variable or object property later.
2. Your second snippet shows a function expression. This involves using the "function" operator to create a function - the result of that operator can be stored in any variable or object property. The function expression is powerful that way. The function expression is often called an "anonymous function" because it does not have to have a name,
3. The third way of defining a function is the "Function()" constructor, which is not shown in your original post. It's not recommended to use this as it works the same way as eval(), which has its problems.

Answer 3

The first one is a named function statement, the second one assigns an anonymous function expression to a variable.

The function statement is added to its scope immediately - you don't need to run it before being able to call it, so this works:

var y = sum(1, 2);

function sum(x, y) {
   return x + y;
}

But the function expression is only assigned to the variable when the code is executed, so this doesn't work:

// Error here because the function hasn't been assigned to sum yet.
var y = sum(1, 2);

var sum = function(x, y) {
   return x + y;
}

An advantage of the expression form is that you can use it to assign different functions to the expression at different points - so you can change the function, or use a different one under different conditions (such as depending on the browser being used).

An advantage of a named function statement, is that debuggers will be able to display the name. Although, you can name function expressions:

var sum = function sum(x, y) {
   return x + y;
}

But this can be confusing since the two names are actually in different scopes and refer to different things.

Answer 4

here's an other example: function sayHello(name) { alert('hello' + name) }

now,suppose you want modify onclick event of a button, such as it says "hello world"

you can not write:

yourBtn.onclik = sayHello('world'), because you must provide a function reference.

then you can use second form: yourBtn.onclick = function() { sayHello('workld'); }

Ps: sorry for my bad english!

Answer 5

The difference is...

This is a nameless function

var sum = function (x, y) {
    return x+y;
}

So if you alert(sum); you get "function (x, y) { return x + y; }" (nameless) While this is a named function:

function sum(x, y) {
        return x+y;
}

If you alert(sum); now you get "function sum(x, y) { return x + y; }" (name is sum)

Having named functions help if you are using a profiler because the profiler can tell you function sum's execution time...etcetera instead of an unknown functions's execution time...etcetera

Answer 6

The first tends to be used for a few reasons:

1. The name "sum" shows up in the stacktrace which makes debugging easier in many browsers.
2. The name "sum" can be used inside the function body which makes it easier to use for recursive functions.
3. function declarations are "hoisted" in javascript, so in the first case, the function is guaranteed to be defined exactly once.

4. Semicolon insertion causes

   var f = function (x) { return 4; }
   
   (f)
   

   to assign 4 to f.

There are a few caveats to keep in mind though. Do not do

  var sum = function sum(x, y) { ... };

on IE 6 since it will result in two function objects being created. Especially confusing if you do

  var sum = function mySym(x, y) { ... };

According to the standard, function sum(x, y) { ... } cannot appear inside an if block or a loop body, so different interpreters will treat

  if (0) {
    function foo() { return 1; }
  } else {
    function foo() { return 2; }
  }
  return foo();

differently. In this case, you should do

  var foo;
  if (0) {
    foo = function () { return 1; }
  } ...