There are three different ways to declare a variable in JavaScript: const, let and var. Historically, var has been the only way of declaring a JavaScript variable :
An addition to JavaScript â to be specific: JavaScript ES6 in 2015 â has made const and let available to the language:
Obviously more options on how to declare and define a variable in JavaScript doesnât make it easier for developers being new to the language. But we can quickly make things easier for beginners: One can say that const and let took over and var isnât really used anymore in modern JavaScript. Itâs mainly because of two reasons:
There are two reasons I can think of why let (and const) is(/are) superior to var: hoisting and scoping. Letâs take the following example code for summing up the age of an array of persons with var as the variable declaration of choice:
First, hoisting has been an issue with var, because every variable declared with var is initialized with undefined by default even though it hasnât been declared/defined yet in the actual code:
If our variable wouldnât be declared in the code eventually, we would get a âReferenceError: sum is not definedâ once our JavaScript code executes, which may already be the desired behavior anyway. However, since sum is declared/defined somewhere below in the code, JavaScript preventively initializes it as undefined.
This doesnât seem to be correct when reading the code though, because one would assume that the variable is declared or defined once it has been actually declared or defined. By using let instead of var, we avoid this behavior and get the desired âReferenceErrorâ anyway:
Second, scoping has been another issue when declaring JavaScript variables with var. Letâs take the previous example again, but output another var defined variable:
Since var is function-scoped in JavaScript, the iterator of our for-loop is accessible outside of the for-loop (block). In contrast to var, let is block-scoped which means it is only defined in a block such as the for-loop:
Again, this is the more desired behavior established by let (and const) in comparison to var. Having let (and const) being block-scoped, helps us the same way as the hoisting behavior from before, to reason about our code. Without using var, we are doing fine as JS developers just using const and let.
So if only const and let are primarily used in JS, because of the hoisting and scoping issues of variables declared with var, whatâs the major difference between const and let then? Since both are block-scoped and not hoisted, the only differences are that
Some people may get to the immediate conclusion that a JavaScript variable declared with const must be immutable (unchangeable) then, because it cannot be mutated (changed). However, itâs important to know that if const is used for a JavaScript object or array, its internal properties can still be re-assigned:
Thatâs why itâs not a good idea to mistake JavaScriptâs const variable declaration with immutable data structures.
However, using const and let gives us stronger signals about the usage of the variable in contrast to var. For instance, const gives us a strong signal â but just a signal, because itâs not enforced for JavaScript for all JavaScript data types as we have seen in the previous example â that the variable is intended (!) to be immutable. If someone would want to signal the intention of a JavaScript being mutable, then one would use let instead of const for the variable declaration:
However, since itâs a common practice to keep data structures immutable in JavaScript, the previous example would be better expressed without changing one of the objects and instead returning a new object for the desired change. Hence, using const instead of let would signal this intention, but as mentioned before, not enforce it:
So if const is used most often, because it doesnât give you the ability to re-assign variables, when should one use let instead of const? Commonly let is used in operations where variables have to change by necessity:
In for-loops itâs common to see let for the iterating variable. Also if a variable goes through transformations over time, which is the case for the sum of the age here, it has to be defined as let, because otherwise we would run into a Uncaught TypeError: Assignment to constant variable. -exception:
So we can see how there are clear lines between using const vs let in JavaScript. If we want to embrace the intention of keeping immutable data structures by not re-assigning them, and by avoiding to re-assign their internal properties, const gives us and others in a code base a pretty strong signal to not change the variable. Instead, if we want to change a variable, in fluctuant operations like for-loops, we can use let instead of const.
As a rule of thumb, my recommendation would be: