Use Strict in JavaScript: Complete Guide

The ‘use strict’ directive in JavaScript enables strict mode, which introduces better error checking, eliminates silent errors, and improves security by restricting certain language features. It prevents the use of potentially problematic JavaScript features and makes debugging easier by converting silent errors into throw exceptions. Despite ES6 modules automatically enabling strict mode, ‘use strict’ remains relevant for non-module code and as an explicit declaration of intent for maintaining clean, error-resistant JavaScript applications.

Contents

• What is the ‘use strict’ Directive?
• How to Implement Strict Mode
• Key Features and Implications
• Error Handling Differences
• Performance Considerations
• Relevance in Modern JavaScript Development

What is the ‘use strict’ Directive

The ‘use strict’ directive is a literal expression that enables JavaScript’s strict mode. Introduced in ECMAScript 5 (ES5), it was designed to address issues with the language’s flexibility that could lead to programming errors or security vulnerabilities. When strict mode is enabled, the JavaScript engine enforces stricter parsing and error handling rules than in normal (non-strict) mode.

This directive is not a statement but a literal expression that must appear at the very beginning of a script or function body. When placed at the top of a script, it affects the entire script. When placed inside a function, it only affects that function and its nested functions.

Important: The ‘use strict’ directive must be the first statement in a script or function. Any preceding comments or whitespace are allowed, but no other executable statements are permitted before it.

Historically, JavaScript was designed with a permissive approach to minimize errors in early web development. While this approach made JavaScript easier to write for beginners, it also allowed numerous silent failures and potentially dangerous practices. Strict mode was introduced to counterbalance this by providing a “safer” subset of JavaScript with stricter error handling.

How to Implement Strict Mode

Implementing strict mode in JavaScript is straightforward. You simply add the ‘use strict’ directive as the first statement in your script or function:

Script-Level Strict Mode

'use strict';

// All code in this script will run in strict mode
let x = 10;
console.log(x); // 10

Function-Level Strict Mode

function strictFunction() {
  'use strict';
  
  // This function and any nested functions run in strict mode
  let y = 20;
  console.log(y); // 20
}

function nonStrictFunction() {
  // This function runs in non-strict mode
  let z = 30;
  console.log(z); // 30
}

Class-Level Strict Mode

In ES6, class definitions automatically run in strict mode, even without explicitly declaring ‘use strict’:

class MyClass {
  constructor() {
    // This code automatically runs in strict mode
    this.value = 42;
  }
}

ES Modules

ES modules (files with .mjs extension or with type=“module” in script tags) automatically run in strict mode:

<script type="module">
// This code automatically runs in strict mode
import { something } from './module.js';
</script>

Note: When using ‘use strict’ in conjunction with other language features or tools, ensure compatibility. Some transpilers like Babel automatically enable strict mode when certain syntax targets are selected.

Key Features and Implications

Strict mode introduces several significant changes to JavaScript’s behavior that help developers write more robust and maintainable code:

Variable Declaration

In strict mode, all variables must be declared before use. Undeclared variables will throw a ReferenceError instead of being created as global properties:

'use strict';

// This throws a ReferenceError in strict mode
undeclaredVar = 10; // Error: undeclaredVar is not defined

In non-strict mode, this would create a global variable undeclaredVar.

‘this’ Binding

Strict mode changes how this behaves in functions:

1. In global functions, this is undefined instead of the global object:

'use strict';

function test() {
  console.log(this); // undefined
}

test();

2. In constructor functions calling without new, this is not coerced to the global object:

'use strict';

function Constructor() {
  console.log(this); // undefined
}

Constructor(); // Throws TypeError: Cannot read properties of undefined (reading 'constructor')

Function Parameters

Strict mode prohibits duplicate parameter names in function declarations:

'use strict';

function duplicateParams(a, a) { // SyntaxError: Duplicate parameter name not allowed in this context
  // ...
}

Write Operations on Properties

Strict mode prevents writing to read-only properties and prevents adding properties to non-extensible objects:

'use strict';

'use strict';

// Writing to a read-only property
'use strict';
var obj1 = {};
Object.defineProperty(obj1, 'prop', { value: 10, writable: false });
obj1.prop = 20; // TypeError: Cannot assign to read only property 'prop' of object

// Adding property to non-extensible object
var obj2 = { a: 1 };
Object.preventExtensions(obj2);
obj2.b = 2; // TypeError: Cannot add property b, object is not extensible

‘with’ Statement

Strict mode completely disables the with statement, which can lead to ambiguous code and performance issues:

'use strict';

with (Math) { // SyntaxError: Strict mode code may not include a with statement
  let x = random();
}

