There are three ways we can declare variables in javascript i.e var, let, and const. var is an old way of declaring variables in javascript since it was created, and let and const were introduced in the ES6 version of javascript to overcome some of the limitations of var. So let's see variables Declaration, Scoping, and Shadowing.

Declaration

What is a Declaration?

• Creating a variable in JavaScript is called "declaring" a variable. There are 3 ways in javascript to declare variables i.e var, let, and const.
• There are some rules about declaring variables in javascript. When we try to declare the same variable name with var then this is absolutely fine there is no error. We can re-declare it as many times as we want.

  var firstName;
  var firstName;
  

  But when we try to declare the same variable name with let then this gives an error. Error: Uncaught SyntaxError: Identifier 'a' has already been declared. We can not re-declare the variable by using let and const in the same scope.

  let firstName;
  let firstName;
  

• Declaration without initialization (without providing any value) is possible in var and let. But for const we can not declare a variable without initializing. If we try to declare a const variable without initializing this will throw an error. Error: Uncaught SyntaxError: Missing initializer in const declaration. We need to provide some value while declaring a variable with const.

var firstName; // no error
let name; // no error
const firstName; // error: Uncaught SyntaxError: Missing initializer in const declaration
const lastName = "Phule"  // no error

Scoping

What is the Scope?

• Scope is the certain region of a program where a defined variable exists and can be recognized and beyond that, it can not be recognized. There are 3 types of scope in javascript Global scope, Function scope, and Block scope.

The Declaration of a variable without any function or block is called global scope.

var firstName = "Amardeep";  // global scope

If I create a function and declare a variable inside it, it is called function scope.

  function checkLastName() {
    var lastName = "Phule";  // functional scope
  }

And if I create any block using curly braces ({}) and declare a variable inside it, then this is called block scope.

{
    // block scope
}

The var is a function scope but let and const are block scope. The scope is global when a var variable is declared outside of a function which means it is available for use in the whole window.

var firstName = "Amardeep";
console.log(firstName);  // output: Amardeep

{
  var lastName = "Phule";
}

console.log(lastName);  // var still accessible, output: Phule

But when I change it to the let and const it gives an error i.e uncaught referenceError: lastName is not defined.

Note: you can change let with const and check the result.

{
  let lastName = "Phule";
}

console.log(lastName)  //  output: uncaught referenceError: lastName is not defined

and when I console the variable inside the block it gives desired output. So variable declared inside the block with the let or const keyword is accessible inside a block.

{
  let lastName = "Phule";
  console.log(lastName);  //  output: Phule
}

Shadowing

What is Shadowing?

• Shadowing occurs when a variable declared in a certain scope (e.g. a function/local variable) has the same name as a variable in an outer scope (e.g. a global variable). When this happens, the outer variable is said to be shadowed by the inner variable.
• In javascript, the introduction of let and const in ES6 along with block scoping allows variable shadowing.

function name(){
  let firstName = "Amardeep";

  if(true){
    let firstName = "Amar";
    /* The firstName variable inside this block will shadow the 
    firstName variable outside of this block. */
    console.log(firstName); // output: Amar  
  }

  /* Here still we get "Amardeep" as output*/
  console.log(firstName);  // output: Amardeep
}

name();

While shadowing a variable it should not cross the boundary of the scope i.e we can shadow the var variable by using the let but can not do the opposite. So if we try the let variable by the var variable it is known as illegal shadowing and it gives us the error that the variable is already defined.

  function fullName() {
    var firstName = "Amardeep";
    let lastName = "Phule";

    if(true){
       let firstName = "Amar";
       var lastName = "fule";
       console.log(firstName);   
       console.log(lastName); 
    }
  }

  fullName();
/*Uncaught SyntaxError: Identifier 'lastName' has already been declared*/

That's it for now, Thank you for reading. Keep in touch I will provide a simple explanation on important javascript topics.