The difference between the two functions? ("function x" vs "var x = function")

The first is known as a named function where the second is known as an anonymous function.

The key practical difference is in when you can use the sum function. For example:-

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

z is assigned 5 whereas this:-

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

Will fail since at the time the first line has executed the variable sum has not yet been assigned the function.

Named functions are parsed and assigned to their names before execution begins which is why a named function can be utilized in code that precedes its definition.

Variables assigned a function by code can clearly only be used as function once execution has proceeded past the assignment.

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; }
  } ...

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.

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

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!

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