A Comprehensive overview on let,const,var

Hello developers today I will describe the JavaScript variables let,var, const on an easy and comprehensive way. Let's start...

Table of Content

• var
• let
• const
• summary

In javascript there are 3 types of varibales.

1. var
2. let
3. const

The var keyword was used in all JavaScript code from 1995 to 2015.
The let and const keyeword were added to JavaScript in 2015.

A variable declared without a value will have the value undefined.
let fruit;
console.log(fruit)//undefined

Var

Var is a global scope variable in JavaScript.Before ES6 var was vastly used in JavaScript.var is a type of variable that has been used both locally and globally. A variable declared with var always has a global scope and cannot have a block scope. When a var variable is declared it can be changed from anywhere. That creates a problem.

var a= 10;//the value of a is 10
var a=12;//the value of a is 12

Global Scope means a variable that is declared anywhere inside or outside the function and can be accessed from anywhere inside or outside those functions.
Block Scope means a variable that is declared inside a function can only access inside the function and cannot access from outside of the function. In an easy word, a block refers to anything within the curly braces {}.
Before ES6 JavaScript did not have a block scope function JavaScript has global and function scope.

Let
Let is a block scope variable and must be declared before use. As a block scope variable let cannot be accessed from outside of the block scope.

function call(){
let x=12;
console.log(x)//the value of x is 12
}
call();
console.log(x)//give an error

let is such kind of variable which is not redeclared in the same scope but redeclared in a different scope.

let x =10;
let x=2//can not redeclared give an error

Now this situation

let x =10//the value of x is 10
{
let x=5//the value of x is 5
}

let is a variable which value can be reassigned in same scope
let x =10
x=12;
console.log(x)//output is 12

Const

Const is a block scope varibale.In modern JavaScript, most of the time variable declaration const has been used.A variable defined with const can not be redeclared and reassigned.

const x =10;
x=x+10;//this will give an error

Const variables must be assigned a value when they are declared.

const x;
x=10;//this will give an error

Always declare a variable with const when you know that the value should not be changed.Use const when you declare:

• Array
• Object
• Function

The keyword const is a little tricky because does not define the constant value rather it is defined constant reference to a value.
For this reason, when we use const cannot

• Reassign a constant value
• Reassign a constant array
• Reassign a constant object

But we can:

• Change the element of a constant array
• Change the properties of a constant object

const fruit =["mango","Orange","Apple"]
const[0]="Watermelon"//you can change an element
fruits.push("strawberry"//you can add an element

But can not assign
const fruit =["mango","Orange","Apple"]
fruit =["mango","Orange","Apple","Watermelon"]//give an error

Variable hoisting

A variable defined with var is hoisted to the top and can be initialized at any time which means one can use a variable before it is declared;
console.log(fruit)//output is Apple
var fruit="Apple";

A variable defined with let and const is also hoisted to the top but not initiated as a result when using a const or let variable before it was declared to give a ReferenceError.
One point noted for const it will already give syntaxError because in const must declare with value without it will give syntaxError before referenceError.
console.log(fruit)//give an error
const fruit="Apple";

When to use var, let or const

• Always use const if the value should not changed.
• Always use const if the type should not changed.
• Use let when can not use const.
• Use let when the variable needs to be reassigned.
• Use var when needs to reassign,redeclare and hoisting.

Variable Lifetime

1. **Global variables **live until the page is discarded, like when you navigate to another page or close the window.

2. Local variables have short lives. They are created when the function is invoked and deleted when the function is finished.

Summary
In the end in one word we can say that-
var:global-scoped and can be redeclared, or reassigned.
let:block-scoped and can not be redeclared but can be reassigned.
const:block-scoped and can not be redeclared, or reassigned.