What is strict mode in JavaScript? How to use strict mode in your JS code?

strict mode is a great tool for catching potential errors and mistakes in your code, especially if you’re new to JavaScript. strict mode was first introduced in ECMAScript 5 or ES5 and it is a way to opt into a, well, stricter version of your code in order to enforce good programming patterns and less error-prone code.

strict mode is a handy tool for catching sloppy coding habits before they get out of hand. The rules of strict mode are referred to as “strict” because they catch issues related to Lazy Assignment, uninitialized variables, and other potential problems. This article covers what strict mode is, how to use it in your code and why you would want to do this. With that being said, let us take a look at some practical examples of using strict Mode.

What is Strict Mode?

strict mode is a feature introduced in ES5 or ECMAScript 5 standard that basically makes it easy to write “secure” and more optimized JavaScript code. Previously, certain actions in JavaScript that are considered bad habits were allowed and did not throw any error. These are known as JavaScript silent errors. strict mode aims to solve this issue by making silent errors throw errors. strict mode basically tells the browsers to change the way they execute javascript which means there are several changes made to the normal javascript semantics.

Before we discuss all the changes between strict mode and regular JavaScript syntax, let us look at why we would want to use strict mode in the first place.

Why should we use Strict Mode?

As we previously discussed, strict mode makes several changes to the JavaScript semantics and the way JavaScript behaves when doing certain actions. With the help of strict mode, certain errors that might normally be overlooked are made to throw errors instead.

For example, if we try using a variable without declaring it in regular JavaScript, it creates a global variable for us. It is generally a bad practice, and it can cause potential bugs in your program.

foo = 12
console.log(foo) // 12Code language: JavaScript (javascript)

But if we try to run the same program while in strict mode, it will throw an error that will look something like this,

Uncaught ReferenceError: foo is not definedCode language: Bash (bash)

This makes sure we are not writing code that is poorly thought out, and also makes certain silent errors apparent so that they are not overlooked. strict mode helps you find these silent errors and potential problems early during development so they can be fixed sooner rather than later.

How to use Strict Mode in JavaScript?

Now that we understand what is strict mode and why we would want to use it, let us look at how we can use strict mode in our JavaScript programs.

There are two ways to use strict mode in your JavaScript programs, depending on your needs,

• strict mode in global scope which affects the entire script or file.
• strict mode inside individual functions, in which case the strict mode rules will only be applied to the code inside the function.

Global Scope

In order to use strict mode for your entire script, write the following statement at the top of your JavaScript file before any other statements. An example can be shown below,

"use strict";

// Rest of your code
var foo = 12;
console.log(foo);Code language: JavaScript (javascript)

And that is it, the strict mode will be applied to your entire script and you will be able to see relevant errors caused by strict mode in your browser’s Console.

Within individual function

To use strict mode in a specific function, we can simply add the same statement as the first line of the function body. Let us see an example of the same,

function veryStrictFunction() {
   "use strict";

   // Rest of your function
   var foo = 12;
   console.log(foo);
}Code language: JavaScript (javascript)

Here the strict mode will be applied to only the code written inside the function veryStrictFunction().

One important thing to note here is block statements enclosed in curly brackets are not subject to strict mode, and will be ignored. The syntax was expressly designed in this way so as to not conflict with earlier versions of ECMAScript5, such as ECMAScript 3 since strict mode and non-strict mode code can coexist.

Strict Mode rules

We’ve discussed that strict mode applies certain rules and restrictions to your JavaScript code in order to make your code safer and more optimized. Now let us look at these rules and restrictions in order to better understand strict mode. The details of the same are as follows,

• It is forbidden to accidentally generate global variables by trying to use a variable that is not declared. Before use, all variables and objects must be declared.
• It is not possible to “delete” a function or variable. Similarly, an error also results from deleting object properties that cannot be deleted.
• The use of the with keyword is considered incorrect syntax.
• It prohibits the usage of some keywords like eval and argument as variable names.
• Both Octal literals (For example, 0100) with a preceding zero and Octal escape literals (For example, \0100) are not allowed.
• With strict mode, an error will be thrown when values are assigned to variables that would normally be silently ignored. For instance, assigning a numeric value to a NaN will throw an error.
• Write operations are not permitted on get-only or read-only variables.
• To make the script more secure, it is not permitted to use the this keyword to refer to the global document object. When using strict mode, it returns undefined.
• strict mode saves a few words for usage as keywords in later versions of JavaScript. Implements, yield, interface, package, private, protected, public, static, and interface are some of the words in this list.
• strict mode guarantees that each parameter of a function is unique.

Conclusion

In this article, we looked at what is strict mode, why we would want to use it in place of regular JavaScript, and how we can use strict mode in our JavaScript code. We also discussed some of the rules and restrictions the strict mode enforces to ensure better code quality and more optimized and “safer” code.

Although when employing strict mode, there are some safety considerations to keep in mind. Strict mode is supported by all of the major modern browsers, however, some of the browsers still only offer limited or even no support at all. When an unsupported browser comes across the "use strict" statement, it’ll be treated as a simple string and will be ignored. So it is recommended to do your research before using strict mode.

Hopefully, this article has helped you solidify your understanding about strict mode, and you are planning to use it in your future projects. When used correctly, it can truly save you from a lot of annoying bugs as well as a lot of development time in the long run.

If you have any questions or want to talk about anything technology, you can find me on Twitter. Thank you for reading!