What's going on in JavaScript when I use the "traditional" C-style function declaration?

Question

I know that there are several ways to define a function in JavaScript. Two of the most common ones are:

(1)  function add (a, b) {
         return a + b;
     }

(2)  var add = function (a, b) {
         return a + b;
     }

I am comfortable with the idea of a function as an object that can be passed around just like any other variable. So I understand perfectly what (2) is doing. It's creating a function and assigning to add (let's say this is in the global scope, so add is a global variable) the said function. But then what is happening if I use (1) instead? I already know that it makes a difference in execution order: if I use (1) then I can refer to add() before the point in the code where add() is defined, but if I use (2) then I have to assign my function to add before I can start referring to add().

Is (1) just a shortcut for (2), albeit one that happens to behave like other C-style languages in allowing us to define a function "below" the point at which it's used? Or is it internally a different type of function? Which is more "in the spirit" of JavaScript (if that isn't too vague a term)? Would you restrict yourself to one or the other, and if so which one?

Answer 1

It looks like you are already aware of the main characteristics of function declarations¹ (1) and function expressions (2). Also note that in (1) there is still a local variable called add containing a function value, just like in (2):

function hello () {
   alert('Hello World');
}

console.log(typeof hello);  // prints "function"

setTimeout(hello, 1000);    // you can still pass functions around as arguments,
                            // even when using function declarations.

One other point worth mentioning is that function declarations (1) shouldn't be used to define functions conditionally (such as in if statements), because as you have mentioned, they are automatically moved to the top of the containing scope by the JavaScript interpreter². This is normally referred to as hoisting.

As for which approach is more in the spirit of JavaScript, I prefer using function expressions (2). For a more authoritative opinion, Douglas Crockford lists function declarations (1) in the "Bad Parts" chapter in his popular The Good Parts book².

---

¹ Also known as function statements (See @Tim Down's comments below).
² Actually some browsers are able to handle function declarations in if statements (Again refer to comments below).
³ JavaScript: The Good Parts - Appendix B: Page 113.

Answer 2

function foo() {};
foo.toString() //-> "function foo() {}"

var bar = foo;
bar.toString() //-> "function foo() {}"

So it declares a named function. No matter what variable points to it, it's name is retained. Using the other syntax is an anonymous function, which is nameless and can only ever be accessed if referenced by a variable.

var foo = function() {};
foo.toString() //-> "function () {}"

var bar = foo;
bar.toString() //-> "function () {}"

As far as which style to use, there is no major rule. Although I personally favor the anonymous syntax as it reminds me that functions are indeed objects that can be passed around. I also tend to favor the "it's all in a big master object" approach, which requires that functions be declared this way.

var MyThingy = {
  foo: function() { alert('foo') },
  bar: function() { MyThingy.foo() }
}

But after the functions are created, the differences are not really important and behave the same. But the anonymous syntax has less of that scan ahead magic you mentioned, and there less bugs in complex code and odd scoping situations.