Variable hoisting examples [duplicate]

Question

Hi I have a snippet of code. I am confused about change of value x1 when I remove non-related part of same code. I searched about it and I came to know that it has to do with hoisting. But the value x1 is still unclear even with hoisting concept for me. Can someone please make me clear on this?

var x = 10;               
    
function main() {
  document.write("<br>x1 is " + x);
  x = 20;
  if (x > 0) {
    var x = 30;
    document.write("<br>x2 is " + x);
  }
  var x = 40;
  var f = function(x) { 
    document.write("<br>x3 is " + x); 
  }
  f(50);
}

main();

The output of this code is:

x1 is undefined
x2 is 30
x3 is 50

If I change this code to:

        
var x = 10;

function main() {
  document.write("<br>x1 is " + x);  
}

main();

The output is:

x1 is 10

Answer 1

So what is happening here is a common pitfall.

The simplest way to put this is. When you set var x = 30 inside your main function, you are actually redefining the scope that var x = 10 had for use inside this function. This has to do with how Javascript executes and scope.

By defining x inside the function, your scope for x has changed. Below is an example of what I mean and a version of your code that works

Example:

var test = 'test';
function run(){
    console.log(test);
    var test=1;
}

Your Code Updated:

var x = 10; 
        function main() {
            console.log("<br>x1 is " + x);
            x = 20;
            if (x > 0) {
                x = 30;
                console.log("<br>x2 is " + x);
            }
            x = 40;
            var f = function(x) { console.log("<br>x3 is " + x); }
            f(50);
        }
        main();

Good question btw.

Since this is somewhat of a very interesting scope of how Javascript executes, consider the following code and its outputs to get the full idea

var test = 'test';

function run(){
  console.log(test);
  test=1;
  console.log(test);
  var test=2;
  console.log(test);
}

console.log(test);

run();

console.log(test);

Very interesting to see how this reacts.