DEV Community

Cover image for Understanding JavaScript Strict Mode
Accreditly
Accreditly

Posted on

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!";
Enter fullscreen mode Exit fullscreen mode

For an individual function:

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

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
Enter fullscreen mode Exit fullscreen mode
  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
Enter fullscreen mode Exit fullscreen mode
  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); 
Enter fullscreen mode Exit fullscreen mode
  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();
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (14)

Collapse
 
algot profile image
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.

Collapse
 
accreditly profile image
Accreditly

Big fans of TypeScript here!

Collapse
 
algot profile image
AlgoT

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

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
dragosdev profile image
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."
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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'!

Collapse
 
abdulla1201 profile image
abdulla1201 • Edited

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

Collapse
 
jonrandy profile image
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.

Collapse
 
accreditly profile image
Accreditly

This is true, but it's still good practice elsewhere πŸ‘

Collapse
 
johner97 profile image
Johner97

This post explains everything perfectly.

Collapse
 
josepedrolorenzini profile image
Jose_Lorenzini

Typescript does that !

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
richardpaulhall profile image
richardpaulhall

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

Collapse
 
ttsoares profile image
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 ! ;-)