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.
1'use strict';23// This will throw an error in strict mode4x = 5; // ReferenceError: x is not defined56// Correct way7let x = 5;
Here's how it works in different contexts:
1. In regular JavaScript files
1'use strict';23// 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:
1// This file is already in strict mode2import React from 'react';3import { useState } from 'react';45function MyComponent() {6 // Code here is automatically in strict mode7}
3. In specific functions
1function myFunction() {2 'use strict';3 // This function runs in strict mode4}
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
1// Without strict mode - creates global variable2mistypedVariable = 17; // no error34// With strict mode5('use strict');6mistypedVariable = 17; // ReferenceError: mistypedVariable is not defined
2. Silent Failures
1// Without strict mode2const obj = { name: 'test' };3Object.defineProperty(obj, 'age', { writable: false });4obj.age = 25; // Silently fails56// With strict mode7('use strict');8obj.age = 25; // TypeError: Cannot assign to read only property 'age'
3. Duplicate Parameter Names
1// Without strict mode - allowed2function sum(a, a, c) {3 return a + c;4}56// With strict mode - error7('use strict');8function sum(a, a, c) {9 // SyntaxError: Duplicate parameter name not allowed10 return a + c;11}
4. Octal Syntax
1// Without strict mode2var num = 010; // 8 in octal34// With strict mode5('use strict');6var num = 010; // SyntaxError: Octal literals are not allowed
5. Using this in Non-Method Functions
1// Without strict mode2function test() {3 console.log(this); // references global object4}56// With strict mode7('use strict');8function test() {9 console.log(this); // undefined10}
6. Deleting Variables or Functions
1// Without strict mode2var x = 42;3delete x; // Silently fails45// With strict mode6('use strict');7var x = 42;8delete x; // SyntaxError: Delete of an unqualified identifier
7. Protected Keywords
1// Without strict mode2var implements = 42; // Works34// With strict mode5('use strict');6var implements = 42; // SyntaxError: implements is a reserved word
8. Using with Statement
1// Without strict mode2with (Math) {3 x = cos(2); // Works4}56// With strict mode7('use strict');8with (Math) {9 // SyntaxError: Strict mode code may not include a with statement10 x = cos(2);11}