scope and availability of a variable inside a function

Question

I am learning javascript and my question might not be used practically anywhere but for interview purpose I want to understand this clearly. below is the code. the first alert alerts 'undefined' and the second one is '4'. the second one is understandable. I want to know why the first alert doesn't alert '5' and undefined? whats the concept behind the same? Thanks.

 var x = 5;
 function check(){
     alert(x);
     var x = 4;
     alert(x);
  }
 check();

Answer 1

var is always hoisted (moved) to the begining of the scope. Your code is equivalent to this:

 var x = 5;
 function check(){
     var x;
     alert(x);
     x = 4;
     alert(x);
  }
 check();

As you can clearly see, the local x hides the global x, even if the local one doesn't have a value yet (so the first alert shows undefined).

---

A little extra: conditionals or other blocks don't influence hoisting the var declaration.

var x = 1;
(function() {
  x = 3;
  if (false) {
    var x = 2; // var will be moved to the begining of the function
  }
})()
console.log(x) // 1

Answer 2

JavaScript has some concepts that take a little getting used to for sure and sometime the answer for what seems to be a simple question is long winded but i will try to be as quick and concise as possible.

In JavaScript, variables are scoped by functions and you have two places that a variable can be scoped(have context) either 'globally' or 'locally'. The global context in a web browser is the 'window' so in your code example var x = 5; is a global variable. The local context in your code is within your check function so var x = 4; is a local variable to the check function. If you had more functions those would have their own function scope(context) and so on. As a word of caution if you forget the word "var" when declaring a variable inside a function it will become a 'global' variable, be careful. Now that we have the 'global', 'local' scope down what happens before a Javascript programs runs?

A few things happen in the Javascript Engine before your code is executed but we will only look at what happens to variables. Variables are said to be 'hoisted' to the top of their functional context or scope. What that means is that the variable declaration is 'hoisted or moved to the top and assigned the value 'undefined' but not initialized the initialization remains in the same spot they were. This hoisting also makes the variable available anywhere within the function it was defined.

So it looks something like this:

//to be accurate this is hoisted to its functional scope as well
var x;

x = 5;
function check() {
  //declaration of 'x' hoisted to the top of functional scope,
  //and assigned undefined
  var x;
  //this will alert undefined
  alert(x);
  //initialization of variable remains here
  x = 4;
  //so after the initialization of 'x' this will alert 4
  alert(x);
}
check();

Happy Coding!!!

As an aside: They have a new feature named 'let' that you can implement to add block-level scoping in I believe EMCAScript 6 but is not implemented in all the browsers as of yet so that is why i placed it in an aside.