Conceptual

What is 'use strict' in JavaScript?

use strict

'use strict' is a directive in JavaScript that enables strict mode, a way to opt into a restricted variant of JavaScript that helps catch common coding mistakes and prevents the use of certain error prone features.

'use strict';
total = 5; // ReferenceError: total is not defined

The fix is to declare the variable first: let total = 5;.

Here's how it works in different contexts:

1. In regular JavaScript files

'use strict';
// Your code here

2. In modules (including React):

All ES6 modules automatically operate in strict mode. If you're writing modern React apps using:

  • import/export statements
  • Create React App
  • Next.js
  • Other modern React frameworks

You don't need to explicitly add 'use strict' because:

// This file is already in strict mode
import React from 'react';
import { useState } from 'react';
function MyComponent() {
  // Code here is automatically in strict mode
}

3. In specific functions

function myFunction() {
  'use strict';
  // This function runs in strict mode
}

In React components

In modern React development, you typically don't need to think about 'use strict' at all since the build tools and module system handle it automatically. Just write your React components normally and they'll be running in strict mode by default.

Note

Don't confuse this with React's StrictMode component (<React.StrictMode>), which is a different feature that helps identify potential problems in your React application during development.

Key mistakes that strict mode helps prevent

1. Accidental Global Variables

// Without strict mode: creates a global variable
mistypedVariable = 17; // no error
'use strict';
mistypedVariable = 17;
// ReferenceError: mistypedVariable is not defined

2. Silent Failures

// Without strict mode
const obj = { name: 'test' };
Object.defineProperty(obj, 'age', { writable: false });
obj.age = 25; // silently ignored
'use strict';
const obj = { name: 'test' };
Object.defineProperty(obj, 'age', { writable: false });
obj.age = 25;
// TypeError: Cannot assign to read only property 'age'

3. Duplicate parameter names

// Without strict mode: allowed
function sum(a, a, c) {
  return a + c;
}
function sum(a, a, c) {
  'use strict';
  return a + c;
}
// SyntaxError: Duplicate parameter name not allowed

4. Legacy octal literals

// Without strict mode
var num = 010; // 8 in octal
'use strict';
var num = 010;
// SyntaxError: Octal literals are not allowed in strict mode.

5. this in plain function calls

function sloppyTest() {
  console.log(this);
}
sloppyTest(); // the global object (window)
function strictTest() {
  'use strict';
  console.log(this);
}
strictTest(); // undefined

6. Deleting variables

// Without strict mode
var x = 42;
delete x; // false, x is not deleted
'use strict';
var x = 42;
delete x;
// SyntaxError: Delete of an unqualified identifier
// in strict mode.

7. Reserved words

// Without strict mode
var implements = 42; // works
'use strict';
var implements = 42;
// SyntaxError: Unexpected strict mode reserved word

8. The with statement

// Without strict mode
with (Math) {
  x = cos(2); // works
}
'use strict';
with (Math) {
  x = cos(2);
}
// SyntaxError: Strict mode code may not include
// a with statement