‘Hoisted’ JavaScript Variables

by

Quoting MDN Docs on var hoisting,

Because variable declarations (and declarations in general) are processed before any code is executed, declaring a variable anywhere in the code is equivalent to declaring it at the top. This also means that a variable can appear to be used before it’s declared. This behavior is called “hoisting”, as it appears that the variable declaration is moved to the top of the function or global code.

So, in your case, JavaScript knows that a local variable (not the one declared outside) x is defined somewhere in the function, but it does not know the actual value of it until the execution reaches an assignment statement which assigns to x. (Declarations are processed during the compile time and assigments are done in the execution time) Till the assignment is done, the default value undefined will be used. Since undefined is falsy, the condition

if (!x) {

is satisfied and the assignment statement is executed. That is why you are getting hoisted in the alert box.

Let’s say you have not declared x inside the function,

var x;

var y = function () {
    if (!x) {
        x = 'hoisted';
    }
    alert(x);
}

y();
alert(x);

Here, since x is not declared anywhere within the function, at runtime, JavaScript will look for x in the higher scopes. In this case, it finds it right outside the function. So, that x will be used. Since you assigned hoisted to x, the inner alert will also say hoisted and after leaving the function, alert(x) will also alert hoisted.

More Related Contents:

  1. Javascript function scoping and hoisting
  2. Are variables declared with let or const hoisted?
  3. Why variable hoisting after return works on some browsers, and some not?
  4. JavaScript ‘hoisting’ [duplicate]
  5. Order of hoisting in JavaScript
  6. Why does JavaScript hoist variables?
  7. Will const and let make the IIFE pattern unnecessary?
  8. Why a variable defined global is undefined? [duplicate]
  9. Why do catch clauses have their own lexical environment?
  10. Are ES6 module imports hoisted?
  11. How JS hoisting works within functions?
  12. What happens when JavaScript variable name and function name is the same?
  13. Javascript – Precedence in hoisting
  14. How does this hoisting work with block scope? [duplicate]
  15. Why is my JavaScript hoisted local variable returning undefined but the hoisted global variable is returning blank? [duplicate]
  16. Is there a purpose to hoisting variables?
  17. iFrame src change event detection?
  18. Send message to specific client with socket.io and node.js
  19. Difference between DOM parentNode and parentElement
  20. How to do a redirect to another route with react-router?
  21. Selecting an ID with a colon in it with jQuery
  22. Javascript : get src and set as variable?
  23. JQuery show and hide div on mouse click (animate)
  24. Accessing Angular inside Protractor Test
  25. Sorting an array of objects in Chrome
  26. Javascript event handler order
  27. Html duplicated ID
  28. Dynamically updating a JavaScript object from a string path [duplicate]
  29. Promise.resolve().then vs setImmediate vs nextTick
  30. .js.erb VS .js

Leave a Comment