var functionName = function() {} vs function functionName() {}

First I want to correct Greg: function abc(){} is scoped too — the name abc is defined in the scope where this definition is encountered. Example:

function xyz(){
  function abc(){};
  // abc is defined here...
}
// ...but not here

Secondly, it is possible to combine both styles:

var xyz = function abc(){};

xyz is going to be defined as usual, abc is undefined in all browsers but IE — do not rely on it being defined. But it will be defined inside its body:

var xyz = function abc(){
  // xyz is visible here
  // abc is visible here
}
// xyz is visible here
// abc is undefined here

If you want to alias functions on all browsers use this kind of declaration:

function abc(){};
var xyz = abc;

In this case both xyz and abc are aliases of the same object:

console.log(xyz === abc); // prints "true"

One compelling reason to use the combined style is the "name" attribute of function objects (not supported by IE). Basically when you define a function like this:

function abc(){};
console.log(abc.name); // prints "abc"

its name is automatically assigned. But when you define it like this:

var abc = function(){};
console.log(abc.name); // prints ""

its name is empty — we created an anonymous function and assigned it to some variable.

Another good reason to use the combined style is to use a short internal name to refer to itself, while providing a long non-conflicting name for external users:

// assume really.long.external.scoped is {}
really.long.external.scoped.name = function shortcut(n){
  // let's call itself recursively:
  shortcut(n - 1);
  // ...
  // let's pass itself as a callback:
  someFunction(shortcut);
  // ...
}

In the example above we can do the same with an external name, but it'll be too unwieldy (and slower).

(Another way to refer to itself is to use arguments.callee, which is still relatively long, and not supported in the strict mode.)

Deep down JavaScript treats both statements differently. This is a function declaration:

function abc(){}

abc here is defined everywhere in the current scope:

// we can call it here
abc(); // works
// yet it is defined down there
function abc(){}
// we can call it again
abc(); // works

This is a function expression:

var xyz = function(){};

xyz here is defined from the point of assignment:

// we can't call it here
xyz(); // UNDEFINED!!!
// now it is defined
xyz = function(){}
// we can call it here
xyz(); // works

Function declaration vs. function expression is the real reason why there is a difference demonstrated by Greg.

Fun fact:

var xyz = function abc(){};
console.log(xyz.name); // prints "abc"

Personally I prefer the "function expression" declaration because this way I can control the visibility. When I define the function like that:

var abc = function(){};

I know that I defined the function locally. When I define the function like that:

abc = function(){};

I know that I defined it globally providing that I didn't define abc anywhere in the chain of scopes. This style of definition is resilient even when used inside eval(). While this definition:

function abc(){};

depends on the context and may leave you guessing where it is actually defined, especially in the case of eval() — the answer is: it depends on browser.

Speaking about the global context, both, the var statement and a FunctionDeclaration at the end will create a non-deleteable property on the global object, but the value of both can be overwritten.

The subtle difference between the two ways is that when the Variable Instantiation process runs (before the actual code execution) all identifiers declared with var will be initialized with undefined, and the ones used by the FunctionDeclaration's will be available since that moment, for example:

 alert(typeof foo); // 'function', it's already available
 alert(typeof bar); // 'undefined'
 function foo () {}
 var bar = function () {};
 alert(typeof bar); // 'function'

The assignment of the bar FunctionExpression takes place until runtime.

A global property created by a FunctionDeclaration can be overwritten without any problems just like a variable value, e.g.:

 function test () {}
 test = null;

Another obvious difference between your two examples is that the first function doesn't have a name, but the second has it, which can be really useful when debugging (i.e. inspecting a call stack).

About your edited first example (foo = function() { alert('hello!'); };), it is an undeclared assignment, I would highly encourage you to always use the var keyword.

With an assignment, without the var statement, if the referenced identifier is not found in the scope chain, it will become a deleteable property of the global object.

Also, undeclared assignments throw a ReferenceError on ECMAScript 5 under Strict Mode.

A must read:

• Named function expressions demystified

Note: This answer has been merged from another question, in which the major doubt and misconception from the OP was that identifiers declared with a FunctionDeclaration, couldn't be overwritten which is not the case.

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 first variant, that function can only be called after that point in the code.

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

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

More technical info

Javascript has three ways of defining functions.

1. Your first 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,
2. Your second 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.
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.

Other commenters have already covered the semantic difference of the two variants above. I wanted to note a stylistic difference: Only the "assignment" variation can set a property of another object.

I often build javascript modules with a pattern like this:

(function(){
        var exports = {};

        function privateUtil() {
                ...
        }

        exports.publicUtil = function() {
                ...
        };

        return exports;
})();

With this pattern, your public functions will all use assignment, while your private functions use declaration.

(Note also that assignment should require a semicolon after the statement, while declaration prohibits it.)

Here's the rundown on the standard forms that create functions: (Originally written for another question, but adapted after being moved into the canonical question.)

Function Declaration

The first form is a function declaration, which looks like this:

function x() {
    console.log('x');
}

A function declaration is a declaration; it's not a statement or expression. As such, you don't follow it with a ; (although doing so is harmless).

