Strict mode in JavaScript

JavaScript wasn't originally created as a full-fledged programming language. It's original purpose was to add some interactivity to web pages. It was created as a very flexible language, forgiving to those who are new at programming.

However, the language started to be use in more complex contexts, that "sloppiness" started to become a problem. Complex software requires language to be more restricted because it makes it easier to maintain.

For that reason a new mode was introduced to the language, this is the strict mode.

How to access strict mode

One way to enable strict mode is by putting the string "use strict"; in the first line of the JavaScript file.

Another way is to use native JavaScript modules. If you're using Node.js, modules are JS files with the filename extension .mjs rather than .js. In the browser, you should add the attribute type="module" to the <script> tag.

Code inside classes is always under strict mode too.

What changes under strict mode

Under the previous mode (often called "sloppy mode", but it's not an official name), you can create variables without declaring them with const, let, or var:

name = "Stephanie";
console.log(`Her name is ${name}`);

In the old sloppy mode, the first line is correct, it creates a new variable called name. But under strict mode, it throws an error.

The problem with creating variables without declaring is that if you reassign an existing variable but you add a typo, you end up creating a new variable without realizing.

Under sloppy mode, many errors were swept under the rug. They didn't work, but the code continued running as if nothing happened. For example:

var undefined = true;
var NaN = 25;
delete Object.prototype;

In the examples above, you're messing with built-in objects and keywords of the language. You can't change or delete them, but in sloppy mode, these changes are ignored. If you run this code under strict mode, it will throw errors.

Another big difference occurs with the this keyboard. When you're calling a function which is not a method of any object, in strict mode the value of this is undefined. Under "sloppy mode", the value of this was the global object (i.e. in the browser, the window object.)

"use strict";
function logThis() {
    console.log(this);
}
logThis(); // Outputs undefined

// sloppy mode
function logThis() {
    console.log(this);
}
logThis(); // Outputs [object Window]

When to use it

Nowadays, it's highly recommended that you always use strict mode. The only caveat is that if you are dealing with older code that doesn't use it, you shouldn't necessarily switch to strict mode until you fix all possible errors.

If you liked this article, you'll love my JavaScript Newsletter.
Every other Monday, I'll send you easy and actionable steps to level up your JavaScript skills. Check it out: https://nicozerpa.com/newsletter