Var, let, and const & their differences

Saraswathi M A
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:

--

--

Saraswathi M A
Saraswathi M A

Written by Saraswathi M A

0 Followers

Sr Software Engineer

No responses yet