A lot of shiny new features came with ES2015 (ES6) and since it's 2017, it's assumed that a lot of JavaScript developers have become familiar with and have started using these features. While this assumption might be true, it's still possible that some of these features remain a mystery to some.

One of the features that came with ES6 is addition oflet andconst which can be used for variable declaration. The question now is, what makes them different from our good ol'var which has been in use? If you are still not clear about this, this article is for you.

In this article,var,let andconst will be discussed with respect to their scope, use and hoisting. As you read, take note of the differences between them I'll point out.

VAR

Before the advent of ES6,var declarations ruled as King. There are issues associated with variables declared withvar though. That is why it was necessary for new ways to declare variables to emerge. First though, let us get to understandvar more before we discuss one of such issues.

Scope ofvar

Scope essentially means where these variables are available for use.var declarations are globally scoped or function/locally scoped. It is globally scoped when avar variable is declared outside a function. This means that any variable that is declared withvar 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.

vargreeter="hey hi";functionnewFunction(){varhello="hello";}

Here,greeter is globally scoped because it exists outside a function whilehello is function scoped. So we cannot access the variablehello outside of a function. So if we do this:

vartester="hey hi";functionnewFunction(){varhello="hello";}console.log(hello);// error: hello is not defined

We'll get an error which is as a result ofhello not being available outside the function.

var variables can be re-declared and updated

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

vargreeter="hey hi";vargreeter="say Hello instead";

and this also

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

Hoisting ofvar

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

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

it is interpreted as this

vargreeter;console.log(greeter);//greeter is undefinedgreeter="say hello"

Sovar variables are hoisted to the top of its scope and initialized with a value of undefined.

Problem withvar

There's a weakness that comes withvar. I'll use the example below to explain this.

vargreeter="hey hi";vartimes=4;if(times>3){vargreeter="say Hello instead";}console.log(greeter)//"say Hello instead"

So, sincetimes > 3 returns true,greeter is redefined to"say Hello instead". While this is not a problem if you knowingly wantgreeter to be redefined, it becomes a problem when you do not realize that a variablegreeter has already been defined before.
If you have usegreeter in other parts of your code, you might be surprised at the output you might get. This might cause a lot of bugs in your code. This is why thelet andconst is necessary.

LET

let is preferred for variable declaration now. It's no surprise as it comes as an improvement to thevar declarations. It also solves this problem that was raised in the last subheading. Let's consider why this is so.

let is block scoped

A block is 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 thelet is only available for use within that block. Let me explain this with an example.

letgreeting="say Hi";lettimes=4;if(times>3){lethello="say Hello instead";console.log(hello);//"say Hello instead"}console.log(hello)// hello is not defined

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

let can be updated but not re-declared.

Just likevar, a variable declared withlet can be updated within its scope. Unlikevar, alet variable cannot be re-declared within its scope. So while this will work,

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

this will return an error.

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

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

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

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

This fact makeslet a better choice thanvar. When usinglet, 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 withvar does not occur.

Hoisting oflet
Just likevar,let declarations are hoisted to the top. Unlikevar which is initialized asundefined, thelet keyword is not initialized. So if you try to use alet variable before declaration, you'll get aReference Error.

CONST

Variables declared with theconst maintain constant values.const declarations share some similarities withlet declarations.

const declarations are block scoped

Likelet declarations,const declarations can only be accessed within the block it was declared.

const cannot be updated or re-declared

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

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

nor this

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

Every const declaration therefore, must be initialized at the time of declaration.
This behavior is somehow different when it comes to objects declared withconst. While aconst object cannot be updated, the properties of this objects can be updated. Therefore, if we declare aconst object as this

constgreeting={message:"say Hi",times:4}

while we cannot do this

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

we can do this

greeting.message="say Hello instead";

This will update the value ofgreeting.message without returning errors.

Hoisting ofconst

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

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

1. var declarations are globally scoped or function scoped whilelet andconst are block scoped.

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

3. They are all hoisted to the top of their scope but whilevarvariables are initialized withundefined,let andconst variables are not initialized.

4. Whilevar andlet can be declared without being initialized,const must be initialized during declaration.

Got any question or addition? please leave a comment.

Thank you for reading :)