'Hoisted' JavaScript Variables

Variable declarations hoist to the top of the scope. So your code is equivalent to this:

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

y();

When y is executed, var x shadows outer scope x so inside of the y function x is undefined after the first line of declaration.

this answer explain in very detail the different scopes of the variables. In your particular case you can use the reference to:

this.x; 

To access to the global x variable outside the function. Because inside of the function you are trying to access to an undefined variable, using the this keyword you make a reference to variables outside of the function.

And the part of

if(!x)

It's true because you are testing: is false and x in that point is undefined because does not exist in the function scope, and undefined is consider one of the false values in JS, for more info please take a look here.

In javascript console.log inside a function gives undefined as output for unpassed parameters but outside the function it gives not defined error as inside a function browsers explicitly declares the variable. For e.g

console.log(x) 

gives VM1533:1 Uncaught ReferenceError: x is not defined whereas

function test(x) {
console.log(x)
}
test(); 

gives undefined. It is because the function test() is rewritten by browser as:

function test(x) {
    var x;
    console.log(x)
    }

Another Example : -

var x =5 ;
function test(x) {
console.log(x)
}
test(); 

is still undefined as the function becomes

function test(x) {
    var x;
    console.log(x)
    }

The alert in the below example will give undefined :-

    var x =5;
    function test() {
    alert(x);
    var x =10;
    }

test(); 

The above function will become :-

 function test() {
    var x;
    alert(x);
    x =10;
    }

The scope of javascript variable inside a function is function level scope and not block level. For e.g.

function varScope() {

for(var i = 0; i < 10; i++){
    for(var j = 0; j < 5; j++){}
        console.log("j is "+j)
    }
    console.log("i is "+i);


}
varScope();

will give output as :

j is 5 
i is 10

Again the function has become as :-

  function varScope() {
    var i;
    var j;
    for(i = 0; i < 10; i++){
        for(j = 0; j < 5; j++){}
            console.log("j is "+j)
        }
        console.log("i is "+i);
    }

Using this keyword helps to reference a variable outside a function which is hoisted. In your case

   this.x

Update: As of ES2015, using const and let keywords makes variables not to be hoisted.

Example: Hoisted global Variable in a function

 var x = "global variable hoisted";
function check_hoisting(){
 alert(x); //undefined because of js hoisting
var x = "local variable";
 }
 check_hoisting();

Example: Variable not hoisted due to let keyword

let x = "global variable not hoisted";
function check_hoisting(){
 alert(x); 
var x = "local variable";
 
  }
    check_hoisting();

JavaScript only hoist declarations, not initializations.

As a new programmer, I could not figure out the solution to this issue, no matter how many answers I read in this or similar questions. So I'm sharing my solution for others like me arriving here from desperate searching (plus all the related questions looking for a fix are locked and link to this question). So here's an answer to your question that newbies like me can understand how and why to change our code to avoid this issue and have the variables return the values we expect. My issue is that when learning javascript, I assumed every time I wanted to modify a variable I had to start the line with var like:

var myVariable = 1;
...
var myVariable = myVariable + 3;

when in reality, you should only put var the first time (when you declare/initialize a variable). All other times after that, you have to start the line with the variable name and drop the var like:

var myVariable = 1;
...
myVariable = myVariable + 3;

I didn't see an issue with how I was doing it at first, until I started using more functions, then these hoisting issues started to arise and I couldn't understand why, and I just assumed I couldn't use the same variable name across functions, or that I was unable to reference variables outside of the same function, or that I had to force creation/using global variables using some weird method like this.variable or window.variable, or something else weird.

After I deleted all the places I had var except for the first one per variable, my issues disappeared.

The same thing applies to your code. If you change this:

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

y();

(changing var x = 'hoisted'; to x = 'hoisted';) to this:

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

y();

then it works as you'd expect, and avoids hoisting.