All About "Lets ,const and Var In JS"🤔.

unlike other languages, javascript is a dynamically typed language.

Dynamically-typed languages are those where the interpreter assigns variables a type at runtime based on the variable's value at the time.

" MDN"

which means we don't need to specify which data type we want to store. But why 3 types of variable declarations are used.. is the point here.

So It's All About the Scope Of Accessing the Variables And Use.

Let and const are introduced in ES6(ECMA script 2015, Ecma script is the blueprint of JS ), before that we are only using var declaration.

Let us understand the syntax.

Syntax:

Var Declaration:

redeclarations and later initializations can be allowed.

var x;              // variable can be initialized later
x=20;               
var y=10; 
var y=20;           // can be redeclared again 
console.log(x,y)    // 20,20

Let Declaration:

redeclarations cannot be allowed, initializations can be done later.

// correct 
let x;     // variable can be initialized later
x=10;
let y=20;
console.log(x,y)  // 10 20

// wrong
let x;
let x= 30; //SyntaxError: Identifier 'x' has already been declared

Const Declaration:

Must be initialized at the time of declaration, and should not be redeclared.

//correct
const y=20;     
console.log(y)  // 20

//wrong
const x;    //SyntaxError: Missing initializer in const declaration
const y=20;
const y=30; // SyntaxError: Identifier 'y' has already been declared

Reference :

Syntax errors are thrown in the compilation phase.

Reference errors are thrown during run time, when engine trying to fetch variables from scope.

Type errors are thrown when ur trying to do operations which is not applicable to the type.

It's always recommended to use the const to avoid the reassignment of values unless we intend to reassign, in the case of reassignment we can use let.

Okay.., Let's go through about scope of these variables.

Scope:

scope of var is Function scoped, whereas let and const are block scoped({}).

Var :

var x=10;
function abc(){
    console.log(x) // undefined ..due to hoisting in this functional scope
    var x=20;
    console.log(x)  // 20
    {
        var x=30
    }
    console.log(x)  // 30
}
console.log(x)      // 10
abc();

we can access the var variable though that is not initialized before that is initialized because during the compilation phase var is initialized with undefined in its scope.

var x=10;
function abc(){
    var x=20;
    var y=30;
    if (x < y){
        var x=30
    }
    console.log(x)   // 30
}
console.log(x)       //  10
abc();

Issues with var:
From the above examples, we can see the value of x is getting changed inside the if statement {}, what if we need the initial x (var x=20) value to be used somewhere else inside the same function?
Also, we cannot catch errors if we are accessing the variable before initialization which can lead to so many bugs and makes it difficult to debug.

Let and Const:

Because of the above issues with the var, to catch the errors before initialization, and to avoid bugs let and const were introduced.

let x=10;
function abc(){
    let x=20;
    console.log(x);
    {
        // TDZ starts 
        console.log(x);  // ReferenceError: Cannot access 'x' before initialization
        let x=30; //TDZ ends 
    }
}
console.log(x)     // 10
abc();

these variables which are initialized are not accessible because of the (TDZ) temporal dead zone before actual initialization.

from the above example inside the function's nested block, TDZ starts and ends once the x is declared.

Summary:

var can be redeclared and reinitialized.
let cannot be redeclared and can be initialized later.
const cannot be redeclared and must be initialized at the point of declaration.
var is global/functional scope and hoisted and can be accessible before the actual declaration.
There are a few issues with the var hoisting and syntax, which can lead to different errors/ bugs. so let and const were introduced.
let and const are Block scoped and placed inside the TDZ(temporal dead zone) which makes the variables inaccessible.
It is always recommended to use the const over let to make sure the value is not changing because of programming bugs, so using const will throw an error if any. and let is used in case of intentional changes to variables.

Hope It's Helpful😊.

All About "Lets ,const and Var In JS"🤔.

Table of contents

So It's All About the Scope Of Accessing the Variables And Use.

Syntax:

Scope:

Summary: