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';

// This will throw an error in strict mode
x = 5; // ReferenceError: x is not defined

// Correct way
let x = 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.

Key mistakes that strict mode helps prevent

1. Accidental Global Variables

// Without strict mode - creates global variable
mistypedVariable = 17; // no error

// With strict mode
('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 fails

// With strict mode
('use strict');
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;
}

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

4. Octal Syntax

// Without strict mode
var num = 010; // 8 in octal

// With strict mode
('use strict');
var num = 010; // SyntaxError: Octal literals are not allowed

5. Using this in Non-Method Functions

// Without strict mode
function test() {
  console.log(this); // references global object
}

// With strict mode
('use strict');
function test() {
  console.log(this); // undefined
}

6. Deleting Variables or Functions

// Without strict mode
var x = 42;
delete x; // Silently fails

// With strict mode
('use strict');
var x = 42;
delete x; // SyntaxError: Delete of an unqualified identifier

7. Protected Keywords

// Without strict mode
var implements = 42; // Works

// With strict mode
('use strict');
var implements = 42; // SyntaxError: implements is a reserved word

8. Using with Statement

// Without strict mode
with (Math) {
  x = cos(2); // Works
}

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