Everything about var, let, and const
By: Amit Sahani
Tags: JavaScript, ES6, Var, Variables In Javascript, Javascript Hoisting

Earlier in javascript, the var keyword was used to declare the variable but after the introduction of ES6 two more keywords namely “let” and “const” comes into the existence. So, here we will try to find out how these keywords behave and why “let” and “const” comes into the existence.

Var

It is the old plain js way of declaring the variables. But the problem with this keyword is, it allows the redeclaration of the variables which can create bugs in the code if someone again declared a variable with the same name in the file it will not cause any error but the program may behave unexpectedly. So, it is not advised to use it but you will see it in the legacy codes.

var a = “amit”

var a = 200

console.log(a) output: 200

Var Scope

If a variable is declared outside of any function then it will have a global scope, but if declared inside any function then it will have function scope i.e., it can not be accessed outside of the function, it has no existence outside the function. If we try to access it outside the function where it is defined then it will throw a reference error saying the variable is not defined.

var a = 100 function checkScope(){

var b = 20

console.log(a) // 10

console.log(b) // 20

}

checkScope() console.log(b) //reference error: variable b is not defined

We have discussed above that the outside declared variable will have a global scope but if declared inside then it will have function scope, but what will happen if we declare the same variable inside as well as outside the function? Let’s understand this with the following example.

Want to read this story later? Save it in Journal.

var a = 20 function checkScope(){

var a = 30

console.log(a) //ouput: 30

} console.log(a) //ouput: 20

The above example explains how scope chaining works in js. Javascript first searches for a variable inside a function scope if it is not there then it will go to one scope up and if it is not there then again one scope up this will continue to happen till it reaches the global scope.

Var Hoisting

We declare it anywhere inside our code but it will always be hoisted at the top of its scope(functional or global) and initialized with the value undefined. This means we can access the variables even before their declaration ( in the same scope) but the value will be undefined.

console.log(a) // output: undefined

var a = 10

console.log(a) // output: 10 function checkHoisting(){

console.log(b) // output: undefined

var b = 20

console.log(b) // output: 20

} checkHoisting()

Let

The “let” keyword is just an improvement to the already existing “var” keyword. We can say that it is a modern way of defining re-assignable variables. Unlike var, the variable declared with the let keyword can not be redeclared within its scope, but it can be redeclared in different scope.

let a = 10

let a = 20

// SyntaxError: Identifier "a" has already been declared

Let’s try to redeclare the variable using let in different scope.

let a = 10 function letDeclare(){

let a = 20

console.log(a) // output: 20

} letDeclare() console.log(a) // output: 10

Let Scope

Variables declared with “let” keywords are block-scoped i.e. they can not be accessed outside the immediate parenthesis {} it is surrounded inside.

if(true){

let a = 10

}

console.log(a)

// ReferenceError: a is not defined

In the above example, we can see that the declaration of the variable a is enclosed inside parenthesis which is why it can not be accessed outside it.

Let Hoisting

It is also hoisted like var but it is not initialized with undefined and we can not access it before its declaration. If we try to access it before its declaration then it will throw a reference error. The inaccessibility of hoisted let variable before its declaration is also known as the Temporal dead zone.

console.log(a) // ReferenceError: a is not defined

let a = 10

console.log(a) // 10

Const

The const variables behave the same as the let variables, the only difference is that they can not be reassigned. But if the assigned value is an object then we can change the attribute of the object but can not reassign the new object to that const variables.

const a = 10

a = 10 // TypeError: Assignment to constant variable

If the assigned value is an object.

const a = {name:'amit', age:20 }

a.name = 'amit sahani' console.log(a) // output: {name:'amit sahani', age:20}

The scoping and hoisting also work the same as the let keyword.