Javascript: var, let and const

Laurence Nairne
Sep 6, 2018 · 3 min read

I’ve been learning a bit of Javascript for a few weeks now and as I’ve mentioned a couple of times in previous stories, coming from C# has felt a bit like entering the Wild West. Mostly this is because of concepts like standard vs. strict comparison operators and variables that are declared without specifying so much as a type.

Both of those things are still troubling in my mind, mainly because I don’t trust myself to not fall afoul to them at some point down the road. I found a new issue that bothers me just a bit: the scope of variables with the ‘var’ keyword.

Take the below code block:

if (true) {
var i = 1;
}
function findTruth () {
if (false) {
var j = 0;
}
}
console.log (i);
//Console outputs 1 if the condition is met.
console.log (j);
//Error is thrown because j only exists within the function.

In the first example, I created a variable ‘i’ inside an if statement. In C#, this is only accessible inside the if block. If I tried to log it in the console outside of that block, I’d get an error because such a variable does not exist as far as the console is concerned when the code is run.

In Javascript, variables using the ‘var’ keyword are global unless they are declared inside a function. Ouch. I mean sure it’s good practice to keep your functionality within functions (and so your variable declarations too) where possible, but I’m used to robust scope and I don’t want to go back. Thankfully there’s a solution that came with ES6 (or ECMAScript 2015).

The addition of the ‘let’ and ‘const’ keywords

Both ‘let’ and ‘const’ support block scoping, so if we have the following:

if (true) {
let item1 = 0;
const item2 = 1;
console.log(item1); //This will log 0 because it's in scope.
}
console.log (item2); //Returns with an error as it's out of scope.

This means there’s just one less thing to think about whilst writing code. The difference between the two is thus: variables declared with the ‘let’ keyword can be reassigned. Variables with the ‘const’ keyword cannot.

From reading and watching the video below, I’m inclined to agree that a good process is to use ‘const’ unless you have a need to reassign a variable to represent a different value.

In the video, Matthias closes off stating that programmers should aspire to “minimize mutable state” — that is, minimise the number of variables with shifting references.

It’s important to note (and Matthias does) that ‘const’ does not make a variable immutable, it just stops you reassigning it to represent a different value. That is made clearer if you are working with an object like so:

const obj = {
prop1 : "Hey"
prop2 : "Good"
prop3 : "Looking"
};
obj = {}; //This will result in an error.
obj.prop1 = "Goodbye"; //This compiles fine.

Looking ahead, I can see my biggest use case for ‘let’ being inside loops — the variables created there are only required for iteration purposes, so they don’t need to be global (or even function wide), but they will need to be reassigned else we get stuck in the loop forever.

Some people seem to still like using ‘var’, and most of them understand the shortcomings and the nuances. That’s fine and I’ll definitely keep it in my arsenal if I ever end up having to make amends to code bases that still use them, but I imagine ‘const’ and ‘let’ will be my mainstay.

Laurence Nairne

Written by

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade