Easy Way to Learn the difference between let vs var vs const in javascript 2021

February 14, 2021

We are going to learn the difference between let vs var vs const in javascript with example. These 3 keywords let, var, and const are used to declare variables in modern javascript.

Short info about let vs var vs const, var is a function scope. let and const is a block scope Function scope is within the function. Block scope is within curly braces { }

var

Let’s discuss var in this section of let vs var vs const,

var is a function scope which means we can use variables anywhere inside the function. we can also modify the var variable. we can also redeclare the var variable. let’s see these with examples.

function varMainFunction() {
  //a is belong to varMainFunction, can be available througout varMainFunction
  var a = "I am a";

  function childFunction() {
    //b is belong to childFunction, can be available througout childFunction
    var b = "I am b";

    if (true) {
      console.log("Inside If Condition of the childFunction b is", b);
      console.log("Inside If Condition of the childFunction a is", a);
    }

    console.log("Inside childFunction b is", b);
    console.log("Inside childFunction a is", a);
  }
  childFunction();

  console.log("Outside Child Function but inside Main Function a is", a);

  //comment the below line to avoid referance error
  console.log("Outside Child Function but inside Main Function b is", b);
}

varMainFunction();

Check the above code in your browser console. In the above code, we will get a ReferenceError: b is not defined. variable a can be accessed throughout the main function and even inside the child function. variable b can be accessed throughout the child function but couldn’t use it outside the child function, because var is function scope.

Let’s check can we modify var or not,

function varMainFunction() {
  //a is belong to varMainFunction, can be available througout varMainFunction
  var a = "I am a";
  console.log("Before modification a is", a);

  function childFunction() {
    a = "I am modified first time";
    if (true) {
      a = "I am modified second time";

      console.log("Inside If Condition of the childFunction a is", a);
    }

    console.log("Inside childFunction a is", a);
  }
  childFunction();

  a = "I am modified third time";

  console.log("Outside Child Function but inside Main Function a is", a);
}

varMainFunction();

The variable a can be modified throughout the main function, a belongs to the main function. From this, we can understand var can be modified throughout the function, it belongs to.

Let’s check can we redeclare var or not,

function varMainFunction() {
  //a is belong to varMainFunction, can be available througout varMainFunction
  var a = "I am a";
  console.log("Before modification a is", a);

  function childFunction() {
    var a = "I am redeclared first time";
    if (true) {
      var a = "I am redeclared second time";

      console.log("Inside If Condition of the childFunction a is", a);
    }

    console.log("Inside childFunction a is", a);
  }
  childFunction();
  var a = "I am redeclared third time";

  console.log("Outside Child Function but inside Main Function a is", a);
}

varMainFunction();

We know that var can be available throughout the function. In the above code variable, a is redeclared three times throughout the main function. Hope you understand that var can be modified and redeclared any number of times inside the function which belongs to.

In this section, we discuss let in the let vs var const. we can find the difference between let vs var with examples.

Let is block the scope variable, which can be accessed inside the block. Block means inside curly brackets { /_I am Block _/ }

function letFunction() {
  let a = "I am a";

  if (true) {
    let b = "I am b";

    console.log("Inside If Condition of the function a is", a);
    console.log("Inside If Condition of the function b is", b);
  }
  console.log("Inside function a is", a);
  console.log("Inside function b is ", b);
}

letFunction();

We are having 2 blocks { } in the above code first one is inside a function and another one is inside if condition. If we run the above code we will get Uncaught ReferenceError: b is not defined. It’s because b is declared inside If block so b cannot be used outside If Block.

We saw the same reference error behavior earlier in var. But the main difference between let vs var is scope, var is function scope, and let is block scope. Let’s continue our comparison between let vs var, so we can understand better.

Let’s check can we modify let or not,

function letFunction() {
  let a = "I am a";

  if (true) {
    a = "I am modified first time";

    console.log("Inside If Condition of the function a is", a);
  }
  a = "I am modified second time";
  console.log("Inside function a is", a);
}

letFunction();

We can modify variable a throughout the letFunction block {}. This behavior also similar to var, we can modify var throughout its function scope. We didn’t see any difference till now with let vs var.

Let’s check can we redeclare let or not,

function letFunction() {
  let a = "I am a";

  if (true) {
    let a = "Actually, I am not redeclared, I am declared inside this block";

    console.log("Inside If Condition of the function a is", a);
  }
  //comment the below let variable to avoid Uncaught SyntaxError: Identifier 'a' has already been declared
  let a = "I am  redeclared inside same block";
  console.log("Inside function a is", a);
}

letFunction();

The above will give us error Identifier ‘a’ has already been declared. The fact about let variable is we cannot redeclare it inside the same block but we can declare the same Variable Name inside another block.

we thought variable a is redeclared inside the If block but it’s the wrong variable a is declared now it is available inside the If block only. Here we found the difference between let vs var. var can be redeclared throughout the function but let cannot be redeclared.

Const

In this section, we discuss const in the let vs var vs const.

Const is a block scope variable. which can be accessed inside the block. The name itself denotes as it is constant we cannot change it later. Let’s see it with an example so that we can understand more.

function constFunction() {
  const a = "I am a";

  if (true) {
    const b = "I am b";

    console.log("Inside If Condition of the function a is", a);
    console.log("Inside If Condition of the function b is", b);
  }
  console.log("Inside function a is", a);
  console.log("Inside function b is", b);
}

constFunction();

If we run the above code we will get Uncaught ReferenceError: b is not defined. It’s because b is declared inside If Block which cannot be used outside of If Block. Const is the block scope variable, this is very similar to the let variable we already saw earlier in this let vs var const tutorial.

Let’s check can we modify const or not,

function constFunction() {
  const a = "I am a";
  console.log("Before modification a", a);

  if (true) {
    a = "I am Modified first time";

    console.log("Inside If Condition of the function a is", a);
  }

  console.log("Inside function a is", a);
}

constFunction();

The above function will through an error Uncaught TypeError: Assignment to constant variable this is because we cannot modify const variable.

Let’s check can we redeclare const or not,

function constFunction() {
  const a = "I am a";
  console.log("Before redeclare a", variableOne);

  if (true) {
    const a = "Actually, I am not redeclared, I am declared inside this block";

    console.log("Inside If Condition of the function a is", a);
  }
  const a = "I am redclared inside same block";

  console.log("Inside function after redeclare a is", a);
}

constFunction();

we will get an error Uncaught SyntaxError: Identifier ‘a’ has already been declared. The fact about const variable is we cannot redeclare it in the same block but we can declare the same Variable Name inside another block. It is similar to let.

Hope you understand the difference between let vs var vs const with examples.

Difference Between let vs var vs const

Here we can see the short comparison between let vs var const,

	Var	let	const
scope of the variable	Function scope	Block Scope	Block Scope
modify it or not	we can modify throughout the function	we can modify throughout the Block	we cannot modify it later
can we redeclare?	yes, we can redeclare more than once throughout the function	we can not redeclare inside the same block. But we can use the same variable inside another block	same as let

Always try to use let and const which will be more helpful for you and others who read your code to understand better as well as you can avoid many problems.

You can learn more about javascript at javascript.info. If you have any doubts you can put them in the comment section. let’s meet in another awesome javascript post.

You may also interested in,