Var, let, and const in javaScript

Hey there !, I am Fahd.

In this Blog we are gonna see about difference between var, let and const.

Let get Started.

One of the features that came with ES6( ES2015 ) is the addition of let and const, which can be used for variable declaration. The question is, what is the different from var which we've been using before ES6? If you are still not clear about this, then this blog is for you.

What is Scope?

Scope determines the accessibility or visibility of variables to JavaScript. There are three types of scope in JavaScript:

Global scope: Variables declared outside a function. Global variables can be accessed and changed in any other scope.
Function scope: Variables defined within a function are in local scope and are not accessible in other functions. Each function, when invoked, creates a new scope, therefore variables with the same name can be used in different functions.
Block scope (new with ES6): Block scope includes if statements and loops, or any other code wrapped in {}. When invoked, they don’t create a new scope. Variables declared inside a block scope will remain in the scope they were already in.

Var Keyword

var declarations are globally scoped or function scoped.

When a var variable is declared outside a function,it can be accessed globally thus, global scoped. which means that any variable that is declared with var outside a function block is available for use in the whole program.
var is function scoped when it is declared within a function. This means that it is available and can be accessed only within that function.

To understand this, look at the example below.

Here, firstNum is globally scoped because it exists outside a function, while secondNum is function scoped. So we cannot access the variable secondNum outside of a function. So if we do this:

    var firstNum =10;

    function sum() {
        var secondNum = firstNum + 20;
    }
    console.log(secondNum); // error: secondNum is not defined

We'll get an error which is as a result of secondNum not being available outside the function.

var variables can be updated and re-declared with its scope

This means that we can do this within the same scope and won't get an error.

var firstNum = 10;
firstNum  = 20;
var firstNum=15;

problem with var

if a variable is defined in a loop or in an if statement it can be accessed outside the block and accidentally redefined leading to a buggy program. As a general rule, you should avoid using the var keyword.

Let Keyword

A variable declared in a block with let is only available for use within that block.

In many ways, the letkeyword is very similar to the varkeyword as they both allow you to reassign the value later on. The main difference between the two is that let deals with a block scope and although it can be reassigned it cannot be redeclared. To understand this, look at the example below.

let number =10;
number=20; 

console.log(number); //prints 20

let number =10;
let number=20; 

console.log(number); //SyntaxError: Identifier 'number' has already been declared

let number =10;
{
number=20; 
console.log(number); //prints 20 
}

Const Keyword

The const keyword is also blocked scoped. However, declaring a variable with the const keyword means that it cannot only be redeclared but also it cannot be reassigned. Therefore, every const variable must be assigned a value at the time of declaration.

const number;//SyntaxError: Missing initializer in const declaration

const  number =10;
console.log(number); //prints 10

Summary

Var Keyword:

var declarations are globally scoped or function scoped.
var variables can be updated and re-declared with its scope.
var can be decalred without being initialized.

Let Keyword

let declarations are block scoped.
let variables can be updated and re-declared with its scope.
let can be decalred without being initialized.

Const Keyword

const declarations are block scoped.
const variables can be updated and re-declared with its scope.
const must be initialized during declaration.

As a general rule, you should always declare variables with const, if you realize that the value of the variable needs to change, go back and change it to let.

Thank you for reading :)

Fahd's Blog