Var, let, and const & their differences

3 min readJun 23, 2023

Var, let and const in Javascript are used by web developers across the globe to declare the variables. To work with them, we need to understand their differences, usages, etc.

Differences

Below are some areas where we could find the possible differences between var, let, and const. So, let’s just dive into it.

a) Origin

var is preferred in older browsers since the early days of Javascript, ie. from 1995 preferably, pre-ES6.

let and const were introduced in ES6 or ES2015.

b) The Scope of the variable

var is a function-scoped variable in JavaScript.

let and const are blocked scope variables.

function Scope() {
  // var
  for(var i = 0; i < 10; i++) {
     console.log(i);
  }
  console.log(i)  // 10
  
  // let & const
  for(let j= 0; j< 10; j++) {   // also with const
     console.log(j)
  }
  console.log(j)  // Error: j is not defined
}

Scope();

c) Hoisting

Hoisting is a Javascript mechanism where variables and function declarations are moved to the top of their scope before the code executes.

Now, let us understand how var, let & const differ in this concept.

var declarations are hoisted to the top of their scope, while let and const declarations are not.

function Hoisting() {
    console.log(a);   // Output: undefined
    console.log(b);   // Output: ReferenceError: b is not defined
    console.log(c);   // Output: ReferenceError: Cannot access 'c' before initialization
    var a = 100;
    let b = 200;
    const c = 300;
}

Hoisting();

In the above example if you could see, let and const throw an error, whereas var gives output as undefined; this is because var is being declared to the top of the code.

The code above looks like this when hoisted:

function Hoisting() {
    var a;
    console.log(a);   // Output: undefined
    console.log(b);   // Output: ReferenceError: b is not defined
    console.log(c);   // Output: ReferenceError: Cannot access 'c' before initialization
    var a = 100;
    let b = 200;
    const c = 300;
}

Hoisting();

d) Updation and Re-declaration of variable

var can be redeclared and updated.

var a = "global";
var a = "redeclare";  // possible
a = "update";  // possible

let can be updated or reassigned, but cannot redeclare.

let b = "global";
b = "update";  // possible
let b = "redeclare";  // SyntaxError: Identifier 'b' has already been declared

const can’t be reassigned or redeclared once they are declared.

const c= "global";
const c= "redeclare";  // SyntaxError: Identifier 'a' has already been declared
c = "update";  // SyntaxError: Identifier 'a' has already been declared

e) Initialization

const should be declared with initialized value, whereas var and let can be declared without initialization.

const a = "const value";
var b;
let c;

Sum Up

Now, I hope you have got some understanding of the var, let, and const variable concepts.

In brief, check the below table:

Conclusion

var can be declared multiple times by the same name.
let allows you to declare a variable that can be re-initialized.
const cannot have the same variable twice unless you are using it in a different inaccessible scope.
var has global scope, that can be accessed by the window object. let and const, on the other hand, has block scoping, which results in more predictable and less error-prone code.

I hope this article was useful. Happy Reading!!!

You can also check out my other technical articles:

Var, let, and const & their differences

Differences

Sum Up

Conclusion

Written by Saraswathi M A