A function declaration is processed when execution enters the context in which it appears, before any step-by-step code is executed. The function it creates is given a proper name (x in the example above), and that name is put in the scope in which the declaration appears.

Because it's processed before any step-by-step code in the same context, you can do things like this:

x(); // Works even though it's above the declaration
function x() {
    console.log('x');
}

Also because it's not part of the step-by-step execution of the code, you can't put it inside a control structure like try, if, switch, while, etc.

if (someCondition) {
    function foo() {    // <===== INVALID AND WILL FAIL ON
    }                   //        MANY ENGINES
}

Some engines will handle the above even though it's invalid, by rewriting it as a function expression on-the-fly. There's talk of adding a function statement to the next spec (ECMAScript6) to codify that. But with current engines, it will not work reliably; don't do it.

Anonymous Function Expression

The second common form is called an anonymous function expression:

var y = function () {
    console.log('y');
};

The function this creates has no name (it's anonymous). Like all expressions, it's evaluated when it's reached in the step-by-step execution of the code.

I should note that the current draft of the next version of the JavaScript standard, ECMAScript6, will actually assign a name to that function by inferring it from the context. The name in this case would be y. Mozilla's (Firefox's) JavaScript engine does that already, and it will be in the next spec. Basically any time the parser can make a reasonable guess, as it can above, it will (once engines are doing this new thing).

Named Function Expression

The third form is a named function expression ("NFE"):

var z = function w() {
    console.log('zw')
};

The function this creates has a proper name (w in this case). Like all expressions, this is evaluated when it's reached in the step-by-step execution of the code. The name of the function is not added to the scope in which the expression appears; the name is in scope within the function itself:

var z = function w() {
    console.log(typeof w); // "function"
};
console.log(typeof w);     // "undefined"

Note that NFEs have frequently been a source of bugs for JavaScript implementations. IE8 and earlier, for instance, handle NFEs completely incorrectly, creating two different functions at two different times. Early versions of Safari had issues as well. The good news is that current versions of browsers (IE9 and up, current Safari) don't have those issues any more. (But as of this writing, sadly, IE8 remains in widespread use, and so using NFEs with code for the web in general is still problematic.)

An important reason is to add one and only one variable as the "Root" of your namespace...

var MyNamespace = {}
MyNamespace.foo= function() {

}

or

var MyNamespace {
  foo: function() {
  },
  ...
}

There are many techniques for namespacing. Its become more important with the plethora of JavaScript modules available.

Also see Javascript Namespace Declaration

An illustration of when to prefer the first method on the second one is when you need to avoid overriding a function's previous definition.

With :

if (condition){
    function myfunction(){
        // some code 
    }
}

, this definition of myfunction will override any previous definition, since it will be done at parse-time.

While :

if (condition){
    var myfunction = function (){
        // some code
    }
}

does the correct job of defining myfunction only when condition is met.

A function declaration and a function expression assigned to a variable behave the same once the binding is established.

There is a difference however at how and when the function object is actually associated with its variable. This difference is due to the mechanism called variable hoisting in JavaScript.

Basically, all function declarations and variable declarations are hoisted to the top of the function in which the declaration occurs (this is why we say that JavaScript has function scope).

• When a function declaration is hoisted, the function body "follows" so when the function body is evaluated, the variable will immediately be bound to a function object.

• When a variable declaration is hoisted, the initialization does not follow, but is "left behind". The variable is initialized to undefined at the start of the function body, and will be assigned a value at its original location in the code. (Actually, it will be assigned a value at every location where a declaration of a variable with the same name occurs.)

The order of hoisting is also important: function declarations take precedence over variable declarations with the same name, and the last function declaration takes precedence over previous function declarations with the same name.

Some examples...

var foo = 1;
function bar() {
  if (!foo) {
    var foo = 10 }
  return foo; }
bar() // 10

Variable foo is hoisted to the top of the function, initialized to undefined, so that !foo is true, so foo is assigned 10. The foo outside of bar's scope plays no role and is untouched.

function f() {
  return a; 
  function a() {return 1}; 
  var a = 4;
  function a() {return 2}}
f()() // 2

function f() {
  return a;
  var a = 4;
  function a() {return 1};
  function a() {return 2}}
f()() // 2

Function declarations take precedence over variable declarations, and the last function declaration "sticks".

function f() {
  var a = 4;
  function a() {return 1}; 
  function a() {return 2}; 
  return a; }
f() // 4

In this example a is initialized with the function object resulting from evaluating the second function declaration, and then is assigned 4.

var a = 1;
function b() {
  a = 10;
  return;
  function a() {}}
b();
a // 1

Here the function declaration is hoisted first, declaring and initializing variable a. Next, this variable is assigned 10. In other words: the assignment does not assign to outer variable a.

I use the variable approach in my code for a very specific reason, the theory of which has been covered in an abstract way above, but an example might help some people like me, with limited javascript expertise.

I have code that I need to run with 160 independently-designed brandings. Most of the code is in shared files, but branding-specific stuff is in a separate file, one for each branding.

Some brandings require specific functions, some do not. Sometimes I have to add new functions to do new branding-specific things. I am happy to change the shared coded, but I don't want to have to change all 160 sets of branding files.

