JavaScript gives us the flexibility to initialize a variable anywhere even without declaring it. Sometimes it is handy but it causes many problems when we forgot about this.

To avoid silly mistake and make coding more sensible JavaScript introduce two new keywords for variable let and const with ES2015 (ES6). Before using them we should know the difference between var, let, and const.

var:

#1: The var statement declares a variable, optionally initializing it to a value. If you do not initialize a var then it by default initialize by undefined

var a;

if (x === 1) {
  var x = 2;

  console.log(x);  // expected output: 2
}

console.log(x); // expected output: 2

console.log(a); //expected output undefined

#2: Declared var variables are constrained in the execution context in which they are declared. Undeclared variables are always global.

It means if a var variable declare in function then it has function scope and if it is declare outside the function then it has global scope.

Scoping of variable

var x; // Declare at file scope

function abc() {
    var y; // declare at function scope
    z = 2 // Creates a new global variable z, and assigns it a value of 2.
    // (Throws a ReferenceError in strict mode.)
    y = 4;
    x = 8;
    function xyz() {
        console.log({y}) // expected output 4
        // because y has function cope of xyz and can be access by its inner function

        console.log({x}) // expected output 2
        // It has global scope


        var a = 4 // declare and initialize at function scope.
    }
    
    xyz(); // calling inner function
    console.log({z}) // expected output 2
    // It has global scope

    console.log({x})// expected output 2
    // It has global scope

    console.log({a}) // ReferenceError: a is not defined.
    // Because a has function scope of xyz
    
}
abc()

Proper logging can help you debugging and understanding the JavaScript code.
Check our blog beyond console.log()

The scope of a var declared in a JS function is the whole body of that function.

Blocks are not scopes

#3: Declared variables are created before any code is executed. Undeclared variables do not exist until the code assigning to them is executed.

console.log({a}) // expected output undefined
var a; //Declared variable

console.log({b}) // logging Undeclared variable
// expected outout ReferenceError: b is not defined

b = 3 //Undeclared variable

undeclared variables do not exist until code assigning them is executed. Therefore, assigning a value to an undeclared variable implicitly creates it as a global variable when the assignment is executed. This means that, all undeclared variables are global variables.

It is recommended to always declare variables, regardless of whether they are in a function or global scope

Always declare variable

let:

#1: The let statement declares a block scope local variable, optionally initializing it to a value.

let x = 1;

if (x === 1) {
  let x = 2;

  console.log(x);
  // expected output: 2
}

console.log(x);
// expected output: 1

#2: let allows you to declare variables that are limited to the scope of a block statement, or expression on which it is used.

#3: Variables declared by let have their scope in the block for which they are defined, as well as in any contained sub-blocks.
In this way, let works very much like var. The main difference is that the scope of a var variable is the entire enclosing function.

let have their scope in the block for which they are defined, as well as in any contained sub-blocks

Scope of let

#4: let does not create properties of the window object when declared globally (in the top-most scope).

var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined

#5: Re-declaring the same variable within the same function or block scope raises a SyntaxError.

if (x) {
  let foo;
  let foo; // SyntaxError thrown.
}

const:

#1: Constants are block-scoped, much like variables defined using the let statement. The value of a constant can’t be changed through reassignment, and it can’t be re-declared.

const number = 42;
console.log(number);
// expected output: 42

Global constants do not become properties of the window object, unlike var variables.

Global const

#2: An initializer for a constant is required; that is, you must specify its value in the same statement in which it’s declared.

#3: The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned.

A constant cannot share its name with a function or a variable in the same scope.

name sharing

let and const cannot be used before they are declared. 

let and const

Variable Hoisting:

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 be used before it’s declared. This behavior is called “hoisting“.

Hoisting: the variable declaration is moved to the top of the function or global code.

Hoisting in java script

The above piece of code understands by JavaScript like this.

var a;
console.log({a}); ​

function abc(){
   var b;
    console.log({b}); 
}
abc();

It’s important to point out that the hoisting will affect the variable declaration, but not its value’s initialization. The value will be indeed assigned when the assignment statement is reached:

The hoisting will affect the variable declaration, but not its value’s initialization

Hoisting affect