JavaScript Strict Mode

Strict Mode in JavaScript is a feature that helps catch common coding mistakes and implement a stricter set of rules to improve code quality. It eliminates silent errors, prevents the use of unsafe actions, and improves performance optimization by JavaScript engines.

Use strict directive

The "use strict"; directive in JavaScript is used to enable strict mode.

Syntax

"use strict";
// Code here runs in strict mode

This directive implements stricter parsing and error handling in JavaScript, helping avoid accidental bugs and unsafe operations.

Example

"use strict";
function test() {
    x = 10;
}

test()

Output

 ReferenceError: x is not defined

• Without strict mode, JavaScript would implicitly create a global variable (x = 10).
• With strict mode, this results in an error, enforcing proper variable declaration.

Declaring Strict Mode

Strict mode is declared by placing the "use strict"; directive at the beginning of your JavaScript code or inside a specific function. This enables stricter parsing and error handling, helping to avoid common coding mistakes and improving code security

For the entire script

"use strict";// Code here runs in strict mode

For a specific function

function m() 
{  
  "use strict";    // Code here runs in strict mode
}

Why to use strict mode

• Catches Common Errors: Strict mode helps catch mistakes like using undeclared variables, which can prevent hard-to-debug issues.
• Prevents Accidental Globals: It prevents the creation of global variables by accident, making your code more predictable.
• Disallows Deleting Variables: It prevents deletion of variables or functions, which could lead to unexpected behavior.
• Improves Performance: Some JavaScript engines can optimize code better when strict mode is enabled, leading to improved performance.
• Makes Code Safer: Strict mode disables unsafe features and reduces the chances of encountering difficult-to-debug errors, leading to cleaner and more secure code.

Enabling Strict Mode in Global and Function Scope

Enabling strict mode for global environment

The code will follow certain stricter rules in the strict mode including variable declaration and operation's.

"use strict";
undeclared = 20; 
console.log(undeclared);

Output

ReferenceError: undeclared is not defined

• Without strict mode: The code would silently create a global variable undeclared even though it wasn't declared using let, const, or var.
• With strict mode: It throws an error because undeclared is not declared before assignment, preventing the accidental creation of global variables.

Enabling strict mode inside functions

The code will follow certain stricter rules but only inside the function in which 'use strict' is written no where else in the global space.

function m() {
    "use strict"; 
    
    let x = 10;
    undeclared = 20; 
    console.log(x);
}

m();

Output

ReferenceError: undeclared is not defined

• without strict mode: Strict mode is enabled for just the m() function by placing "use strict"; at the beginning of the function.
• with strict mode: If you try to use an undeclared variable (undeclared), it will throw an error in strict mode, ensuring better code quality.

Use Cases for Strict Mode

1. Eliminating Silent Errors

Strict mode throws an error when you attempt to use undeclared variables. Without strict mode, this would silently create a global variable, which can lead to bugs.

"use strict";
x = 10;

ReferenceError: x is not defined

• In strict mode, assigning a value to an undeclared variable (like x = 10;) results in a ReferenceError.
• Strict mode requires variables to be declared first, preventing accidental global variables and improving code reliability.

2. Disallowing with Statement

The with statement is disallowed in strict mode due to its unpredictable behavior.

"use strict";
with (Math) {
    let x = cos(2);
}

Output

SyntaxError: Strict mode code may not include a with statement

• In strict mode, using the with statement results in a SyntaxError, as it can lead to confusing or unpredictable code behavior.
• Strict mode disallows with to improve code clarity and avoid potential issues with variable scope resolution.

3. Securing this in Functions

In strict mode, 'this' inside a function is undefined, ensuring that you don’t accidentally modify the global object when calling functions without a context.

"use strict";
function test() {
    console.log(this);
}
test();

undefined

• In strict mode, the value of this inside a function called globally (like test()) is undefined, instead of referring to the global object.
• Strict mode changes the behavior of this, preventing it from defaulting to the global object, which helps avoid unintended side effects in your code.

4. Preventing Writing to Read-Only Properties

Strict mode prevents modification of read-only properties, ensuring that objects maintain their intended immutability.

"use strict";
const obj = Object.freeze({ prop: 42 });
obj.prop = 50;  

Output

TypeError: Cannot assign to read only property 'prop' of object

• In strict mode, attempting to modify a property of a frozen object (like obj.prop = 50) results in a TypeError because Object.freeze() makes the object immutable.
• Strict mode ensures that attempts to change properties of a frozen object are caught, helping prevent accidental modifications and maintaining the integrity of the data.

5. Preventing eval from Creating Variables

In strict mode, eval does not create variables in the surrounding scope, which prevents unexpected side effects and improves code security.

"use strict";
eval("var x = 10;");
console.log(x);  

Output

ReferenceError: x is not defined

• In strict mode, variables declared inside eval() are not added to the surrounding scope, preventing accidental global variable creation.
• As a result, x is not accessible outside of eval(), leading to a ReferenceError when you try to log it.

6. Disallowing delete on Non-Configurable Properties

Strict mode throws an error if you attempt to delete non-configurable properties, ensuring that properties cannot be accidentally removed.

"use strict";
const obj = {};
Object.defineProperty(obj, "prop", { value: 10, configurable: false});
delete obj.prop;  
console.log(obj)

Output

TypeError: Cannot delete property 'prop'

• In strict mode, attempting to delete a non-configurable property (like obj.prop) results in a TypeError.
• The configurable: false setting prevents the deletion of prop, ensuring that the property remains intact in the object.

When to use strict mode

• Strict mode helps identify errors, such as using undeclared variables, making the code more reliable.
• It disables features like with and ensures safer coding practices.
• Strict mode ensures variables are properly declared, preventing them from becoming global unintentionally.
• JavaScript engines can optimize code better when strict mode is used, improving execution speed.
• It encourages cleaner, more predictable code by disallowing certain bad practices, like deleting variables or using duplicate object properties.

Conclusion

Strict mode in JavaScript is a simple but powerful feature that promotes cleaner, safer, and more reliable code. By enforcing stricter rules and eliminating potential issues, it helps developers avoid common mistakes, improve code performance, and ensure better maintainability. It's a best practice to use "use strict"; in all JavaScript code to reap these benefits.