The Difference Between var, let and const in JavaScript

Before the ES6 was released, var was the only feature for declaring variables in Javascript. When the ES6 was released, one of the most interesting features was the addition of let and const for variable declarations. In this article we will see the difference between var, let and const.

VAR

The var declaration is the oldest of all and was used before the ES6 was released. There are associated issues with var declarations though. That's why new variable declarations were necessary.

Scope of var

The var declarations can be globally or locally scoped. If the var is declared outside a function it is globally scoped. This means that any var variables declared globally are available for use in the whole window. If the var is declared inside a function it is function scoped. This means that it is available and can be accessed only within that function. Let's see a simple example below.

var foo = "foo";

function dummy(){
  var bar = "bar";
}

In the example above foo is globally scoped because it exists outside a function, while bar is function scoped. This means we cannot access the bar variable outside of our dummy function.

Hoisting of var

In JavaScript, hoisting is a mechanism where variables and function declarations are moved to the top of their scope before the code is executed. This means if we do:

console.log(foo);
var foo = "foo";

It will be interpreted like this

var foo;
console.log(foo); //foo is undefined
foo = "foo";

As we can see var variables are hoisted to the top of its scope and initialized with a value of undefined.

Problem with var

If we are using var declarations everywhere we can start getting problems and bugs with our code. Let's see an example of var issues below.

var foo = "bar is smaller";
var bar = 5;

if(bar > 3){
  var foo = "bar is bigger";
}

console.log(foo); //bar is bigger

This is not a problem if you want foo to be redefined, but it becomes a problem when you do not realize that a variable foo has already been defined before. This might cause a lot of bugs in the code. This is why the let and const are necessary for some situations.

LET

The let declaration is the preferred way for variable declaration after the ES6 was released, It is considered as an improvement to the var declarations.

Scope of let

The let declaration is block scoped (block is a piece of code encapsulated with "{}") this means a variable declared in a block with the let is only available for use within that block. Let's see an example about the let.

let foo = "bar is smaller";
let bar = 5;

if(bar > 3){
  let foo = "bar is bigger";
  console.log(foo); //bar is bigger
}

console.log(foo); //bar is smaller

We can see that using foo outside its block its not updated from the block. This is because both instances of foo are treated as different variables since they have different scopes. If we want to update let like var we must do that inside its scope. Because of this, let is a better choice than var. When using let, you won't mess up if you have used a name for a variable before as a variable exists only within its scope.

Hoisting of let

Same as var, let variable declarations are hoisted on top, the difference is that with var is initialized as undefined, the let is not initialized. So if you try to access it you'll get a Reference Error.

CONST

The const declaration is very similar to let and as the name const says they maintain constant values.

Scope of const

Same as let declarations, const declarations are block-scoped and can only be accessed within the block it was declared. The biggest difference is that they cannot be updated or re-declared, this means the value remains the same with the scope. Also every const declaration, therefore, must be initialized at the time of declaration.

const foo = "foo";
foo = "bar";//error : Assignment to constant variable. 

Hoisting of const

The const declarations here are the same as let also. they are hoisted to the top but are not initialized.

If you want to learn more in-depth about scope in Javascript, I highly recommend you to check this book: You Don't Know JS: Scope & Closures