JavaScript var, let, const and hoisting

JavaScript allows us to declare variable using var, let and const.  The last one const is simple and straight forward. Let start with that.

The value of a constant can't be changed through reassignment.  Well is that not the point while declaring it as a "const"

If you run the following example you will see the error:

const pi = 3.14;
console.log(pi);
pi = 3.14159; // gives error

The var and let allows us to declare variable  i.e. the values can be updated,  const is not supposed for that.

Declaration and Scope

Variables with var and their scope

var allows global of local scope based where they are declared declaration inside functions is local outside is global 

Variables with var in JavaScript

var myname = "Dexter"  // global declaration

function printmyname() {
 var mylength = myname.length; // accessing myname inside function
 console.log("Name length is: "+mylength)
}

console.log(myname)

printmyname() 
console.log(mylength) // gives error as mylength is local to the function
 

Re-deceleration and reassignment

var allows re-declaration and reassignment of variable 

var mynumber = 42  // declare
console.log(number) // 42

var mynumber = 84  // re-deceleration
console.log(number) // 84

mynumber = 168 // reassignment

Variables with let and their scope

With let can have a global, local, or block scope.

Also let does not allow re-declaration, this avoids by mistake usage of same variable name for other purpose in long pieces of codes.  Though reassignment is allowed.

let myname = "Dexter"  // global scope

function printmyname() {
 var mylength = myname.length;  // mylength is local scope
 if(mylength < 10) {
    let minlength = 10 // block scoped
    var requiredlength = 12 // local scope
    console.log("Name length is: "+mylength+" it should be atleast "+minlength)
    }
 console.log("Required length is "+requiredlength) // should be printed 
 console.log("Minimum length is "+minlength) // error as it is block scoped 
}

console.log(myname) // prints value of myname 
printmyname() // one message, one error and one requiredlength
console.log(mylength) // error local scoped

Scope of const 

const are similar to let in regards to scope.   A value declared with const should not be updated or will be allowed to be updated.

Hoisting:

• var declarations are processed before any code within the script is executed
  • Irrespective of  where  they occur in a script 
• Declaring a variable anywhere in the code is equivalent to declaring it at the top. 
  • i.e. 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
    • static initialization block
    • or script source in which it occurs.

a = 2
var a

Is as good as saying 

var a
a = 2

It is recommended to always declare variables at the top of their scope.

Only a variable's declaration is hoisted, not its initialization

Initialization of a variable will happen only when the assignment statement is reached.

The variable remains undefined (but declared) till that time.

function foo() {
 console.log(bar); // undefined
 var bar = 111;
 console.log(bar); // 111
}

Is as good as writing

function foo() {
 var bar;
 console.log(bar); // undefined
 bar = 111;
 console.log(bar); // 111
}

To avoid such issues make sure variable is declared and assigned with a value.

Note:

var is considered deprecated and only let should be used.