Why does this alert 5?

Question

Curious bit of code here...

var x = 5;

function fn() {
    x = 10;
    return;
    function x() {}
}
fn();
alert(x);

Here's the jsFiddle

Is function x() {} called at all after return ? Why not alert 10?

Answer 1

function x() {} is hoisted to the start of fn's scope, and this effectively makes x a local variable before x = 10; is evaluated.

The function is not set to 10.

Update: The sentence above is wrong. x is actually set to 10. var is not used to declare it, but even if it was, the last sentence in the quote below only refers to the declaration part of the name x, not its assignment to 10.

From MDN (emphasis mine):

function

Three forms with different scope behavior:

• declared: as a statement at the parent function top-level
  • behaves like a var binding that gets initialized to that function
  • initialization "hoists" to the very top of the parent function, above vars

var

• function-scoped
• hoist to the top of its function
• redeclarations of the same name in the same scope are no-ops

Answer 2

function x float to the top, so you assigning the function to 10

Answer 3

You are declaring function x within fn; therefore, you are using the locally scoped version of x. It doesn't matter at what point the function x is declared. What you are actually doing when you set x to 10 is you are setting the function of x to 10.