What is `'use strict';` (strict mode) in JavaScript for?

TL;DR

'use strict' is a statement used to enable strict mode to entire scripts or individual functions. Strict mode is a way to opt into a restricted variant of JavaScript.

Advantages

• Makes it impossible to accidentally create global variables.
• Makes assignments which would otherwise silently fail to throw an exception.
• Makes attempts to delete undeletable properties throw an exception (where before the attempt would simply have no effect).
• Requires that function parameter names be unique.
• A plain function call receives this === undefined instead of coercing it to the global object.
• It catches some common coding bloopers, throwing exceptions.
• It disables features that are confusing or poorly thought out.

Disadvantages

• Some legacy syntax and reflective features such as with, arguments.callee, and access to function.caller are unavailable.
• Code that depended on silent failures or implicit globals will throw and may need migration work.
• A strict-mode directive cannot be placed in a function with non-simple parameters, such as default, rest, or destructured parameters.

ES modules and class bodies are already strict. Use the directive for legacy scripts or functions that are otherwise in sloppy mode; do not add a redundant directive merely to code that is already an ES module.

What is "use strict" in JavaScript?

"use strict" is a directive introduced in ECMAScript 5 (ES5) that signals to the JavaScript engine that the code it surrounds should be executed in "strict mode". Strict mode imposes stricter parsing and error handling rules, making your code more secure and less error-prone.

Strict mode throws for assignments to undeclared variables and changes several otherwise silent failures into errors.

How to use strict mode

1. Global Scope: To enable strict mode globally, add the directive at the beginning of the JavaScript file:

   'use strict';
   // any code in this file will be run in strict mode
   function add(a, b) {
     return a + b;
   }

   Run

2. Local Scope: To enable strict mode within a function, add the directive at the beginning of the function:

   function myFunction() {
     'use strict';
     // this will tell JavaScript engine to use strict mode only for the `myFunction`
     // Anything that is outside of the scope of this function will be treated as non-strict mode unless specified to use strict mode
   }

   Run

Key features of strict mode

1. Error prevention: Strict mode prevents common errors such as:
   • Using undeclared variables.
   • Assigning values to non-writable properties.
   • Deleting undeletable properties.
   • Duplicating parameter names in functions.
2. Improved security: Strict mode helps in writing more secure code by:
   • Preventing the use of deprecated features like arguments.caller and arguments.callee.
   • Restricting the use of eval() to prevent variable declarations in the calling scope.
3. Compatibility: Strict mode ensures compatibility with future versions of JavaScript by preventing the use of reserved keywords as identifiers.

Examples

1. Preventing accidental creation of global variables:

   // Without strict mode
   
   function defineNumber() {
     count = 123;
   }
   defineNumber();
   console.log(count); // logs: 123

   Run
   'use strict'; // With strict mode
   
   function strictFunc() {
     'use strict';
     strictVar = 123; // ReferenceError: strictVar is not defined
   }
   strictFunc();
   console.log(strictVar); // ReferenceError: strictVar is not defined

   Run

2. Making assignments which would otherwise silently fail to throw an exception:

   // Without strict mode
   NaN = 'foo'; // This fails silently
   console.log(NaN); // logs: NaN

   Run
   'use strict'; // With strict mode
   NaN = 'foo'; // Uncaught TypeError: Cannot assign to read only property 'NaN' of object '#<Window>'

   Run

3. Making attempts to delete undeletable properties throw an error in strict mode:

   // Without strict mode
   delete Object.prototype; // This fails silently

   Run
   'use strict'; // With strict mode
   delete Object.prototype; // TypeError: Cannot delete property 'prototype' of function Object() { [native code] }

   Run

Predict the output: common strict mode gotchas

Predict the output of these four strict-mode examples before running them.

1. Accidental globals

function f() {
  x = 5; // no var/let/const, assignment to undeclared variable
}
f();
console.log(x); // 5: sloppy mode silently created a global

In strict mode, that same assignment throws a ReferenceError instead of creating an implicit global.

'use strict';
function f() {
  x = 5; // ReferenceError: x is not defined
}
try {
  f();
} catch (e) {
  console.log(e.message);
}

2. this in a plain function call

function whatIsThis() {
  return this;
}
console.log(whatIsThis() === globalThis); // true in sloppy mode

In strict mode, this inside a function called as a plain function is undefined:

'use strict';
function whatIsThis() {
  return this;
}
console.log(whatIsThis()); // undefined

This is a common source of bugs in class methods that get extracted as callbacks. const fn = obj.method; fn(); calls method with this === undefined, which usually crashes immediately. In sloppy mode, the same call would silently bind this to the global object and continue with broken behavior.

3. Duplicate parameter names

'use strict';
try {
  // Using eval to force a parse error to be thrown at runtime in strict mode
  eval('function dup(a, a) {}');
} catch (e) {
  console.log(e.message); // "Duplicate parameter name not allowed in this context"
}

In sloppy mode, function f(a, a) {} is silently allowed and the second a shadows the first.

4. Octal literals

console.log(010); // 8 in sloppy mode (leading 0 means octal)

In strict mode (and in ES modules), the legacy 0-prefix octal literal is rejected at parse time. Use the explicit 0o prefix instead:

'use strict';
console.log(0o10); // 8

Is 'use strict' still necessary?

In most modern code, no. Strict mode is now the default in several places:

• ES modules are automatically strict. Anything imported with import/export, served as <script type="module">, or compiled by Vite, webpack, or Rollup runs in strict mode without the directive.
• Class bodies (and methods inside them) are strict, even when the surrounding code is not.
• Build output may be strict when a tool preserves or emits ES modules or inserts a directive, but this depends on the configured module format. A JavaScript target such as ES2015 does not by itself guarantee strict mode.

The directive still matters in a few places:

• Legacy plain <script> tags without type="module". The directive is the only way to opt in.
• IIFEs and old library bundles that ship as scripts, including some CDN copies of libraries.
• Node.js CommonJS files (.cjs), which are not automatically strict.
• Quick <script> snippets in HTML pages and CodePens.

If you are writing an ES module or a React/Vue component, you are already in strict mode and the directive at the top of the file is harmless but redundant. If you are writing a plain <script> tag without type="module", you should still add it.

Notes

1. Placement: The 'use strict' directive must be placed at the beginning of the file or function. Placing it anywhere else will not have any effect.
2. Compatibility: Strict mode is Baseline and supported across all modern browsers.
3. Irreversible: There is no way to cancel 'use strict' after it has been set.

Further reading

• Strict mode - MDN
• The modern mode, "use strict"

Exercises