Javascript - Precedence in hoisting

Question

In hoisting, do variables take precedence over function definition or the other way round? Please see the code below:

function a()
{
    var x = 10;

    function x() {
        return 20;
    }

    return x;
}

Rhinehart

I would not write code where you have a variable x and a function x. x has already been defined. Its confusing code and doesn't need to be. In a code review, this is something I would make the programmer change. Variables are hoisted to the top of scope, then assigned in place where they were called. – Ironwork

Under ECMAScript 5.1, there is no discussion of hoisting. So you should not depend on any specific implementation. Best practice is to declare variables at the top of scope and then initialize after declaration. – Ironwork

Answer 1

It's not a matter of one taking precedence over the other (there is precedence taking place, but that's largely just a matter of semantics).

What matters here is that the assignment part of the variable declaration is not hoisted, whereas the entire function definition is.

Functions are hoisted before variable declarations, but the net effect is the same.

After hoisting, your function will act like this:

function a()
{
    var x = function x() {  // hoisted function declaration/definition
        return 20;
    };
    var x;                  // hoisted variable declaration
    x = 10;                 // unhoisted part of variable declaration
    return x;
}

the x = 10 takes place after all the hoisting is done, so that is the value that remains in x.

---

To respond to @thefourtheye's request (I think this is what s/he is asking for), if your original function looked like this:

function a() {
    function x() {
        return 20;
    }
    var x = 10;
    return x;
}

Then after hoisting, it would look like this (same as above):

function a() {
    var x = function x() {  // hoisted function declaration/definition
        return 20;
    }
    var x;                  // hoisted variable declaration (does nothing)
    x = 10;                 // unhoisted variable assignment
    return x;
}

---

As one last illustration, try this:

function a() {
    console.log(x);
    var x = 10;
    console.log(x);
    function x() { return 20; };
}

When called, this prints out:

function x() { return 20; }
10

The reason for this is that hoisting is causing the function to behave like this:

function a() {
    var x = function x() { return 20; };
    var x;
    console.log(x);
    x = 10;
    console.log(x);
}

Swinge

Please swap the var and function and reason it. – Orpington

@Orpington Edited my answer. Is that what you were asking for? I'm not sure I understood your request. – Swinge

It's not that the variable is taking precedence in hoisting - So, the function definition is taking precedence, right? – Orpington

@Swinge - So, A function definition would be broken down in to function operator. But does the break down happen as you said or would it be like var x; x = function x() .... ? – Rhinehart

@Orpington No, neither necessarily takes precedence. The point is that variable declarations and function definitions are hoisted differently. For variable declarations, only the declaration part is hoisted, whereas for function definitions, the entire function is hoisted. – Swinge

@NikhilPai I don't know the exact semantics, but between what I posted and what you posted here in the comments, the net effect is the same. I'm not necessarily saying either that the function is "broken down" into a variable assignment with a function expression; it's just that the code I posted above illustrates the order in which things are taking place and the way x behaves. – Swinge

Instead of waiting for 90 mins, please check jsfiddle.net/6kmx55rm. After click i want the blue button to spring back to its original function smoothly. how? – Rhinehart

You just need to add another .animate() to return it to its original position: jsfiddle.net/6kmx55rm/1 – Swinge

Answer 2

You code would be equal to the following:

function a() {
  var x;
  function x() { // this function is assigned to variable indicator "x"
    return 20;
  }
  x = 10; // this overrides the variable indicator "x"
  return x;
}

So when you call the function:

a() // 10

Penmanship