Difference Between Var Let and Const Keywords in Javascript #4

We have covered the three most common front-end interview questions untile now 😊, and this is going to be the 4th question of the series.

1. What Are the Different Data Types Present in Javascript?
2. What is Hoisting in JavaScript?
3. Difference Between == and === Operators in JavaScript
4. Let’s discuss the fourth one without any further ado 👇

Introduction

In javascript we can use var, let, and const to create variables and var is an old method to declare a variable in JavaScript. In modern JavaScript we use let or const keyword to declare the variables, which was introduced in ES2015(ES6).

Scope

Scope basically means where these variables are available for use.

var

Variables declared with var have either global or function scope. Global variables are accessible throughout the program, while those declared within a function are only accessible within that function.

Global scope code example

// declared variable a in global scope
var a = 10;

function foo() {
  // function scope
  console.log(a);
}

foo(); // Output: 10

Function scope code example

function bar() {
  // declared variable b in function scope
  var b = 20;
  console.log(b); // Output: 20
}

bar();
// trying to access the variable b outside of its function scope
console.log(b); // Output: Uncaught ReferenceError: b is not defined

And if the variables are declared using var inside any blocks, are not blocked scope, it means if we declare variable using var inside any block ( {….} block is the area of between opening and closing curly braces ) so we will be able to access that variable out of the block also.

if (true) {
  // declared variable name in block scope
  var name = "justCodingThings";
}

console.log(name); // Output: justCodingThings

Remember, the usage of var within blocks won’t restrict the variable’s usage to that block;

let

Variables declared with let have block-scoped, meaning they’re only accessible within the enclosing block, such as a function, if statement, or loop

function foo() {
  // function scope

  if (true) {
    // block scope
    let b = 20;
    console.log(b); // Output: 20
  }

  console.log(b); // Output: Uncaught ReferenceError: b is not defined
}

foo();

We see that using b outside its block gives an error. This is because let variables are block scoped.

const

Like let, Variables declared with const have block-scoped.

function foo() {
  // function scope

  if (true) {
    // block scope
    const b = 20;
    console.log(b); // Output: 20
  }

  console.log(b); // Output: Uncaught ReferenceError: b is not defined
}

foo();

Redeclaration

var

Variables declared with var can be re-declared within the same scope and will not give an error.

var a = 10;

// Re-declared variable a (And did not get any errors)
var a = 20;

console.log(a); // Output: 20

let

Variables declared with let can not be re-declared within the same scope and it will give an error.

let a = 5;
let a = 6;

console.log(a); // Uncaught SyntaxError: Identifier 'a' has already been declared

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

let a = 10;

if (true) {
  let b = 20;
  console.log(b); // Output: 20 (Without any errors)
}

Why is there no error? This is because both instances are treated as different variables since they are in different scopes.

const

Like let, Variables declared with const can not be re-declared within the same scope and it will give an error.

Reassignment value

var

Values of variables declared with var can be updated or reassigned.

var a = 10;

// Reassigning or updating the value of a
a = 12;

console.log(a);

let

Like var, Values of variables declared with let can be updated or reassigned.

let a = 10;

// Reassigning or updating the value of a
a = 12;

console.log(a);

const

Unlike var and let, Values of variables declared with const can not be updated or reassigned. If we try to do so, we will get a type error.

const a = 10;

// Trying to reassign or update the value of a
a = 12;

console.log(a); // Output: Uncaught TypeError: Assignment to constant variable.

Hoisting

If you don’t know the concept of Hoisting, you should click here to learn about that.

var

Variables declared with var are get hoisted, meaning they moved to the top of their scope and initialized with undefined.

console.log(a); // Output: undefined
var a = 10;

let and cost

Many developers believe that let and const variables are not hoisted, but this is not the case. variables declared with let or const are hoisted to the top of their scope but remain uninitialized. And when we try to access the variable declared with either let or const we get the ReferenceError error due to The Temporal Dead Zone. I have discussed this thing in What is Hoisting? blog you can check that out

console.log(a); // Output: Uncaught ReferenceError: Cannot access 'a' before initialization
console.log(b); // Same for this

let a = 10;
const b = 12;

Table

If you find this helpful please share with your network ✅.

Happy Coding 🙌 !