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

Scope of Article

In this article, we will understand how to declare a variable using var, let, and const keywords in javascript and the differences between them. We will also see how scoping works and will talk about the hoisting and how it works.

In short, what are variables in javascript?

JavaScript variables are containers for storing data values

Var

Before the advent of ES6, var declarations ruled. There are issues associated with variables declared with var, though. That is why it was necessary for new ways to declare variables to emerge. First, let's get to understand var more before we discuss those issues.

Scope of var

Var keyword has a global scope or function scope. It means if any variable with the `var keyword is declared globally (outside the function) so it is accessible inside the function and also accessible globally.

var is function scoped when it is declared within a function. This means it is available and can only be accessed within that function.

To understand further, look at the example below.

var greeter = "hey hi";

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

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

var tester = "hey hi";

    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined

We'll get an error that is a result of hello not being available outside the function.

var variables can be re-declared and updated

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

  var greeter = "hey hi";
  var greeter = "say Hello instead";

and this also

var greeter = "hey hi";
greeter = "say Hello instead";

Hoisting of var

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"

So var variables are hoisted to the top of their scope and initialized with a value of undefined.

Problem with the var Variable

The var variable can be re-declared and updated. re-declaration allows declaring more than one variable with the same name, because of this reason, if we declare a new variable by mistake, it will overwrite the original variable value. This will likely cause a lot of bugs in your code. This is why let and const are necessary.

Let

The let declaration is the preferred way for variable declaration after the ES6 was released, It is considered as an improvement to the var declarations.

However, variables defined with let or const keywords when hoisted are not initialized with a value of undefined. Rather, they are in a state called the Temporal Dead Zone and are not initialized until their definitions are evaluated.

Scope of let

The let declaration is block scoped (block is a piece of code encapsulated with "{}") this means a variable declared in a block with the let is only available for use within that block.

let myAge = 20;
if(myAge > 18) {
    let myName = "my name";
    console.log(myName) //output => "my name"
}
console.log(myName); //output => ReferenceError

The above example shows the difference between letand var and const in javascript. In the example above, we have a variable myAge and an if conditional block, our if condition is true here, so we came inside the if block. Inside the if block we have another variable, myName, which is in a block scope. We print the myName variable to the console inside theif block now when we try to print the variable myName outside the if block it's not accessible, and throwReferenceError because of scope.

Hoisting of let

Same as var, let variable declarations are hoisted on top, the difference is that with var is initialized as undefined, the let is not initialized. So if you try to access it you'll get a Reference Error.

console.log(myName); //output => ReferenceError
let myName = "my name";

The above example shows the difference between let and var and const in javascript. Here we are trying to access a variable myName before the declaration but get ReferenceError because after getting hoisted to the top of the scope variable remains uninitialized.

CONST

The const declaration is very similar to let and as the name const says they maintain constant values.

Scope of const

Same as let declarations, const declarations are block-scoped and can only be accessed within the block it was declared. The biggest difference is that they cannot be updated or re-declared, this means the value remains the same with the scope. Also every const declaration, therefore, must be initialized at the time of declaration.

const foo = "foo";
foo = "bar";//error : Assignment to constant variable.

Hoisting of const

Const variable also gets hoisted to the top of scope But did not get initialize any value, as a result, if we try to access the const variable before declaring it will throw a syntax error because it doesn’t have any value to print and it's illegal for const variable.

let’s take an example to understand it further:

console.log(myName); //output => ReferenceError
const myName = "my name";

The above example shows the difference between let and var and const in javascript. Here we are trying to access a variable myName before the declaration but get ReferenceError because after getting hoisted to the top of scope const variable remains uninitialized.

Conclusion

So just in case you missed the differences, here they are:

• var declarations are globally scoped or function scoped while let and const are block scoped.
• var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
• They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.
• While var and let can be declared without being initialized, const must be initialized during declaration.