Understanding JavaScript Strict Mode

In JavaScript, the language provides a feature known as 'strict mode', introduced in ECMAScript 5 (ES5), that helps developers avoid common JavaScript pitfalls. In this article, we will dive into what strict mode is, how to enable it, and the benefits it provides.

For a more in-depth article you can check out the counter-part to this article over on our website: Understanding JavaScript Strict Mode on Accreditly.

What is Strict Mode?

Strict mode is a way to opt into a restricted variant of JavaScript. In strict mode, JavaScript eliminates some JavaScript silent errors by changing them to throw errors. It fixes mistakes that make it difficult for JavaScript engines to perform optimizations, and it prohibits some syntax likely to be defined in future versions of ECMAScript.

Enabling Strict Mode

To enable strict mode in JavaScript, you use the string "use strict". This can be done for an entire script or within an individual function.

For an entire script:

"use strict";
var v = "Hello, I'm in strict mode!";

For an individual function:

function strictFunc() {
  "use strict";
  var v = "Hello, I'm in strict mode inside a function!";
}

The "use strict" directive is only recognized at the beginning of a script or a function.

The Benefits of Using Strict Mode

Strict mode helps out in a couple of ways:

1. It catches common coding mistakes and "unsafe" actions.

For instance variables must be declared with var, let, or const. A variable that has not been declared will cause an error.

"use strict";
x = 3.14; // This will cause an error because x is not declared

1. It prevents the use of future ECMAScript reserved words. For example:

"use strict";
var let = "Hello"; // This will cause an error because "let" is a reserved word in ES6

1. It simplifies eval() and arguments.

In strict mode, variables declared within an eval() statement will not create variables in the surrounding scope.

"use strict";
eval("var x = 10;");
// This will cause an error because x is not defined outside the scope of eval()
console.log(x); 

1. It restricts this to undefined for functions that are not methods or constructors.

In non-strict mode, this will default to the global object, window in a browser context.

"use strict";
function myFunction() {
  console.log(this); // Will output: undefined
}
myFunction();

Using strict mode can help you catch errors that would otherwise have been silently ignored. It also helps prevent you from using potentially problematic syntax and making inefficient coding decisions. Strict mode can make your JavaScript code more robust and maintainable, and it's a best practice to start your scripts with the "use strict" directive.

Comments

[AlgoT]

Really recommend also trying out TypeScript. These kind of mistakes wouldn't even let your code execute, because TypeScript would throw errors. TypeScript is also very configurable, so you can make it as strict as you want, or you can make it more relaxed - depends on what kind of mistakes you find more often than others. Huge time saver.

[Accreditly]

Big fans of TypeScript here!

[AlgoT]

Big fans of anything that saves time & catches bugs before it's a production fire!

[Dragos Barbuta]

Hey, great post about 'use strict'! It's like a friendly coach for writing better JavaScript. Here's a quick extra thought - have you considered how it handles variables?

Without 'strict mode', if you forget to declare a variable, JavaScript thinks you want it global (available everywhere). This can cause funny bugs. Like this:

function oops() {
  surprise = "Surprise! I'm global.";
}
oops();
console.log(surprise); // "Surprise! I'm global."

But with 'strict mode', JavaScript stops us. If we forget, it gives an error. This is super helpful for avoiding bugs. Like so:

"use strict";
function noOops() {
  surprise = "No surprises here."; // Error!
}
noOops();

But here's a cool fact - if you're using modules (a way to split your code into separate files), you don't have to worry about this. Modules automatically apply 'strict mode', keeping our code nice and tidy. So, another win for 'use strict'!

[abdulla1201]

Really recommend also trying out TypeScript. These kind of mistakes wouldn't even let our code execute, because TypeScript would throw errors. TypeScript is also very configurable, so you can make it as strict as you want, or you can make it more relaxed - depends on what kind of mistakes you find more often than others. Huge time saver.
Regards: Pubg Nickname

[Jon Randy 🎖️]

...it's a best practice to start your scripts with the "use strict" directive.

Unnecessary in Javascript modules since they are in strict mode by default.

[Accreditly]

This is true, but it's still good practice elsewhere 👍

[Johner97]

This post explains everything perfectly.

[Jose_Lorenzini]

Typescript does that !

[Thomas TS]

After some week studying TS I was bitten by JSDoc and switched...
In the long run my bet is that JSDoc will render TS obsolete...
Plus, it is always nice to NOT use Micro$oft stuff ! ;-)

[richardpaulhall]

Much of what should have been in JavaScript from the beginning.