There are some concepts in JavaScript that seem pretty easy on the surface but might become a little tricky when pondered upon properly. Such is the case with the concept of identifiers viz var, let, and const in JS and the difference among them. This blog will discuss these identifiers in detail. So let's get started!

Originally JS provided var as the only identifier which is fully a function-scoped identifier. It was noted by programmers that var actually can cause a few complications thus let and const were introduced in ES6 as block-scoped identifiers

This blog will explain the difference between var, let, and const by using 4 concepts:

1. Scope of the identifier
2. Hoisting
3. Is the identifier re-declarable?
4. Is the identifier re-assignable?

var

1. Scope

var is function scoped, meaning it can be accessed anywhere inside a function. If var is not declared in a function then it becomes globally scoped.

const varFunc = () => {

var varVariable = "hey";

console.log(varVariable);  // hey 

}

varFunc();

console.log(varVariable); // ReferenceError: varVariable is not defined

The identifier varVariable was function scoped, which is why we got a reference error at the second console.log()

var varVariable = "Hi there!";

const varFunc = () => {

console.log(varVariable);  // Hi there!

}

varFunc();

Here the identifier was declared outside the function i.e it was global scoped and hence available in any function that we may write.

2.Hoisting

var variables are hoisted to the top of their scope and initialized with a value of undefined.

console.log(varVariable); // undefined
var varVariable = "hi";
console.log(varVariable); // hi

i.e var allows using a variable before we declare it although with an undefined value only.

3.Re-declarebility

This is possible in var

var varVariable = 'hey';
var varVariable = 'hi';

This possibility of re-declarebility can cause problems while coding as a programmer might unintentionally re-declare a variable with a different value while not being aware that it actually exists and cause bugs in his/her program.

4.Re-assignability

This is also possible var

var varVariable = 'hey';
varVariable = 'hi';

let

1. Scope

let is block scoped, meaning it can be accessed anywhere inside a block in which it is declared and not outside it.

if(true){

let letVariable = "hi";

console.log(letVariable); // hi

}

console.log(letVariable); // ReferenceError: letVariable is not defined

2.Hoisting

let variables are hoisted to the top of their scope but are not initialized i.e we cannot use let variable before it's declaration and by doing so we will get a reference error.

console.log(letVariable); // ReferenceError: letVariable is not defined
let letVariable = "hi";

3.Re-declarebility

This is not possible in let

let letVariable = 'hey';
let letVariable = 'hi';

4.Re-assignability

This is possible in let

let letVariable = 'hey';
letVariable = 'hi';

const

1. Scope

const is block scoped, meaning it can be accessed anywhere inside a block in which it is declared and not outside it.

if(true){

const constVariable = "hi";

console.log(constVariable); // hi

}

console.log(constVariable); // ReferenceError: constVariable is not defined

2.Hoisting

const variables are hoisted to the top of their scope but are not initialized i.e we cannot use a const variable before it's declaration and by doing so we will get a reference error.

console.log(constVariable); // ReferenceError: constVariable is not defined
const constVariable = "hi";

3.Re-declarebility

This is not possible in const

const constVariable = 'hey';
const constVariable = 'hi';

4.Re-assignability

This also is not possible in const

const constVariable = 'hey';
constVariable = 'hi';

Although const doesn't allow to reassign values but when it comes to objects we can change it's properties :

 const messages = {
        messageOne: "Hi",
        messageTwo: "hello"
    }

This is not possible:

     messages = {
        words: "Hello",
        alphabets: "abc"
    } // error:  Assignment to constant variable.

this is possible

    messages.messageOne = "How are you?";

---

The diagram represents different identifiers with their specifications .