Javascript - what is the difference between var, let and const?

Back in 2016 I made a post on the difference between let and var. However I forgot to include const in this. In this post I will go over the similarities and differences of these keywords.

The differences and similarities

Var, let and const are keywords used to assign values to a variable. They get values assigned to them by using the assignment operator =. It is possible to create a variable with no value at all which will be undefined. All three are hoisted within their scopes. See this post for clarification on what hoisting is.

So they seem very similar. As mentioned in my previous post the big difference is in the scoping. Let and const have block scope whereas var has function scope. A short example of this would be:

if (true){
   var fScope = 'fScope test';
   let bScope = 'bScope test';
}
console.log(fScope); //'fScope test'
console.log(bScope); //Uncaught ReferenceError: bScope is not defined

In the above we will be able to access fScope outside of the if-block. Because var has function scope and is therefore hoisted outside. However let will give a referenceError as it is no longer defined when we try to console.log it. It only lives within its current block - whether that is an if, for, while, function and so on block. Below is an example of the var keyword only being accessible within a function:

var f = function(){
   var fScope = 'fScope test';
};
f();
console.log(fScope); //Uncaught ReferenceError: fScope is not defined

So the var keyword hoists the variable to the top of the function. Whereas let only hoists within the block-scope. This is one of the gotchas when using var. Variables used in for, while and if blocks can be used afterwards - where you may think they are undefined. Using the let keyword they only live within that block (like in many other programming languages). When it comes to hosting let and const work the same way - they both have block scope.

All 3 keywords are supported by modern browsers. However if you aim for lower than Internet explorer 10 you have a problem.

The Const keyword - not so constant..

From the sound of the keyword const it sounds like readonly variables you may find in other languages - such as C#. However const is very different, it means "one-time assignment" or "assign once". Which means it gives you an error if you assign a value to it more than once:

const test = '123';
test = '456'; //Uncaught TypeError: Assignment to constant variable

However, if you assign an object you can still change the attributes of this. Like it can be seen below:

const test = {
   attribute: '123'
};
test.attribute = '456';
console.log(test.attribute); //'456'

The variable test cannot be reassigned. So the reference cannot be changed. However the object which it refers to can. This is the difference between let and const.

Summary

All 3 are used to declare variables. With some differences:

I hope this helps someone out there :) Let me know in the comments.