What's the purpose of "use strict" in JavaScript?

Background

JavaScript was initially created as a simple scripting language to help enable dynamic content and make web pages more interactive. As such, it wasn't designed to allow code to be easily interpreted without executing it first, which makes static analysis much harder.

Javascript has historically been forgiving of bad syntax. It has allowed developers to get away with things that modern languages would not, and that could result in unexpected and unwanted side effects.

As the language has evolved and adopted modern best practices, backwards compatibility has become an issue. "strict mode" was a new feature introduced in ECMAScript 5 that allows code to be interpreted in a "strict" operating context. This strict context enforces stricter parsing and error handling on the code at runtime addressing some of the historical syntax issues of the language.

It was intended to make JavaScript lexically scoped so it could be statically analysable. In practice, what this means is that "strict mode" makes several changes to standard JavaScript semantics that:

  1. Prohibits some syntax that introduces pore and hard-to-debug programming practises.
  2. Throws errors when relatively "unsafe" actions are taken.
  3. Disables older features that are confusing or poorly thought out.

In short, it helps developers write cleaner code and catch errors and bugs that might otherwise go unnoticed.

Since ECMAScript 5 is backwards-compatible with ECMAScript 3. Adding "strict mode" to a script is not a statement but a literal expression and will apear as a string to older JavaScript engines and simply be ignored.

Using "strict mode"

"strict mode" can be applied to an entire script or an individual function scope. This allows it to be periodically added to existing projects without requiring entire codebases to be updated at once.

Scripts "strict mode"

To invoke strict mode for an entire script, add the "use strict" or 'use strict' directive at the top of the script before any other code.

"use strict";
const a = "strict mode interpreted";

function strictFunction() {
	returns "also strict mode interpreted."
}
whole script strict mode syntax

Function "strict mode"

Enforce strict mode for a specific function scope by using the "use strict" or 'use strict' directive at the top of the function body before any other code.

const a = "not strict mode interpreted";

function strictFunction() {
  	"use strict";

	const b = "strict mode interpreted";

  	function nestedStrictFunction() {
    	return "also strict mode interpreted.";
	}

  	return "also strict mode interpreted.";
}

function notStrictFunction() {
      return "not strict mode interpreted.";
}

Modules "strict mode."

ES6 modules are always in strict mode, with no "strict mode" directive needed to initiate it.

function strictFunction() {
  return "strict mode interpreted.";
}

export default strictFunction;

Class "strict mode"

The body of a class, the constructor method, static method, prototype method, and other functions are automatically run in strict mode, with no "strict mode" directive needed to initiate it.

class strictClass {
  // All code is evaluated in strict mode
  strictMethod() {
    return "Strict mode interpreted.";
  }
}
new strictClass().strictMethod();

// Code here may not in strict mode
const a = "not strict mode interpreted";

Should I use "use strict"?

Modern JavaScript applications use classes and modules to scale better and enable maintainable code. classes and modules are always in strict mode, so there's little need to use the "use strict" directive at the top of your scripts.

For now, "use strict" is a welcome guest at the top of your scripts that has no downside, but in general, it's an unnecessary addition to modern apps.

For small single-purpose scripts not making use of classes or modules, adding "use strict" to the top of the script is the best practice and will help avoid any potential sloppy coding practices.

You've successfully subscribed to Twisted Brackets
Great! Next, complete checkout to get full access to all premium content.
Error! Could not sign up. invalid link.
Welcome back! You've successfully signed in.
Error! Could not sign in. Please try again.
Success! Your account is fully activated, you now have access to all content.
Error! Stripe checkout failed.
Success! Your billing info is updated.
Error! Billing info update failed.