What Is This “Strict Mode”?

As a JavaScript developer, it’s possible that you might have used strict mode at one point or the other in your code and if you haven’t, well, you might someday. Strict mode can be helpful when trying to debug your app because it brings up errors that you normally wouldn’t expect in sloppy mode (more on that later), the opposite of strict mode, so let’s get to it.

What Is Strict Mode?

First introduced in the ECMAScript version 5, strict mode is a way of ensuring our code doesn’t have any loose ends. It ensures that your code is free of errors as much as possible.

What Does It Do?

• Strict mode converts silent errors to throw errors. What that means is that there are some errors in our code that JavaScript can let slide in order for our code to continue running. This is JavaScript being helpful and sometimes it might come with unforeseen consequences which lead to bugs in our apps.
• Strict mode also prevents you from writing code in a particular way that is either risky or not a good practice at all.

How to Enable Strict Mode?

Enabling strict mode is really easy; all you have to do is add "use strict"; to the top of your code and you’re all set. Let's look at some examples below.

Taking a look at the code snippet above, how do you think the variable initialized without the var, let or const keyword should be handled? anotherVariable was never declared as a variable and line 5 is trying to modify a variable called anotherVariable. It makes sense for the browser to throw an error because anotherVariable does not exist; it was never declared before trying to modify it. But what if we remove the "use strict"; statement?

Looking at the snippet above and reading the comments above you could tell what’s happening there. In non-strict mode, or “sloppy mode,” the undeclared variable gets attached to the global window object. JavaScript saw that the variable never existed before and now tries to help us by adding it as a property to the window object so we can access it as a global variable. This is not really a good idea because if some library you import has a variable with that same name there’s going to be a problem because referencing that variable now might just go fetch whatever you put up in the global window object as the value.

Limiting Strict Mode to a Scope

That’s right, you can limit strict mode to only a block of code if you like. Say you wanted to be sure about what’s getting returned from a function call so the value doesn’t break your code; limiting strict mode to that local scope is the way to go. So basically strict mode can either be in the global scope or in a local scope (within two curly braces).

The snippet above differentiates the global scope from the local scope.

Now that we set the scope of the function doSomething() to run in strict mode, making a call to that function will cause our code to fail because anotherVariable was never declared before reassigning.

What Else Can’t You Do in Strict Mode?

• You cannot delete a variable, function, or an object with the delete keyword.
• You cannot have duplicate parameter names in a function.
• You cannot have duplicate object properties.
• You cannot write to read-only object properties.
• The this keyword refers to the object that called the function and not the global window object.

These are just a few of the common ones; in the links below you can learn more about strict mode and its applications.

Links to Resources

• Strict mode — W3Schools
• Strict mode — Mozilla Developer Network
• A practical application of strict mode — How to make object properties behave like constants