Difference between Let, Var and Const.

In the old, pre-ES6 era of JavaScript, developers used to declare variables using the keyword var or without any keywords. But times have changed! A lot of shiny new features came out with EcmaScript2015 (ES6). And since 2020, it's assumed that a lot of JavaScript developers have become familiar with and have started using these features.

While this assumption might be partially true, it’s still possible that some of these features remain a mystery to some devs.

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 the good old var which we've been using? If you are still not clear about this, then this article is for you.

In this article, we’ll discuss var, let and const with respect to their scope, use, and hoisting. As you read, take note of the differences between them that I'll point out.

Scope essentially means where these variables are available to use inside our code and where it will not. var declarations are globally scoped or function/locally scoped.

Scope of var

The scope is global when a var variable is declared outside a function. This means that any variable that is declared with var outside a function block is available for use in the whole window.

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 further, look at the example below

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

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

var variables can be re-declared and updated meaning that we can do this within the same scope and won’t get an error.

and this also

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:

it is interpreted as this:

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

There’s a weakness that comes with var.

So, since times > 3 returns true, greeter is redefined to "say Hello instead". While this is not a problem if you knowingly want greeter to be redefined, it becomes a problem when you do not realize that a variable greeter has already been defined before.

If you have used greeter in other parts of your code, you might be surprised at the output you might get. This will likely cause a lot of bugs in your code. This is why let and const are necessary.

Let

let is now preferred for variable declaration. It's no surprise as it comes as an improvement to var declarations. It also solves the problem with var that we just covered. Let's consider why this is so.

Scope of let

Let is block-scoped. A block is a chunk of code bounded by {}. A block lives in curly braces. Anything within 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:

We see that using hello outside its block (the curly braces where it was defined) returns an error. This is because let variables are block scoped.

Get GOE’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Just like var, a variable declared with let can be updated within its scope. Unlike var, a let variable cannot be re-declared within its scope. So, while this will work:

this will return an error:

However, if the same variable is defined in different scopes, there will be no error:

Why is there no error? This is because both instances are treated as different variables since they have different scopes.

This fact makes let a better choice than var. When using let, you don't have to bother if you have used a name for a variable before as a variable exists only within its scope.

Also, since a variable cannot be declared more than once within a scope, then the problem discussed earlier that occurs with var does not happen.

Hoisting of let

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

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

Scope of const

Const declarations are block scoped. Like let declarations, const declarations can only be accessed within the block they were declared.

This means that the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const, we can neither do this:

nor this:

Every const declaration, therefore, must be initialized at the time of declaration.

This behavior is somehow different when it comes to objects declared with const. While a const object cannot be updated, the properties of this objects can be updated. Therefore, if we declare a const object as this:

while we cannot do this:

we can do this:

This will update the value of greeting.message without returning errors.

Hoisting of const

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

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.

Thank you for reading!!!