Const vs Let vs Var

Var

Before ES6 was born, var was king. However, there are many problems when using this method of declaration. First, let's understand var before we discuss the above issues.

Scope of var

Scope basically means where these variables are available for use. When we declare var , that variable can be global scope or function/local scope.

Variables will be global scope when a var variable is declared outside a function. This means that any variable declared with var outside a function can be used anywhere.

A variable will be in function scope when it is declared inside a function. This means that variable will be available and can only be used within that function.

Here is an example:

var greeter = "hey hi";

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

Here, greeter is a variable with global scope because it is declared outside a function while hello is a function scope. Therefore, we will not be able to access hello outside the function. If we do this:

var tester = "hey hi";

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

We will receive an error because hello is not allowed to be accessed outside the function.

Var variables can be redeclared and updated

This means we can re-declare a variable that has already been declared in the same scope without error.

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

similar:

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

Hoisting of var

Hoisting is a Javascript mechanism, when we declare a variable or function, they will be pushed to the top of their scope before the code is executed. Here is an example:

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

It will be like this:

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

Here the var variable has been pushed to the top of its scope and initialized with a value of undefined .

The problem of var

There is a weakness when we use var . Below will be an explanatory example:

var greeter = "hey hi";
var times = 4;

if (times > 3) {
        var greeter = "say Hello instead"; 
}

 console.log(greeter) // "say Hello instead"

Since times > 3 returns true, greeter is redeclared as "say Hello instead" . This won't be a problem if you intentionally want greeter to be declared again, it will be a problem when you forget that a greeter variable was previously declared. And this will cause many problems and you will be surprised to see the output you get.

This is also the reason why let and const were born.

Let

let has been almost "meta" for many years now. This is quite normal as it is an improvement over the old var declaration . It solves the var problem we just mentioned.

Scope of let

The scope of let is block scope. A block is a piece of code delimited by {}. A block is enclosed in curly braces. Anything within curly braces is a block.

Therefore, a variable declared in a block with let can only be used in that block. Here is 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

It can be seen that when we try console.log(hello) it returns an error. That's because hello has block scope.

let can update but cannot redeclare

Like var , a variable declared with let can be updated within its scope. But the difference here is that a variable declared with let cannot be declared again within its scope. Here is an example:

 let greeting = "say Hi";
 greeting = "say Hello instead";

Doing this will give an error:

let greeting = "say Hi";
let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

However, if the same variable is declared in different scopes, there is no problem:

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

That's why let is the current meta. When using let , you don't have to worry if you have previously declared a variable with the same name because the let variable will only exist within its scope.

Hoisting of let

Just like var , when we declare a let variable , it will also be pushed to the top. But note, unlike var , when initialized, var will have the value undefined . let is not like that, so if you try to use let before declaring, you will get a reference error ( Reference Error ).

Const

Variables declared with const will have a constant value. This declaration has some similarities with let .

Scope of const

Like let , const 's scope is block scope.

const cannot be updated or redeclared

This means that the value of a variable declared with const will not change within its scope. const cannot be updated or redeclared. Here is an example:

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

or:

 const greeting = "say Hi";
 const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared

Therefore, all const declarations must be initialized at declaration time.

But when we declare objects with const , there will be a little difference. A const object cannot be updated, but its properties can be updated. Here is an example:

 const greeting = {
        message: "say Hi",
        times: 4
 }

We will not be able to do the following:

 greeting = {
        words: "Hello",
        number: "five"
  } // error:  Assignment to constant variable.

Instead:

greeting.message = "say Hello instead";

This way we can update the value of greeting.message without error.

Hoisting of const

Just like let , when declaring const they will be brought to the top but not initialized.

Summary

1. var has global scope while let and const have block scope.

2. Var variables can be updated and redeclared within their scope; let can update but cannot redeclare; Const variables cannot be updated nor redeclared.

3. All three declaration methods possess the hoisting mechanism . But var variables are initialized with the value undefined , let and const are not like that, they are not initialized.

4. var and let can be declared without initialization, const must be initialized during declaration.