Octal Literals

Strict mode prohibits octal literals (except for the literal 0):

'use strict';

let octal = 0755; // SyntaxError: Octal literals are not allowed in strict mode.

Arguments Object

Strict mode changes the behavior of the arguments object. It no longer tracks changes to parameter values:

'use strict';

function test(a) {
  a = 20;
  console.log(arguments[0]); // 1, not 20
}

test(1);

Error Handling Differences

One of the most significant improvements of strict mode is its enhanced error handling. In strict mode, many silent errors that would be ignored in non-strict mode are converted to explicit exceptions:

Silent Errors Become Exceptions

• Assigning to a non-writable property throws TypeError instead of silently failing
• Assigning to a getter-only property throws TypeError
• Adding property to a non-extensible object throws TypeError
• Duplicate parameter names throw SyntaxError
• Using eval or arguments as variable or function parameter names throws SyntaxError

Better Error Messages

Strict mode often provides more descriptive error messages, making debugging easier:

'use strict';

// Non-strict mode might give confusing or unclear errors
// Strict mode provides clearer, more specific error information

Elimination of ‘this’ Coercion

As mentioned earlier, strict mode prevents the automatic coercion of this to the global object in function calls, which can help prevent accidental modifications of the global object:

'use strict';

function() {
  this.globalVar = "oops"; // TypeError: Cannot set property 'globalVar' of undefined
}

Performance Considerations

Strict mode was designed not only for safety but also for performance. While the performance improvements are typically minor, they can be significant in certain scenarios:

Optimizations

JavaScript engines can make certain optimizations when they know code is running in strict mode:

1. Some variable references can be resolved faster
2. Certain this bindings are simplified
3. The arguments object behavior is more predictable

Memory Usage

Strict mode can sometimes result in reduced memory usage:

• The arguments object doesn’t need to track parameter changes
• Some engine optimizations reduce memory overhead

Important: While strict mode may offer performance benefits, its primary value is in code quality and error prevention. Performance should not be the main reason for choosing strict mode.

Relevance in Modern JavaScript Development

Even with modern JavaScript standards and browsers, ‘use strict’ remains highly relevant for several reasons:

Automatic Strict Mode in Modern Contexts

Several modern JavaScript features automatically enable strict mode:

1. ES Modules: All ES modules run in strict mode by default
2. Classes: Class definitions and methods automatically use strict mode
3. Arrow Functions: Arrow functions inherit strict mode from their surrounding scope

Benefits for Code Quality

Strict mode enforces better coding practices that are essential for large-scale applications:

• Prevents accidental global variable creation
• Eliminates silent failures that can be hard to debug
• Makes code more predictable and easier to maintain

Compatibility with Modern Tooling

Modern development tools and frameworks often assume or enforce strict mode:

• TypeScript transpilation uses strict mode
• Many ESLint rules enforce strict mode practices
• Bundlers like Webpack often enable strict mode by default

Future-Proofing Code

As JavaScript continues to evolve, strict mode provides a foundation for safer code:

• New language features are designed with strict mode in mind
• The ECMAScript specification continues to refine strict mode behavior
• Browser engines are optimized for strict mode code

When to Use Strict Mode

Despite automatic activation in some contexts, there are still situations where explicit ‘use strict’ is beneficial:

1. Legacy Codebases: When working with older code that doesn’t use modules or classes
2. Non-Module Scripts: For scripts that aren’t modules but should follow strict practices
3. Library Development: To ensure libraries behave predictably regardless of how they’re used
4. Learning: For learners who want to understand modern JavaScript best practices

When Strict Mode Might Not Be Necessary

In some cases, strict mode is already enforced or not needed:

1. ES Modules: Already in strict mode
2. Class Definitions: Already in strict mode
3. Quick Prototypes: For very temporary, small scripts where you want maximum flexibility

Conclusion

The ‘use strict’ directive remains a vital part of modern JavaScript development despite automatic activation in several contexts. Its primary benefits include:

1. Better Error Handling: Converts silent failures into explicit exceptions
2. Security Improvements: Prevents accidental global variable creation
3. Code Quality: Enforces better coding practices and eliminates problematic language features
4. Optimization Opportunities: Enables certain performance optimizations in JavaScript engines

For modern JavaScript development:

• Use ‘use strict’ explicitly in non-module scripts and legacy code
• Understand that ES modules, classes, and arrow functions automatically use strict mode
• Consider strict mode as part of your coding standards and linting rules
• Leverage strict mode to catch potential issues early in development

While JavaScript continues to evolve, strict mode provides a foundation for writing safer, more maintainable code that will work reliably across different environments and browsers.