Difference between var, let and const

When we declare a variable in JavaScript, we can declare using var, let and const keyword, In this article, we will discuss the difference among all of the three keywords used to declare a variable(var, let and const) with respect to their scope, re-declaration/re-assigning, and hoisting.

var

Var is used since the very first version of Javascript. The JavaScript var keyword is used to declare a variable and also used to initialize the value of that variable, for example var num = 10;

Scope of var

In JavaScript, there are two kinds of scope: function-scope and block-scope.

var is function-scoped because its visibility is limited to the function. When you try to use it outside of the function, you’ll get an error.

var variables can be re-declared and updated, which means that we can do this within the same scope and won’t get an error.

and this also

Hoisting of var

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

Variables declared with thevar keyword are "hoisted" to the top of the block which means they are accessible in their enclosing scope even before they are declared

Let understand Hoisting of var by an example, In this example, we are declaring var after the console.log(a)

console.log(a);
    var a = 10;

but, it is interpreted as this

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

So varvariables are hoisted to the top of its scope and initialized with a value of undefined.

let

Let was added in the ES6, along with const. Let is very similar to var, yet there are a few differences.

Scope of let

let is block-scoped, a variable declared in a block with the let is only available for use within that block. Let me explain this with an example,

We see that using myName outside its block returns an error (Uncaught ReferenceError: myName is not defined.)

let can be updated but not re-declared.

Just like var, a variable declared with let can be updated within its scope. Unlikevar, a let variable cannot be re-declared within its scope. So while this will work,

this will return an error. (Uncaught SyntaxError: Identifier ‘num’ has already been declared)

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

Hoisting of let

Just like var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. Accessing them before the initialization results in a ReferenceError.

const

Const is unlike let and var, they are all keywords that declare a variable, but const has an entirely different purpose. A variable defined with const can never be changed.

Scope of const

Like let declarations, const is also block-scoped, a variable declared in a block with the const is only available for use within that block.

const cannot be updated or re-declared

if we declare a variable with const we can neither update nor re-declared. The code will throw an error when we try to reassign the existing const variable.

Error Message : Uncaught TypeError: Assignment to constant variable.

Hoisting of const

Just like let, const declarations are hoisted to the top but are not initialized.

Thanks :)