This is an article to help newbies learn about Javascript to clear the problem between the three ways of declaring variables that are var , let , const .

let and const were introduced in ES6. The question here is how is it different from var ? In this article, we will discuss scope, usage and hoisting.

var

Before ES6 came out, var was king. However, there are many problems when using this declaration. First, let’s understand var well before we discuss the above.

Scope of var

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

The variable 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.

The variable will be function scope when it is declared inside a function. This means that the variable will be available and only usable within that function.

Here is an example:

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 it like this:

We will get an error because hello is not allowed outside the function.

The variable var can be re-declared and updated

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

similar:

Hoisting of var

Hoisting is a mechanism of Javascript, 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:

It will be like this:

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

Var’s problem

There is a weakness when we use var . Here is an explanatory example:

Since times > 3 returns true, greeter is re-declared as “say Hello instead” . This won’t be a problem if you intentionally want greeter to be re-declared, it will be a problem when you forget that a greeter variable has been declared previously. And this will cause a lot of problems and you will be surprised at the output you get.

This is also why let and const came into existence.

let

let has been pretty much the “meta” for years now. This is quite normal as it is an improvement over the old way of declaring var . It solves the var problem we just mentioned.

Scope of let

The scope of let is block scope. Block is a piece of code delimited by {}. A block is enclosed in a curly brace. Anything in 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:

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

let can update but cannot redeclare

Just like var , a variable declared with let can be updated in its scope. But the difference here is that a variable declared with let cannot be re-declared in its scope. Here is an example:

Doing this will error:

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

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

Let .’s Hoisting

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 you declare it, 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

Just like let , the scope of const is block scope.

const cannot update or re-declare

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

or:

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

But when we declare objects with const , it’s a little different. A const object cannot be updated, but its properties can be updated. Here is an example:

We won’t be able to do the following:

Instead:

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

Hoisting of const

Just like let , when declaring const they are 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 re-declared in their scope; let can update but not redeclare; Const variables cannot be updated nor re-declared.
3. All three declarations have their own 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.

Thank you for reading