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
-
Function Scope: Place
"use strict";
at the beginning of a function.
function myFunction() {
"use strict";
// Your code here
}
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
In Functions
- Use Case: When integrating strict mode into existing code, applying it incrementally.
function example() {
"use strict";
// Function code here
}
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
}
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
- Solution: In strict mode, this throws an error.
"use strict";
x = 10; // ReferenceError: x is not defined
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();
-
Solution: In strict mode,
this
isundefined
when not set.
"use strict";
function f() {
console.log(this); // undefined
}
f();
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
- 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
};
Disallows Octal Syntax
-
Problem: Octal literals (e.g.,
012
) can cause confusion.
var num = 010; // 8 in non-strict mode
- Solution: Strict mode disallows octal syntax.
"use strict";
var num = 010; // SyntaxError: Octal literals are not allowed in strict mode
Requires Variable Declarations
- Problem: Using undeclared variables can lead to unpredictable behavior.
foo = "bar"; // Creates a global variable foo
- Solution: Strict mode enforces variable declaration.
"use strict";
foo = "bar"; // ReferenceError: foo is not defined
Secure JavaScript Code
-
Disallows
with
Statement: Thewith
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
}
- 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
Simplifies eval()
-
Problem:
eval()
can create variables in the surrounding scope in non-strict mode.
eval("var x = 2;");
console.log(x); // 2
-
Solution: Strict mode confines
eval()
variables to the local scope.
"use strict";
eval("var x = 2;");
console.log(x); // ReferenceError: x is not defined
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)