Variable Declaration : var,const and let

I was recently going through my linked in and saw one post where the heading was given as var vs let vs const. So i decided to dig in and write what i learnt. Given below the summary of what i will gonna write about .

JavaScript has three kinds of variable declaration

var , const and let

Before the advent of ES6 , var declaration ruled. But the features that came with ES6 is the addition of let and const, which can be used for variable declaration.

In this article, we'll discuss var, let and const with respect to their scope, use, and hoisting.

Var : scope

Scope essentially means where these variables are available for use. var declarations are globally scoped or function/locally scoped.

Var is generally considered as globally scoped available for use in the whole window. but there is the case when we declare it outside any function block {}.

So 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.

For example:

var greeter = "hey hi";

    function newFunction() {
        var hello = "hello";
    } 

console.log(hello); // error: hello is not defined

Here, greeter is globally scoped because it exists outside a function while hello is function scoped

Note: we can re declared the var variable and everytime it gets replaced with latest value.

var : Hoisting

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. This means that if we do this:

 console.log (greeter);
 var greeter = "say hello"

it is interpreted as this:

var greeter;
console.log(greeter); // greeter is undefined
greeter = "say hello"

Let : Scope

Let is block scope. Anything written in curly braces is a block. So a variable declared in a block with let is only available for use within that block. Let me explain this with an example:

let greeting = "say Hi";
   let times = 4;

   if (times > 3) {
        let hello = "say Hello instead";
        console.log(hello);// "say Hello instead"
    }
   console.log(hello) // hello is not defined

Note: Unlike var, a let variable cannot be re-declared within its scope.but if the same variable is defined in different scopes, there will be no error:

let greeting = "say Hi";
    if (true) {
        let greeting = "say Hello instead";
        console.log(greeting); // "say Hello instead"
    }
    console.log(greeting); // "say Hi"

let : Hoisting

Just like var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before declaration, you'll get a Reference Error.

Const : Scope

Variables declared with the const maintain constant values. const declarations share some similarities with let declarations. const declarations are block scoped

Note: the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared.

const greeting = "say Hi";
    greeting = "say Hello instead";// error: Assignment to constant variable

const : Hoisting

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

Thank you for reading.