The Difference of “var” vs “let” vs “const” in Javascript

In JavaScript, we can declare variables in three different ways like this:

// Without keywords. It is essentially the same as var
// and not allowed in 'strict' mode.
name = 'Jack';
// Using var
var price = 100;
// Using let
let isPermanent = false;
// Using const
const PUBLICATION = 'freeCodeCamp'
Variable Scope in JavaScript
In JavaScript, we use scope as a way to identify where and whether we can use a variable. The variables may exist within a block, inside a function, or outside a function and block.

So, what is a block? A block (that is, a code block) is a section of the code we define using a pair of curly brace s({…}). Something like this:

{
let name = "alex";
}
There are mainly Three types of scope:

Block Scope
A block scoped variable means that the variable defined within a block will not be accessible from outside the block

{
let f_name = 'Alex';
const ZIP = 500067;
var age = 25;
}

console.log(f_name); // Uncaught ReferenceError: f_name is not defined
console.log(ZIP); // Uncaught ReferenceError: ZIP is not defined
console.log(age); // 25
Functional Scope
Each function creates a new scope. Variables defined inside a function are not accessible (visible) from outside the function.

function f1() {
let f_name = "Alex";
const ZIP = 560089;
var age = 25;

}

f1();

console.log(f_name); // Uncaught ReferenceError: f_name is not defined
console.log(ZIP); // Uncaught ReferenceError: ZIP is not defined
console.log(age); // Uncaught ReferenceError: age is not defined
Global Scope
Global scope is the scope that contains, and is visible in, all other scopes

let f_name = "Alex";
const ZIP = 560089;
var age = 25;

// f1() is a function
function f1() {
console.log(f_name); // Alex
console.log(ZIP); // 560089
console.log(age); // 25
}

f1();

console.log(f_name); // Alex
console.log(ZIP); // 560089
console.log(age); // 25

1. Var The main differences with Var are its scope, its ability to be re-declared and updated, and the fact that it is hoisted. Now, as far as scope goes, var is globally scoped if it is declared outside of a function, functionally scoped if declared within one

For example:

var name; //declared globally
name = ”John” //Initialization
function greet(){
var lastname = “Doe” // Declared and initialized locally
console.log("Hello " +name+" "+lastname);
}
console.log(lastname) //Error: lastname is not defined
greet()

1. let let is block-scoped.let does not allow to redeclare variables.Hoisting does not occur in let.let doesn’t allow to redeclare Variables.

For example:

let mango = “yellow”
if (mango === “yellow”){
let mango = “blue”
console.log(mango)
}
console.log(mango)
3.Const

Const variables are cannot be updated or redeclared. This way is used to declare constants. Same as the let declarations const declarations are block-scoped. Unlike var and let, If we are using const to declare a variable that must be initialized.

For example:

let x = 1;
if(x == 1){
let y = x+x;
console.log(y) // 2
}
console.log(y) // Uncaught ReferenceError: y is not defined
Conclusion
let’s sum up what we just discussed:

var:function-scoped and can be updated and redeclared.

let : block-scoped, can be updated, but cannot be redeclared.

const : block-scoped, cannot be updated and redeclared.

The main differences are: var declarations are globally or functionally scoped while let and const are block scoped. Var can be updated and redeclared, let can be updated but not redeclared, and const can do neither. Var is hoisted, while let and const are not.

Reference Link:

https://medium.com/nerd-for-tech/var-let-and-const-in-javascript-15e41cf90f01

https://www.programiz.com/javascript/let-vs-var