Subtle Yet Powerful Differences of var, let and const in JavaScript

JavaScript is an elegant and eloquent in-demand programming language, yet it has some parts which are initially somewhat difficult to grasp and may cause a feeling of awkwardness. One such weird part is the difference between three variable types: var, let, const. In this article, we’ll try to understand why these differences exist in the first place and how to make the most use of them, by describing the situations where they can be most appropriate.

First of all, let’s understand what a variable represents. Imagine you go to a bank and put into safe whatever you want, money, valuables, gold, etc. This is exactly what variables do, you can store in them any information you want (except actual money or gold), like arrays, objects, functions, number, boolean, string, undefined. Later, you can access all these items by invoking variables by their names that they got when were first declared. Consider the following:

var name; // undefined (variable declaration, undefined upon it)

name = “John” // “John” (assignment of an existing variable)

or we can combine these two lines into one (why bother?)

var name = “John” // “John” (variable declaration and assignment)

Several rules to note here are that the variables cannot be named by certain words, which are known as reserved words in JavaScript, they also cannot start with a number (var 1name), cannot contain spaces (var name and last name). They should begin with lower case letters, dollar sign ($) or underscore (_), and be camel-cased in case of concatenating more than one word (var firstNameAndLastName) for better readability.

var, let & const

Imagine that we intend to declare and assign multiple variables in a single breath. JavaScript can alleviate this process by eliminating unnecessary repetitions. Instead of

var a = 1

var b = 2

var c = 3

we can write

var a = 1, b = 2, c = 3

thus avoiding repetition of var word. var-s values can be changed, for instance, if we assigned a variable to the “Michael” string, it can afterward be changed into another value, like “Jackson”:

var person = “Michael”;

person = “Jackson”;

let person = “Michael”;

person = “Jackson”;

BUT

const person = “Michael”;

person = “Jackson”; // Uncaught TypeError: Assignment to constant variable.

So both var and let can be declared+assigned first and then re-assigned, unlike const, as the name suggests, it is constant, and can’t be re-assigned. But here the differences don’t end!

var has been there for many years before implementing other variables. You can easily encounter it in any pre-ES2015 code. Also, var-s have scope issues, that’s why in the ES2016 era it’s advisable to use let and const instead. To go more detailed into this issue, we must first declare, that JavaScript has two types of scopes, function-scope, and block-scope.

Function-scope:

Here we can see that var name is only visible in the function-scope when it is console logged within the function, JavaScript recognizes var name and prints out its value (string “Michael”). However, when we try to call it outside of the function (the second time when it’s console logged), it throws an error, complaining about the name not being defined with ReferenceError. The situation can get more complicated when exemplifying the block-scope

Within the block scope (the space between curly braces, {…}), all our variables, whether they are var, let, or const, are easily invoked. Things get complicated when trying to invoke them outside of the scope. Ideally, they shouldn’t be visible outside of the scope, while they should only live within the scope! This rule is correct for let and const, as they throw a ReferenceError when tried to be console logged outside of the scope, but var firstName can be easily accessed even outside of the scope. And this is a big issue, while we want to keep variables private for the scope they live in, but var breaks this rule, which is actually a bug. Therefore, let and const variables were created to the rescue and elimination of this issue, they are more specific and tell us, in case of ReferenceError, that they cannot be addressed outside of the scope if they live within it!

Conclusion

All right, so we finally understand the difference between these three types of variables. What is the practical usage? Which variables to be used and where?

As we underlined, var is an old version with a block-scope bug coming with it, so it is good to know about it but it’s the best practice never to use it! Ok, what about let and const? As was indicated above, const should be used as a constant, so it is advisable to benefit from it pretty much most of the time, but when the value of a variable is intended to be altered, for instance in loops, in counters, it is required to use let so that it changes its value after each iteration.