Make an active site

JavaScript heroes: let, var, and const

Some programming language features are there so you can use the language to make a working program. For example, a program needs to be able to calculate answers and make decisions, so JavaScript provides assignments and if constructions. However, let, var, and const are not provided to make programs work; they are provided to help us create code that is more secure. They help us control the visibility of variables we use in our programs. Let’s look at why variable visibility is important and how we can use let, var, and const to manage visibility in JavaScript.

Making a variable in a program global is rather like writing your name and phone number on the notice board in the office. It makes it easy for your colleagues to contact you, but it also means that anyone seeing the notice board can call you. And someone else could erase the number you wrote and put up a different one if they wanted to redirect your phone calls to another person. In real life, we need to be careful about how much data we make public, and it’s no different in JavaScript programs. Let’s look at how we manage the scope of variables using JavaScript heroes let, var, and const.

It seems obvious when we need to use let or var. We use let when we want to create a variable that will disappear when a program exits the block where it was declared. We try to avoid using var at all unless we have something we really want to share over the whole program. But what about const? When I write code, I try to look out for situations where a bug can happen and then change the code to remove that situation.Look at these two statements from our adjustable clock, which store the minutesOffset value in the browser:

localStorage.setItem("minutesOffset", String(offset));
offsetString = localStorage.getItem("minutesOffset");

The first statement creates a local storage item called "minutesOffset", which contains a string of text specifying the offset value. The second statement gets this value back from local storage. Can you spot anything you might not like about this code? The thing I don’t like about it is that I have to type the "minutesOffset" string twice. This string gives the name of the storage location that will be written to and then read back from later.

This is a situation where a bug could be introduced into the code. If I type one of the strings as "MinutesOffset" by mistake (I’ve made the first letter uppercase rather than lowercase), the program will either store the value in the wrong place or fail to find it when it looks for it. I can solve this problem completely by creating a constant variable that holds the name of the stored item:

const minutesOffsetStoreName = "minutesOffset";
localStorage.setItem(minutesOffsetStoreName, String(offset));
offsetString = localStorage.getItem(minutesOffsetStoreName);

The code above shows how I would do this. This makes it impossible to mistype the name of the store. The minutesOffsetStoreName is declared at a global scope outside every function, so it is available over the entire program. I don’t mind constant values being global because they are not vulnerable to being changed. You can find this code in the Ch03-06_Variable_Storage example.