Are functions defined regardless of the order?

Question

I'm not really a javascript noob at all, although in my whole life I've never came across this, but am I right in assuming that javascript must assign functions before running anything or something?

In all my experience, I expected this to return 'undefined', but obviously it returns 'function'.

function bar() {
    return foo;
    foo = 10;
    function foo() {}
    var foo = '11';
}
alert(typeof bar());

Is someone able to explain this for me?

Answer 1

This behaviour of JavaScript is called hoisting. There is a good explanation on the MDN (https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)

In JavaScript, functions and variables are hoisted. Hoisting is JavaScript's behavior of moving declarations to the top of a scope (the global scope or the current function scope).

That means that you are able to use a function or a variable before it has been declared, or in other words: a function or variable can be declared after it has been used already.

Basically, if you declare a variable like this:

console.log(s);             // s === undefined
var s = 'some string';

s declaration will be "hoisted" to the beginning of the scope (i.e. there will be no ReferenceError on the line with console.log). The variable's value will not be defined at that moment though.

The same goes with assigning an anonymous function to a variable, so:

console.log(f);             // f === undefined
f();                        // TypeError: f is not a function
var f = function () {};     // assigning an anonymous function as a value
f();                        // ok, now it is a function ;)

The variable will be hoisted and thus visible in the entire scope, but it's value, even if it's a function, will still be undefined - hence the error if you try to execute it.

On the other hand if you declare a named function:

console.log(f);             // f === function f()
f();                        // we can already run it
function f() {};            // named function declaration

It's definition will also be hoisted so you can run it even in the first line of the scope you've declared it.