Difference Between Var, Let, and Const in Javascript

In 2015 ES6 get released and it changed the way how we declare and use the variables in javascript. The new variable declaration methods were introduced in the ES2015( ES6 ), The let and const.

These two methods solve the problems developers face working with var, The let and const have their own properties let deep dive into that.

var

var is the keyword, which use for variable declaration. with var we can declare variables that have global scope, it provides hoisting and redeclaration of the same variable in the program.

scope of var

The var statement declares a function-scoped or globally-scoped variable, optionally initializing it to a value.

The scope of a variable declared with var is its current execution context which is either the enclosing function and functions declared within it have function scope or variables declared outside any function has the global scope.

Duplicate variable declarations using var will not trigger an error, even in strict mode, and the variable will not lose its value unless another assignment is performed.

Function scope and Global scope

var userName = "Mario" // globle scope
console.log(userName); // output: Mario

function Auth(){
    var password = "xyz"; // fuction scope
    console.log(password); //output: xyz
}

Auth();

here the userName variable has a global scope and can be used anywhere in the program, but the password has a function scope it can be used inside the Auth() function only.

we try to access the password variable outside the Auth function it gives ReferenceError saying userName is not defined.

var userName = "Mario" // globle scope
console.log(userName); // output: Mario

function Auth(){
    var password = "xyz"; // fuction scope
    console.log(password); //output: xyz
}

Auth();

console.log(password) // gives ReferenceError: userName is not defined

var hoisting

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables, or classes to the top of their scope, prior to the execution of the code.

Because var declarations 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 appear to be used before it's declared. This behavior is called hoisting, as it appears that the variable declaration is moved to the top of the function or global code.

For example, we can assign the value of userName before declaring it with var.

userName = "Mario"
var userName;

It's important to point out that only a variable's declaration is hoisted, not its initialization. The initialization happens only when the assignment statement is reached. Until then the variable remains undefined.

console.log(userName); // output: undefined
userName = "mario"
var userName;

redeclaration of the same variable using var

we can redeclare the same variable that is already declared in the program, as we declare a variable the value of the variable is the same as the old one until we assign the new value to it.

var userName = "Mario";
var userName;

console.log(userName); //output: Mario

Problem with var

In Javascript, it doesn’t matter how many times you use the keyword “var”. If it’s the same name in the same function, you are pointing to the same variable.

let's see it with an example

var userName = "Mario";
var password = "xyz";


if(password === "xyz"){
    var userName = "Will smith";
}

console.log(userName); // output: will smith

As we can see we only want to change the userName in the if block, but the value changed also in the global scope.

This problem can be solved by the let and count where we have more control over the value in scope.

let

let keyword solve the problem we face with var, it provides the block scope to the variable which means variable life belongs to the block and we couldn't able to access it outside of the block.

let userName = "Mario";

if(userName){
    let password = 1234;
    console.log(password); // output: 1234
}

console.log(password); // gives ReferenceError

let can be updated but not re-declared

unlike var, we can not re-declare the same variable with let in the same scope. but we can update the value of a variable that is declared with let.

let userName = "Mario";
userName = "Will"; // posible

let userName = "Will" // error

However, if the same variable is defined in different scopes, there will be no error

let userName = "Mario";
let password = 1234;

console.log(userName); // output: Mario

if(password===1234){
    let userName = "will";
    console.log(userName); //output: will;
}

console.log(userName); //output:Mario

Hoisting of let

Just like var, let declarations be hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before the declaration, you'll get a Reference Error.

console.log(userName); // ReferenceError: Cannot access 'userName' before initialization
let userName = "Mario";

const

Variables declared with the const maintain constant values. const declarations share some similarities with let declarations.

const declarations are block scoped

Like let declarations, const declarations can only be accessed within the block they were declared.

We have to initialize the variable at the time of declaration when we use the const declaration otherwise it gives SyntaxError: Missing initializer in const declaration.

const cannot be updated or re-declared

This means that the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const.

const userName= "Mario";
userName = "will";// error: Assignment to constant variable. 

const password = 1234;
const password // error: Identifier 'password' has already been declared

This behavior is somehow different when it comes to objects declared with const. While a const object cannot be updated, the properties of the object can be updated.

This is possible because the variable is store the address of the object instead of the data, so the address would be the constant we can't change that but the property referred by the object can be updated.

const user = {
    userName: "Mario",
    password: 1234
}

console.log(user.userName); // output: Mario

user.userName = "will"

console.log(user.userName); // output: will

Hoisting of const

Just like let, cont declarations are hoisted to the top but are not initialized.

The following table briefs the difference between let and var and const in javascript: