JavaScript: var, let, const
Tags: javascript
Published: 2018-11-15 02:09:48

---
title: JavaScript: var, let, const
published: true
description: 
tags: #javascript
---

In ES6, a new way to declare variable is introduced -- **const** and **let**. Before ES6, developers use **var** to declare different variables. However, it may cause potential issues or implicit bugs in the code. In this article, I'll introduce const, let, var and give a clear comparison.


##Comparison Table##
|    |var    |let    |const    |
|-------|-------|-------|---------|
|reassigned    |O    |O    |X    |
|Scope    |Function Scope    |Block Scope    |Block Scope    |
|Reference before declaration    |O    |X    |X    |


###const
**const** is used when you don't want to reassign the variable. It stays **constant** once it's declared. As a result, const is always a default option for me if I don't need to reassign the variable. In this way, we can also avoid the case when we occasionally declare the same variable name in other files.


###let
When it comes to the situation I need to reassign a variable, **let** is more welcome than var after ES6. The reason is that let is in block scope which means it only exists within its own scope. For Example,

```javascript
let foo='outside';
if(true){
    let foo = 'inside'
    console.log(foo);            //print inside

}
console.log(foo);                //print outside

``` 

After if condition, foo is equal to 'outside' rather than the value we have inside the if statement ('inside'). 


###var
**var** is an old way to declare variable in javaScript and it's now the weakest keyword to define a variable. The variable declared by var may or may not be reassigned and because it is in function scope, the variable may or may not be used for entire function. If the variable is reassigned accidentally within a for loop (block scope), then that's when things can easily go wrong. People can overwrite the parent assignments in this case. For example,


```javascript
var foo='outside';
if(true){
    var foo = 'inside'
    console.log(foo);            //print inside

}
console.log(foo);                //print inside

``` 
To clarify, var is in function scope. So if people do reassignment in a function, the variable outside the function wouldn't be changed.

```javascript
var foo='outside';
var fooFunction = function(){var foo='inside'}
fooFunction();
console.log(foo);    //print outside

```

Another potential issue with **var** is that it can be referenced before it's assigned. For example,

```javascript
var x = 'foo';
console.log(x);         //foo
console.log(y);         //undefined, no errors!!
var y = 'late foo';     //late foo 
console.log(y);

```
There's no errors when using variable before declaration. Javascript engine reads the above script as

```javascript
var x;             //variable declaration
var y;             //variable declaration
x = 'foo';         //variable initialization
console.log(x);    //foo
console.log(y);    //undefined, no errors!!
y ='late foo';     //variable initialization
console.log(y);    //late foo


```
This is because Javascript engine only **hoists declaration** not initialization. Although people can avoid this issue by using 'use strict', **const** and **let** are still stronger and can reduce potential error and make the code more clear.