Globals and strict mode

The apartment with rooms is in an apartment building. A thing left on the shared staircase is seen by the residents of every apartment, and any of them can move it. In a program, that staircase is the top level of the file, outside all functions and blocks.

A typo in a variable name does not always stop the program. Here the function add says totl instead of total, yet there is no error:

let total = 0;

function add(n) {
    totl = total + n;
}

add(5);
console.log(total); // 0
console.log(totl); // 5

Let's walk through what happened:

1. add(5) runs the line totl = total + n, and the right side of = comes to 5.
2. The name totl is declared nowhere, but the program does not stop: a new variable totl appears with the value 5.
3. Nobody changed total, and the program prints 0.
4. The new totl is visible even outside the function, and the program prints 5.

Global variables

A global variable is a variable declared at the top level of a file, outside functions and blocks. Every function in the file sees it, and any of them can change it. It exists as long as the program runs and keeps its value between function calls.

If several functions change the value, the code makes it hard to tell which of them wrote it last. The thing on the staircase is the same: it has moved, but nobody knows who touched it.

So data is passed through parameters and return, and the top level holds constants: no function can assign them a new value.

By default JavaScript does not treat an assignment to a name that is declared nowhere as an error either. It creates a global variable with that name, even if the line is inside a function. That is how the typo totl turned into a new variable the whole file sees.

Strict mode

The line "use strict"; at the very start of a file turns on strict mode. In our picture it is a doorkeeper at the building's entrance: they let nothing onto the staircase that nobody has signed in.

In strict mode, an assignment to an undeclared name stops the program with the same ReferenceError that reading such a name gives:

"use strict";

let total = 0;

function add(n) {
    totl = total + n; // ✗
}

add(5);

ReferenceError: totl is not defined

This is the Node.js and Chrome text, while Firefox writes ReferenceError: assignment to undeclared variable totl. Now the typo shows up on the very first call of add.

Strict mode also turns other slips that pass silently without it into errors. For example, a function with two identical parameters, function f(a, a), becomes a syntax error in strict mode.

Where the line "use strict"; applies depends on where it stands:

• as the first line of a file, it turns the mode on for the whole file;
• as the first line of a function body, it turns the mode on only inside that function;
• without it, the file runs in the ordinary, non-strict mode.

Interviewers often ask: "What does "use strict" do?" Start with the main point: in strict mode an assignment to an undeclared name gives a ReferenceError instead of a new global variable.

Common mistake

"use strict" is written somewhere other than the start of the file:

let count = 0;
"use strict"; // ✗
cuont = count + 1;
console.log(cuont); // 1

Strict mode did not turn on, and the typo created a global variable again. The line "use strict" works only when it comes first in the file or in a function body. Further down it becomes an ordinary string that does nothing.

Here the doorkeeper picture stops working. A doorkeeper who came late would still start checking, but a late line checks nothing. Move it to the very start of the file.

Key points

• A global variable is declared at the top level of a file: every function sees it and can change it.
• Without strict mode, an assignment to an undeclared name creates a new global variable.
• "use strict"; as the first line of a file or function turns such an assignment into a ReferenceError.
• Data is passed through parameters and return, and the top level holds constants.