Javascript – Precedence in hoisting

by

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);
}

More Related Contents:

  1. What happens when JavaScript variable name and function name is the same?
  2. What is wrong with this function
  3. What is the use of the JavaScript ‘bind’ method?
  4. How can I call PHP functions by JavaScript?
  5. Why can I use a function before it’s defined in JavaScript?
  6. Adding console.log to every function automatically
  7. How can I create every combination possible for the contents of two arrays?
  8. Extending an Object in Javascript
  9. Calling javascript function in iframe
  10. In Javascript/jQuery what does (e) mean?
  11. Order of hoisting in JavaScript
  12. Why a variable defined global is undefined? [duplicate]
  13. Make function wait until element exists
  14. Javascript: Call a function after specific time period
  15. anchor jumping by using javascript
  16. Is NaN equal to NaN?
  17. Immediate function using JavaScript ES6 arrow functions
  18. Calling a Javascript Function from Console
  19. What is the JavaScript convention for no operation?
  20. Function and Object Javascript
  21. includes() not working in all browsers
  22. return !1 in javascript
  23. javascript adding property to function
  24. How to find the least common multiple of a range of numbers?
  25. What event does JQuery $function() fire on?
  26. Javascript,calling child window function from opener doesn’t work
  27. Javascript: Get access to local variable or variable in closure by its name [duplicate]
  28. Lambda function syntax in JavaScript without curly braces
  29. What are the different ways of writing an IIFE? What are their use cases?
  30. Why can’t I use a Javascript function before its definition inside a try block?

Leave a Comment