DEV Community

Cover image for Unleashing the Power πŸ’ͺ of JavaScript: Embrace "use strict" 🚫
Dharmendra Kumar
Dharmendra Kumar

Posted on

Unleashing the Power πŸ’ͺ of JavaScript: Embrace "use strict" 🚫

Introduction to "use strict"

What is "use strict"?

  • Definition: "use strict" is a directive introduced in ECMAScript 5 (ES5) to enforce a stricter parsing and error handling in your JavaScript code.
  • Purpose: It helps to catch common coding bloopers, prevents the use of unsafe actions, and makes JavaScript code more secure and robust.

How to Enable "use strict"?

  • Global Scope: Place "use strict"; at the top of your script.
  "use strict";
  // Your code here
Enter fullscreen mode Exit fullscreen mode
  • Function Scope: Place "use strict"; at the beginning of a function.
  function myFunction() {
      "use strict";
      // Your code here
  }
Enter fullscreen mode Exit fullscreen mode

Where to Use "use strict"

In Scripts

  • Use Case: When you want to ensure the entire script adheres to strict mode.
  "use strict";
  // Your script code here
Enter fullscreen mode Exit fullscreen mode

In Functions

  • Use Case: When integrating strict mode into existing code, applying it incrementally.
  function example() {
      "use strict";
      // Function code here
  }
Enter fullscreen mode Exit fullscreen mode

In Modules

  • Use Case: Modules in ES6 and beyond are in strict mode by default.
  export function example() {
      // This function is in strict mode automatically
  }
Enter fullscreen mode Exit fullscreen mode

Why Use "use strict"

Prevents Accidental Globals

  • Problem: Without strict mode, assigning a value to an undeclared variable automatically creates a global variable.
  x = 10; // Implicitly creates a global variable
Enter fullscreen mode Exit fullscreen mode
  • Solution: In strict mode, this throws an error.
  "use strict";
  x = 10; // ReferenceError: x is not defined
Enter fullscreen mode Exit fullscreen mode

Eliminates this Defaulting to Global

  • Problem: In non-strict mode, this inside functions refers to the global object (window in browsers) when not explicitly set.
  function f() {
      console.log(this); // window
  }
  f();
Enter fullscreen mode Exit fullscreen mode
  • Solution: In strict mode, this is undefined when not set.
  "use strict";
  function f() {
      console.log(this); // undefined
  }
  f();
Enter fullscreen mode Exit fullscreen mode

Prevents Duplicate Property Names

  • Problem: Non-strict mode allows duplicate property names in object literals.
  var obj = {
      p: 1,
      p: 2
  };
  console.log(obj.p); // 2
Enter fullscreen mode Exit fullscreen mode
  • Solution: In strict mode, duplicate property names throw an error.
  "use strict";
  var obj = {
      p: 1,
      p: 2 // SyntaxError: Duplicate data property in object literal not allowed
  };
Enter fullscreen mode Exit fullscreen mode

Disallows Octal Syntax

  • Problem: Octal literals (e.g., 012) can cause confusion.
  var num = 010; // 8 in non-strict mode
Enter fullscreen mode Exit fullscreen mode
  • Solution: Strict mode disallows octal syntax.
  "use strict";
  var num = 010; // SyntaxError: Octal literals are not allowed in strict mode
Enter fullscreen mode Exit fullscreen mode

Requires Variable Declarations

  • Problem: Using undeclared variables can lead to unpredictable behavior.
  foo = "bar"; // Creates a global variable foo
Enter fullscreen mode Exit fullscreen mode
  • Solution: Strict mode enforces variable declaration.
  "use strict";
  foo = "bar"; // ReferenceError: foo is not defined
Enter fullscreen mode Exit fullscreen mode

Secure JavaScript Code

  • Disallows with Statement: The with statement is forbidden in strict mode to prevent scope ambiguity.
  "use strict";
  with (obj) { // SyntaxError: Strict mode code may not include a with statement
      // code
  }
Enter fullscreen mode Exit fullscreen mode
  • Disallows Deleting Plain Names: Deleting variables or functions is not allowed.
  "use strict";
  var x = 1;
  delete x; // SyntaxError: Delete of an unqualified identifier in strict mode
Enter fullscreen mode Exit fullscreen mode

Simplifies eval()

  • Problem: eval() can create variables in the surrounding scope in non-strict mode.
  eval("var x = 2;");
  console.log(x); // 2
Enter fullscreen mode Exit fullscreen mode
  • Solution: Strict mode confines eval() variables to the local scope.
  "use strict";
  eval("var x = 2;");
  console.log(x); // ReferenceError: x is not defined
Enter fullscreen mode Exit fullscreen mode

Best Practices for Using "use strict"

Apply "use strict" Consistently

  • Tip: Use strict mode at the beginning of your scripts and functions to ensure all code runs under strict rules.

Linting Tools

  • Tip: Utilize tools like ESLint to automatically enforce strict mode and other coding standards.

Legacy Code Integration

  • Tip: When working with legacy code, apply strict mode incrementally to avoid breaking existing functionality.

Conclusion

"Use strict" is a powerful feature in JavaScript that enhances code quality and security. By enforcing stricter parsing and error handling, it helps developers write cleaner, more reliable, and maintainable code. Embrace "use strict" in your JavaScript projects to leverage these benefits and avoid common pitfalls.

Top comments (0)