Categories
JavaScript

JavaScript Var, Let and Const

You all familiar with var scope in JavaScript. It’s quite confusing to understand the behavior of scoping in JavaScript since you noticed variable scope limited to block only in most of the programming language whereas var is function scope so it has wide range. In ES6 or ECMA2015 new variables scope are introduce let & const. Here I am going to give you a brief information, differences about all three scope.

var

var firstName; // declaration
firstName = 'Bharat' // initialization
  • var is function scope
  • It won’t give any error when reassigned.
  • When declared as a Global, it attaches to the window object.
    • It doesn’t recommend way to attach with window object since it can be override other library variable.
    • It may misguide behavior of your function.
  • It gives undefined when accessing before declared
function printNumbers() {
    for(var i=0; i<5; i++) {
        console.log(i)
    }
    console.log(i)
}

printNumbers()

//OUTPUT
0
1
2
3
4
5

In above example, you can see, we are accessing i after completion of for loop. i is accessible because it is function scope but actually it couldn’t. In most of the programming languages variable scope is limited to it’s block the how to solve this issue? Using let or const scope.

let

Declaration of the let scope is same as var. The only main difference is it won’t accessible out of the block so that it is block scope

  • let is block scope
  • It also won’t give error when reassigned
  • When a variable declared globally with let, it won’t attach to the window object.
  • It gives ReferenceError when accessing before declared

Let’s understand with same example.

function printNumbers() {
    for(let i=0; i<5; i++) {
        console.log(i)
    }
    console.log(i)
}

printNumbers()

//OUTPUT
0
1
2
3
4
Uncaught ReferenceError: i is not defined

It’s same example, I just changed var to let. Here you can see the ReferenceError instead of the value 5. So let won’t be accessible out of the block.

const

  • const is also block scope.
  • It gives error when reassign since it constant
  • It gives ReferenceError when accessing before declared

Refer same example which explain for let just changed the keyword let to const.

Here you may confused when to use let and when to use const. The answer is pretty simple. If you are thinking that the variable cannot change the use const. If you are thinking that you need to reassign value in the variable then use let. a bit more about const.

Why does const allow to change properties of object or array?

const does NOT define a constant value. It defines a constant reference to the value because of that primitive values cannot changed but we can change properties of object and array.

Primitive Values

When we assigned primitive value to a constant, it cannot changed

const name = 'John Doe'
name = 'Jenny'

It gives error Uncaught TypeError: Assignment to constant variable.

Constance object or array

We can change the properties of constant object or array but we cannot reassign a new object or array to a constant.

const person = {"name": "John"};
person.name = "Jenny"; // allow to change properties
person = {"name": "Jenny"}; // doesn't allow to reassign

I hope it clears all about var, let and const. Here is my practice to declare variable scope. I always declare variable with const. Whenever I need to reassign value I used let.

Happy Coding!

Leave a Reply

Your email address will not be published. Required fields are marked *