Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What are the characteristics of JavaScript 'Strict Mode'?
JavaScript strict mode enables stricter parsing and error handling in your JavaScript code. By default, JavaScript runs in "sloppy mode" which allows certain questionable practices. Strict mode helps you write more secure and optimized code by catching common coding mistakes.
Syntax
Strict mode can be enabled in different scopes using the "use strict" directive:
Global Strict Mode
"use strict"; // All code in this script runs in strict mode
Function Strict Mode
function myFunction() {
"use strict";
// Only this function runs in strict mode
}
Module and Class Strict Mode
JavaScript modules and ES6 classes automatically run in strict mode without needing the directive.
Key Characteristics of Strict Mode
1. Prevents Undeclared Variables
In sloppy mode, assigning to undeclared variables creates global variables. Strict mode throws an error:
<!DOCTYPE html>
<html>
<head>
<title>Strict Mode Example</title>
</head>
<body>
<div id="output"></div>
<script>
"use strict";
let output = document.getElementById("output");
try {
// This will throw an error in strict mode
undeclaredVariable = 5;
output.innerHTML = "Value: " + undeclaredVariable;
} catch (error) {
output.innerHTML = "Error: " + error.message;
output.style.color = "red";
}
</script>
</body>
</html>
2. Prevents Deleting Variables
Strict mode prohibits deleting variables, functions, or function parameters:
<!DOCTYPE html>
<html>
<head>
<title>Delete Variables Example</title>
</head>
<body>
<div id="output"></div>
<script>
"use strict";
let output = document.getElementById("output");
try {
let myVar = 10;
delete myVar; // This throws an error
} catch (error) {
output.innerHTML = "Error: " + error.message;
output.style.color = "red";
}
</script>
</body>
</html>
3. Prevents Writing to Read-Only Properties
<!DOCTYPE html>
<html>
<head>
<title>Read-Only Properties Example</title>
</head>
<body>
<div id="output"></div>
<script>
"use strict";
let output = document.getElementById("output");
try {
const obj = {};
Object.defineProperty(obj, "readOnly", {
value: 42,
writable: false
});
output.innerHTML = "Initial value: " + obj.readOnly + "<br>";
obj.readOnly = 100; // This throws an error
} catch (error) {
output.innerHTML += "Error: " + error.message;
output.style.color = "red";
}
</script>
</body>
</html>
4. Prohibits Reserved Keywords as Variable Names
<!DOCTYPE html>
<html>
<head>
<title>Reserved Keywords Example</title>
</head>
<body>
<div id="output"></div>
<script>
"use strict";
let output = document.getElementById("output");
try {
// Using future reserved words throws syntax errors
eval("let interface = 5;"); // Will throw syntax error
} catch (error) {
output.innerHTML = "Error: " + error.message;
output.style.color = "red";
}
</script>
</body>
</html>
5. Prohibits the 'with' Statement
The with statement works in sloppy mode but is forbidden in strict mode:
<!DOCTYPE html>
<html>
<head>
<title>With Statement Example</title>
</head>
<body>
<div id="output"></div>
<script>
// Sloppy mode - 'with' works
try {
with (Math) {
var result = sqrt(16);
}
document.getElementById("output").innerHTML = "Sloppy mode result: " + result;
} catch (error) {
document.getElementById("output").innerHTML = "Error: " + error.message;
}
</script>
</body>
</html>
Benefits of Strict Mode
| Aspect | Sloppy Mode | Strict Mode |
|---|---|---|
| Undeclared variables | Creates global variables | Throws ReferenceError |
| Delete variables | Fails silently | Throws SyntaxError |
| Reserved keywords | May work unexpectedly | Throws SyntaxError |
| Performance | Slower optimization | Better optimization possible |
Conclusion
JavaScript strict mode provides a more secure coding environment by catching common mistakes and preventing unsafe actions. It helps write cleaner, more maintainable code and can improve performance through better optimization opportunities.
455 Views
