JavaScript "use strict"

In the world of programming, precision and predictability are paramount. JavaScript, while powerful, can sometimes be lenient in how it handles certain coding practices. This can lead to subtle bugs that might be hard to track down. To address this, ECMAScript 5 introduced strict mode, a way to opt into a restricted variant of JavaScript that eliminates some silent errors and changes the behavior of others.

Introduction

Strict mode is a powerful tool for writing more robust and error-free JavaScript code. By enabling strict mode, you can catch common programming mistakes early on, such as using undeclared variables or modifying read-only properties. This not only improves the reliability of your code but also makes it easier to maintain and debug.

In this tutorial, we'll explore how to enable and use strict mode in JavaScript, focusing on its impact on error handling. We'll cover the benefits of strict mode, how to apply it, and common pitfalls to avoid.

Enabling Strict Mode

Strict mode can be enabled at two levels: globally for an entire script or locally within a function. Let's start by enabling it globally.

Global Strict Mode

To enable global strict mode, you need to add the 'use strict'; directive at the very beginning of your JavaScript file.

1'use strict';
2 
3let x = 10;
4console.log(x); // Outputs: 10

10

Local Strict Mode

You can also enable strict mode locally within a function. This means that only the code inside the function will be affected by strict mode.

1function myFunction() {
2'use strict';
3 
4let y = 20;
5console.log(y); // Outputs: 20
6}
7 
8myFunction();

20

Error Handling in Strict Mode

Strict mode enforces stricter rules and throws errors for certain actions that would otherwise be silently ignored. Let's explore some of these changes.

Undeclared Variables

In non-strict mode, assigning a value to an undeclared variable automatically creates a global variable. This can lead to unexpected behavior and bugs.

1x = 30;
2console.log(x); // Outputs: 30

30

However, in strict mode, this will result in a ReferenceError.

1'use strict';
2 
3x = 30; // Throws ReferenceError: x is not defined
4console.log(x);

$ node script.js
ReferenceError: x is not defined
  at Object.<anonymous> (/path/to/script.js:4:1)
  at Module._compile (internal/modules/cjs/loader.js:956:30)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
  at Module.load (internal/modules/cjs/loader.js:812:32)
  at Function.Module._load (internal/modules/cjs/loader.js:724:14)
  at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:66:12)
  at internal/main/run_main_module.js:17:47

Deleting Variables and Functions

In non-strict mode, you can delete variables and functions using the delete operator. However, this is generally discouraged as it can lead to unexpected behavior.

1let a = 40;
2delete a; // Silently fails
3console.log(a); // Outputs: 40

40

In strict mode, attempting to delete variables and functions will result in a SyntaxError.

1'use strict';
2 
3let b = 50;
4delete b; // Throws SyntaxError: Delete of an unqualified identifier in strict mode.
5console.log(b);

$ node script.js
SyntaxError: Delete of an unqualified identifier in strict mode.
  at Object.compileFunction (vm.js:342:10)
  at wrapSafe (internal/modules/cjs/loader.js:979:15)
  at Module._compile (internal/modules/cjs/loader.js:936:27)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
  at Module.load (internal/modules/cjs/loader.js:812:32)
  at Function.Module._load (internal/modules/cjs/loader.js:724:14)
  at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:66:12)
  at internal/main/run_main_module.js:17:47

Assigning to Non-Writable Properties

In non-strict mode, assigning a value to a read-only property does not throw an error.

1const obj = {};
2Object.defineProperty(obj, 'prop', {
3writable: false,
4value: 60
5});
6 
7obj.prop = 70; // Silently fails
8console.log(obj.prop); // Outputs: 60

60

In strict mode, this will result in a TypeError.

1'use strict';
2 
3const obj = {};
4Object.defineProperty(obj, 'prop', {
5writable: false,
6value: 60
7});
8 
9obj.prop = 70; // Throws TypeError: Cannot assign to read only property 'prop' of object '#<Object>'
10console.log(obj.prop);

$ node script.js
TypeError: Cannot assign to read only property 'prop' of object '#<Object>'
  at Object.<anonymous> (/path/to/script.js:8:9)
  at Module._compile (internal/modules/cjs/loader.js:956:30)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
  at Module.load (internal/modules/cjs/loader.js:812:32)
  at Function.Module._load (internal/modules/cjs/loader.js:724:14)
  at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:66:12)
  at internal/main/run_main_module.js:17:47

Practical Example

Let's put strict mode to use in a practical example. We'll create a simple calculator that performs basic arithmetic operations and uses strict mode to handle potential errors.

1'use strict';
2 
3function add(a, b) {
4return a + b;
5}
6 
7function subtract(a, b) {
8return a - b;
9}
10 
11function multiply(a, b) {
12return a * b;
13}
14 
15function divide(a, b) {
16if (b === 0) {
17  throw new Error('Division by zero is not allowed.');
18}
19return a / b;
20}
21 
22try {
23console.log(add(5, 3)); // Outputs: 8
24console.log(subtract(10, 4)); // Outputs: 6
25console.log(multiply(7, 2)); // Outputs: 14
26console.log(divide(9, 3)); // Outputs: 3
27console.log(divide(8, 0)); // Throws Error: Division by zero is not allowed.
28} catch (error) {
29console.error(error.message);
30}

$ node calculator.js
8
6
14
3
Error: Division by zero is not allowed.
  at divide (/path/to/calculator.js:15:9)
  at Object.<anonymous> (/path/to/calculator.js:27:5)
  at Module._compile (internal/modules/cjs/loader.js:956:30)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
  at Module.load (internal/modules/cjs/loader.js:812:32)
  at Function.Module._load (internal/modules/cjs/loader.js:724:14)
  at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:66:12)
  at internal/main/run_main_module.js:17:47

Summary

• Global vs. Local Strict Mode: You can enable strict mode globally for an entire script or locally within a function.
• Error Handling: Strict mode enforces stricter rules and throws errors for common mistakes, such as using undeclared variables or deleting non-configurable properties.
• Benefits: Improved reliability, easier debugging, and better code quality.

What's Next?

Now that you understand how to use strict mode in JavaScript, the next step is learning how to effectively debug your code. Debugging is a crucial skill for identifying and fixing issues in your programs. In the upcoming tutorial on "Debugging JavaScript," we'll explore various debugging techniques and tools that will help you become more proficient at finding and resolving errors in your JavaScript applications.

Stay tuned, and happy coding!