By using the variable syntax, I can declare the variable (a function pointer essentially) in the shared code and either assign a trivial stub function, or set to null.

The one or two brandings that need a specific implementation of the function can then define their version of the function and assign this to the variable if they want, the rest do nothing. I can test for a null function before I execute it in the shared code.

From people's comments above, I gather it may be possible to redefine a static function too, but I think the variable solution is nice and clear.

In computer science terms, we are talking about anonymous functions and named functions. I think the most important difference is that an anonymous function is not bound to an name, hence the name anonymous function. In Javascript it is a first class object dynamically declared at runtime.

For more informationen on anonymous functions and lambda calculus, Wikipedia is a good start (http://en.wikipedia.org/wiki/Anonymous_function).

In terms of code maintenance cost named functions are more preferable:

• independent from place where they are declared( but still limited by scope).
• More resistant to mistakes like conditional initialization.(You are still able to override if wanted to).
• The code becomes more readable by allocating local functions separately of scope functionality. Usually in the scope the functionality goes first, followed by declarations of local functions.
• in debugger you will clearly see on call stack the function name instead of "anonymous/evaluated" function.

I suspect more PROS for named functions are follow. And what is listed as advantage of named functions is disadvantage for anonymous ones.

Historically anonymous functions appeared from inability of JS as language to list members with named functions:

{ member:function(){/* how to make this.member a named function? */} }

@EugeneLazutkin gives an example where he names an assigned function to be able to use shortcut() as an internal reference to itself. John Resig gives another example - copying a recursive function assigned to another object in his Learning Advanced Javascript tutorial. While assigning functions to properties isn't strictly the question here, I recommend actively trying the tutorial out - run the code by clicking the button in the upper right corner, and double click the code to edit to your liking.

Examples from the tutorial: recursive calls in yell():

Tests fail when the original ninja object is removed. (page 13)

var ninja = { 
  yell: function(n){ 
    return n > 0 ? ninja.yell(n-1) + "a" : "hiy"; 
  } 
}; 
assert( ninja.yell(4) == "hiyaaaa", "A single object isn't too bad, either." ); 

var samurai = { yell: ninja.yell }; 
var ninja = null; 

try { 
  samurai.yell(4); 
} catch(e){ 
  assert( false, "Uh, this isn't good! Where'd ninja.yell go?" ); 
}

If you name the function that will be called recursively, the tests will pass. (page 14)

var ninja = { 
  yell: function yell(n){ 
    return n > 0 ? yell(n-1) + "a" : "hiy"; 
  } 
}; 
assert( ninja.yell(4) == "hiyaaaa", "Works as we would expect it to!" ); 

var samurai = { yell: ninja.yell }; 
var ninja = {}; 
assert( samurai.yell(4) == "hiyaaaa", "The method correctly calls itself." );

First one(function doSomething(x)) should be part of an object notation.

The second one(var doSomething = function(x){ alert(x);}) is simply creating an anonymous function and assigning it to a variable doSomething . So doSomething() will call the function.

you may want to What is a Function Declaration and Function Expression

A Function Declaration defines a named function variable without requiring variable assignment. Function Declarations occur as standalone constructs and cannot be nested within non-function blocks.

function foo() {
    return 3;
}

ECMA 5 (13.0) defines the syntax as
function Identifier ( FormalParameterList_opt ) { FunctionBody }

in above condition the function name is visible within it’s scope and the scope of it’s parent (otherwise it would be unreachable)

and in function expression

A Function Expression defines a function as a part of a larger expression syntax (typically a variable assignment ). Functions defined via Functions Expressions can be named or anonymous. Function Expressions should not start with “function”

//anonymous function expression
var a = function() {
    return 3;
}

//named function expression
var a = function foo() {
    return 3;
}

//self invoking function expression
(function foo() {
    alert("hello!");
})();

ECMA 5 (13.0) defines the syntax as
function Identifier_opt ( FormalParameterList_opt ) { FunctionBody }

If you would use those functions to create objects, you would get:

var objectOne = new functionOne();
console.log(objectOne.__proto__); // prints "Object {}" because constructor is an anonymous function

var objectTwo = new functionTwo();
console.log(objectTwo.__proto__); // prints "functionTwo {}" because constructor is a named function

Another difference that is not mentioned in the other answers is that if you use the anonymous function

var functionOne = function() {
    // Some code
};

and use that as a constructor as in

var one = new functionOne();

then one.constructor.name will not be defined. Function.name is non-standard but is supported by Firefox, Chrome, other Webkit-derived browsers and IE 9+.

With

function functionTwo() {
    // Some code
}
two = new functionTwo();

it is possible to retrieve the name of the constructor as a string with two.constructor.name.

The first is function declaration

function abc(){}

And the second is function expression

var abc = function() {};

The main difference is with hoisting. In the first example, the whole function declaration get hoisted, when in the second only the var abc is hoisted and undefined is assigned to it, while the function itself remains at the position that is declared. In a simple words:

//this will work
abc(param);
function abc(){}

//this would fail
abc(param);
var abc = function() {}

To study more about this topics visit this link