Curriculum Series

What is 'use strict' in JavaScript?

What is 'use strict' in JavaScript?

What is 'use strict' in JavaScript?

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.

JAVASCRIPT
1'use strict';
2
3// This will throw an error in strict mode
4x = 5; // ReferenceError: x is not defined
5
6// Correct way
7let x = 5;

Here's how it works in different contexts:

1. In regular JavaScript files

JAVASCRIPT
1'use strict';
2
3// 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:

JAVASCRIPT
1// This file is already in strict mode
2import React from 'react';
3import { useState } from 'react';
4
5function MyComponent() {
6 // Code here is automatically in strict mode
7}

3. In specific functions

JAVASCRIPT
1function myFunction() {
2 'use strict';
3 // This function runs in strict mode
4}

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

JAVASCRIPT
1// Without strict mode - creates global variable
2mistypedVariable = 17; // no error
3
4// With strict mode
5('use strict');
6mistypedVariable = 17; // ReferenceError: mistypedVariable is not defined

2. Silent Failures

JAVASCRIPT
1// Without strict mode
2const obj = { name: 'test' };
3Object.defineProperty(obj, 'age', { writable: false });
4obj.age = 25; // Silently fails
5
6// With strict mode
7('use strict');
8obj.age = 25; // TypeError: Cannot assign to read only property 'age'

3. Duplicate Parameter Names

JAVASCRIPT
1// Without strict mode - allowed
2function sum(a, a, c) {
3 return a + c;
4}
5
6// With strict mode - error
7('use strict');
8function sum(a, a, c) {
9 // SyntaxError: Duplicate parameter name not allowed
10 return a + c;
11}

4. Octal Syntax

JAVASCRIPT
1// Without strict mode
2var num = 010; // 8 in octal
3
4// With strict mode
5('use strict');
6var num = 010; // SyntaxError: Octal literals are not allowed

5. Using this in Non-Method Functions

JAVASCRIPT
1// Without strict mode
2function test() {
3 console.log(this); // references global object
4}
5
6// With strict mode
7('use strict');
8function test() {
9 console.log(this); // undefined
10}

6. Deleting Variables or Functions

JAVASCRIPT
1// Without strict mode
2var x = 42;
3delete x; // Silently fails
4
5// With strict mode
6('use strict');
7var x = 42;
8delete x; // SyntaxError: Delete of an unqualified identifier

7. Protected Keywords

JAVASCRIPT
1// Without strict mode
2var implements = 42; // Works
3
4// With strict mode
5('use strict');
6var implements = 42; // SyntaxError: implements is a reserved word

8. Using with Statement

JAVASCRIPT
1// Without strict mode
2with (Math) {
3 x = cos(2); // Works
4}
5
6// With strict mode
7('use strict');
8with (Math) {
9 // SyntaxError: Strict mode code may not include a with statement
10 x = cos(2);
11}

Finished reading?

Mark this topic as solved to track your progress.