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
How to secure my JavaScript using "Strict mode"?
In this tutorial, we are going to learn how to secure my JavaScript using "Strict mode". There are some errors in the code which are just ignored by the JavaScript engine and if any line fails it performs nothing. To indicate that there is an error we can use strict mode which will make the JavaScript engine throw an error.
The 'use strict' is a literal expression which is a directive we can add to the code. We can add this 'use strict' directive to the whole script, a function, or a class.
Syntax
Now let's see the syntax to secure JavaScript using "strict mode" for the whole script:
"use strict"; // Your JavaScript code here
For a particular function:
function name_of_function() {
"use strict";
// function code
}
What Strict Mode Prevents
Strict mode catches common coding mistakes and throws errors for:
- Using undeclared variables
- Deleting variables, functions, or arguments
- Duplicate parameter names
- Writing to read-only properties
Example 1: Global Strict Mode
In this example, we use strict mode for the entire script and demonstrate how it catches undeclared variables:
<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function showStrictMode() {
try {
undeclaredVar = 5; // This will throw an error in strict mode
document.getElementById("result").innerHTML = "Variable assigned: " + undeclaredVar;
} catch (error) {
document.getElementById("result").innerHTML = "Error: " + error.message;
}
}
function normalFunction() {
document.getElementById("result").innerHTML = "This function works normally in strict mode";
}
</script>
</head>
<body>
<h3>Global Strict Mode Example</h3>
<p>
<button onclick="showStrictMode()">Try Undeclared Variable</button>
<button onclick="normalFunction()">Normal Function</button>
</p>
<p id="result"></p>
</body>
</html>
Example 2: Function-Level Strict Mode
Here we apply strict mode only to specific functions, showing how it works at the function level:
<!DOCTYPE html>
<html>
<head>
<script>
function strictFunction() {
"use strict";
try {
x = 10; // Error in strict mode
document.getElementById("result").innerHTML = "Strict function executed: " + x;
} catch (error) {
document.getElementById("result").innerHTML = "Strict Error: " + error.message;
}
}
function normalFunction() {
y = 20; // No error - not in strict mode
document.getElementById("result").innerHTML = "Normal function executed: " + y;
}
</script>
</head>
<body>
<h3>Function-Level Strict Mode Example</h3>
<p>
<button onclick="strictFunction()">Strict Function</button>
<button onclick="normalFunction()">Normal Function</button>
</p>
<p id="result"></p>
</body>
</html>
Important Restrictions
Strict mode is not allowed in functions with default parameters:
function add(first = 1, second = 2) {
"use strict"; // SyntaxError: Illegal 'use strict' directive
return first + second;
}
Benefits of Strict Mode
| Feature | Normal Mode | Strict Mode |
|---|---|---|
| Undeclared variables | Creates global variable | Throws ReferenceError |
| Duplicate parameters | Allowed | SyntaxError |
| Delete variables | Fails silently | Throws TypeError |
Conclusion
Strict mode helps catch common JavaScript errors early and makes debugging easier. Use it globally for new projects or function-by-function when updating legacy code.
274 Views
