Make an active site

By Rob Miles
7/3/2023

Contents

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.

MAKE SOMETHING HAPPEN 14

Scan the QR code or visit https://www.youtube.com/watch?v=DPnRL7k02wY for a video walkthrough of this Make Something Happen.

Investigate let, var, and const

You can start by loading the clock page from the web. You can find it here:

https://begintocodecloud.com/code/Ch03-Build_interactive_pages/Ch03-06_Variable_Scope/index.html

Load this page into your browser and open the Developer Tools. Now open the Console tab. You will see a page containing a list of sample functions you can call from the Developer Tools Console tab to learn more about variables and scope.

Click to view larger image

The variable’s scope is the part of a program where the variable can be accessed. JavaScript has three kinds of scope: global, function, and block:

Global scope A variable with global scope can be accessed anywhere in the program.
Function scope A variable with function scope can be accessed anywhere in a function body.
Block scope A variable with block scope can be accessed anywhere in a block except where it is “scoped out.”

Let’s discover what all this means with some code examples. The function below creates two variables, both with the name i. The first version of i is assigned the value 99. This variable is declared in the body of the function. The second version of i is declared in the inner block and set the value to 100.

function letScopeDemo() {
    let i = 99;
    {
        let i = 100;
        console.log("let inner i:" + i);
    }
    console.log("let outer i:" + i);
}

Let’s have a look at what happens when you run the function in the console

> letScopeDemo()
let inner i: 100
let outer i: 99

Above, you can see the letScopeDemo call and the results displayed when it ran. You can run the function on your machine. When you run this function, the value of each i is printed out. Note that within the inner block, the outer variable called i (the one containing 99) is not accessible. This is referred to as being “scoped out.” When the program exits the inner block, the inner i (the one containing 100) is discarded, and the outer i becomes accessible again. You use let to create a variable that does not need to exist outside the block in which it was created. These are called global variables.

The function varScopeDemo below is similar to letScopeDemo, except that i is now declared using var.

function varScopeDemo() {
    var i = 99;
    {
        var i = 100;
        console.log("var inner i:" + i);
    }
    console.log("var outer i:" + i);
}

When we run it, we get a different result:

> varScopeDemo()
var inner i: 100
var outer i: 100

Variables declared using var have a function scope if declared in a function and a global scope if declared outside all functions. The second declaration of i replaces the original one with a new value, which persists until the end of the varScopeDemo function. So, variables declared using var within a block exist all the way to the end of the block and can be overwritten with new ones.

Let’s build on your understanding of scope by trying some things that might not work. The letDemo function body contains a block of code nested inside it. Within this block, the let keyword is used to declare a variable called I and sets its value to 99. Then the block ends, and the value of i is displayed in the console.

function letDemo() {
    {
        let i = 99;
    }
    console.log(i);
}

You can run the program by just typing letDemo() on the console:

Click to view larger image

The letDemo function fails because the variable i only exists within the inner block in the function. As soon as execution leaves that block, the variable is discarded, which means attempts to access that variable will fail because it no longer exists.

function varDemo() {
    {
        var i = 99;
    }
    console.log(i);
}

The function varDemo is very similar to letDemo, but this time, i is declared using var. Let’s see what happens when you run this function.

Click to view larger image

This time, the function works perfectly. Variables declared using var remain in existence from the point of declaration until the end of the enclosing scope, which, in this case, means the body of the varDemo function. So, if you try to use the variable i from the console, you will find that it no longer exists because the function varDemo has finished.

Click to view larger image

So far, everything makes perfect sense. You use a let if you want the variable to disappear when the program leaves the block where the variable is declared. You use a var if you want the variable to exist in the entire enclosing scope.

So, let’s try something weird.

function globalDemo() {
    {
        i = 99;
    }
    console.log(i);
}

The globalDemo function uses neither let or var to declare the variable i. You might think that this would cause an error, but it doesn’t. Even stranger, the i variable still exists after the function has been completed.

Click to view larger image

In the introduction to the book, I said that I would flag up “JavaScript heroes,” which are good things about the language, and “JavaScript zeroes,” which are bad. This is a “JavaScript zero.” It is one of the things about JavaScript that I really don’t like. If you don’t use let or var to declare a variable, you get a variable that has global scope, meaning it exists everywhere. This is perhaps the worst thing that could happen. I don’t get an error if I forget the var or let. Instead, I get a global variable, which is visible throughout the program and is open to prying and misuse.

This behavior goes back to the very first version of JavaScript, which was intended to be easy to learn and use. At the time, it seemed a good idea to create variables automatically. Nowadays, JavaScript is used to create applications that need to be highly secure and resilient, so this behavior is a bad idea. To solve the problem, the latest versions of JavaScript have a strict mode, which you can turn on by adding this statement to your program:

function strictGlobalDemo() {
    'use strict';
    i = 99;
}

The strictGlobalDemo function sets strict mode and then tries to create a global variable. This function fails when it tries to automatically create the variable i.

Click to view larger image

When I recorded the video for this Make Something Happen, I was surprised to discover that the strictGlobalDemo function did not fail for me. This is because I was running strictGlobalDemo just after I had run the globalDemo function, which creates a global variable called i. I had to reload the web page (which removes all variables) to get strictGlobalDemo to fail correctly.

Note that strict mode is only enforced in the body of the function strictGlobalDemo function. If you want to enforce strict mode on all the code in your application, you should put the statement at the top of your program, outside any functions.

Strict mode disallows lots of dangerous JavaScript behaviors, including the automatic declaration of variables. I add it to the start of all JavaScript programs I write.

The final hero you’re going to meet is const. You use this when you don’t want your program to change the value in a variable. In the constDemo function below, the variable i is declared as a const. This means the statement that tries to add 1 to the value of i will fail with an error.

function constDemo() {
    {
        const i = 99;
        i = i + 1;
    }
    console.log(i);
}

If you have a value in your program that shouldn’t be changed, you can declare it as constant. Variables declared using const inside a block have the same scope as let. Variables declared using const outside any function have global scope.

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.