jsquiz.js

// what are the key differences between:

var foo = function() {
  alert("Hello World");
};

// and

function foo() {
  alert("Hello World");
}

var foo = .. is defined at run time and function foo() is defined at parse time.

i.e

foo();
var foo = function() {} // Will error as this is not defined yet

bar();
function bar() {} // Will not error because it is parsed and defined already.

This is why I use

function foo () {};
var foo = foo;

line 5 needs a ; line 11 does not.

I'm no JavaScript guru, so put this observation in your "idiot pile".

The only difference that jumps out at me is that one is a function expression and the other a named function declaration.

@atleastimtrying quite right! Whoops. That wasn't the main answer but good spot :)

First function is Function Expression
Second function is Function Declaration

• It won't always be obvious the scope of the latter, the function declaration, whereas it is much easier to know the scope of the former, the function expression.
• You cannot declare the function inside a block (like an if) – or rather, you should not, because behaviour is not consistent across browsers.
• The declaration will have the 'name' property set to 'foo'.
• Using Function.toString on the declaration will include the name – the expression will be an anonymous function.

I'm sure there are more...

@davemackintosh would you explain your reasoning behind:

function foo () {};
var foo = foo;

I don't really see the benefits of doing that over just var foo = function() {}.

Just to clarify my first statement:

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

Produces '1' – which is logical but totally unintuitive because it's not always clear that function declarations are hoisted. Rewritten it makes much more sense:

var a = 1;
function b() {
  a = 10;
  return;
  var a = function() {}; // var a is hoisted, so a = 10 alters local scope 'a'
}
b();
alert(a);

Resulting in:

var a = 1;
function b () {
  var a;
  a = 10;
  return;
  a = function() {}; // var a is hoisted, so a = 10 alters local scope 'a'
}
b();
alert(a);

I worded it badly, but I'm saying it's not as clear what's going on.

@jackfranklin or even var foo = function foo() {}?

foo is defined at parse time so can be used and var foo is just an alias at run time (i used foo but could be "bar") I dont use it often was just an example of how to get best of both worlds.

Try running:

foo(); // runs the parse time code
function foo () {alert('hello')};
var foo = foo;
foo(); // runs the runtime code.