JavaScript Strict Mode: Understanding its Benefits and Usage
JavaScript Strict Mode
Introduction:
In this comprehensive guide, we delve into the world of JavaScript strict mode, exploring its significance, benefits, and impact on coding practices. Whether you’re a beginner or an experienced developer, understanding strict mode is crucial for writing secure,error-free, and optimized JavaScript code.
what is JavaScript Use Strict ?
In JavaScript, “use strict”; is a pragma that was introduced in ECMAScript 5 (ES5) to
enable a stricter parsing and error handling mode in the JavaScript engine. When you
include this directive at the beginning of a script or a function, it indicates that the
code should be executed in “strict mode.”
Strict mode helps developers write more reliable and maintainable code by catching common
mistakes and preventing the use of certain error-prone features.
Declaring Strict Mode
How to declare Sric Mode ?
Strict mode is declared in JavaScript by adding the following statement at the beginning
of a script, a function, or an individual code block:
"use strict";
Here’s how you can use it in different contexts:
Entire Script:
"use strict"; // Your JavaScript code goes here // This code and all functions within it will be in strict mode
Function-Level Strict Mode:
function myFunction() {
"use strict";
// Function code in strict mode
}
Individual Code Block (IIFE – Immediately Invoked Function Expression):
(function() {
"use strict";
// Code in this block is in strict mode
})();Strict mode provides several benefits, such as catching common coding errors and preventing the usage of certain problematic features. It helps developers write more reliable and maintainable code.
Here’s a quick example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strict Mode Example</title>
</head>
<body>
<script>
"use strict";
// This function will throw an error due to the undeclared variable 'x'
function strictModeExample() {
x = 10; // Error: Uncaught ReferenceError: x is not defined
console.log(x); // This line won't be executed
}
strictModeExample();
</script>
</body>
</html>- In this example, without strict mode, the variable x would have been implicitly declared
as a global variable. - However, in strict mode, attempting to assign a value to an undeclared variable results in an error.
- This can help catch common programming mistakes and make code more robust.
Some key aspects of strict mode include:
Variables Must Be Declared:
In strict mode, all variables must be declared with var, let,or const before they are used.
This helps catch cases where variables are used without being declared.
// Without strict mode x = 10; // No error, creates a global variable // With strict mode "use strict"; y = 20; // Error: y is not defined
No Octal Literal:
Octal literals (e.g., 0123) are not allowed in strict mode.
// Without strict mode var num = 0123; // Octal literal // With strict mode "use strict"; var num = 0123; // Error:
Octal literals are not allowed in strict mode
No Duplicate Parameter Names:
In strict mode, you cannot have duplicate parameter names in function declarations.
// Without strict mode
function duplicateParams(a, b, a) {
console.log(a, b);
}
// With strict mode
"use strict";
function duplicateParams(a, b, a) { // Error: Duplicate parameter 'a'
console.log(a, b);
}
Assignment to Read-Only Properties and Variables:
Strict mode prevents assignments to read-only properties and variables, such as global objects and variables declared with const.
// Without strict mode undefined = 5; // No error, but not meaningful // With strict mode "use strict"; undefined = 5; // Error: Assignment to a read-only property
- Enabling strict mode is recommended for all modern JavaScript code as it helps catch common mistakes and ensures a more consistent and reliable coding experience.
- To use strict mode, you simply include the “use strict”; directive at the beginning of your
script or function. - Note that strict mode is opt-in, and it doesn’t affect scripts that don’t explicitly enable it.
Variables Must Be Declared:complete code
Let’s walk through a complete code example that demonstrates the impact of the “Variables Must Be Declared” rule in strict mode:
// Without strict mode
function withoutStrict() {
undeclaredVar = 42; // No error, creates a global variable
console.log("Without strict:", undeclaredVar);
}
withoutStrict(); // Logs: Without strict: 42
console.log("Outside the function:", undeclaredVar); // Logs: Outside the function: 42
(global variable)
// With strict mode
"use strict";
function withStrict() {
strictVar = 42; // Error: strictVar is not defined
console.log("With strict:", strictVar);
}
withStrict(); // Throws an error and execution stops
// The following line won't be reached due to the error in the previous function
console.log("Outside the function:", strictVar); // This line won't be executed
// Note: If the script is in strict mode, the entire script is in strict mode;
// individual functions don't have to opt in separately.Explanation:
Without strict mode:
- In the withoutStrict function, undeclaredVar is assigned a value without being declared with var, let, or const.This creates a global variable.
- The variable is accessible both inside and outside the function, even though it was not explicitly declared.
With strict mode:
- The “use strict”; directive is added at the top of the script, enabling strict mode.
- In the withStrict function, strictVar is assigned a value without being declared. This results in an error, preventing the creation of a global variable.
- When the withStrict function is called, it throws an error, and the subsequent code outside the function is not executed.
- Enabling strict mode in this example helps catch the mistake of using undeclared variables, promoting better coding practices and reducing the risk of unintentional
global variable creation.
No Octal Literal: complete code
Let’s create an HTML file with a JavaScript script that demonstrates the impact of the
“No Octal Literal” rule in strict mode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strict Mode - No Octal Literal</title>
</head>
<body>
<script>
// Without strict mode
function withoutStrict() {
var octalNumber = 0123; // Octal literal
console.log("Without strict:", octalNumber);
}
withoutStrict(); // Logs: Without strict: 83 (octal 123 is decimal 83)
// With strict mode
"use strict";
function withStrict() {
var octalNumber = 0123; // Error: Octal literals are not allowed in strict mode
console.log("With strict:", octalNumber);
}
// The following line won't be reached due to the error in the previous function
withStrict(); // This line won't be executed
// Explanation:
// In the "withoutStrict" function, an octal literal (0123) is used without an issue.
// In the "withStrict" function, the same octal literal triggers an error in strict
mode.
</script>
</body>
</html>Explanation:
Without strict mode:
- In the withoutStrict function, octalNumber is assigned the value 0123, which is an octal literal. Octal literals are represented in base 8.
- The value is logged to the console, and there is no error.
With strict mode:
- The “use strict”; directive is included at the top of the script, enabling strict mode.
- In the withStrict function, the same octal literal 0123 triggers an error. Octal literals are not allowed in strict mode.
- When the withStrict function is called, it throws an error, and the subsequent code is not executed.
- Enabling strict mode in this example helps catch the use of octal literals, which are deprecated in modern JavaScript. It encourages the use of decimal literals instead,
- promoting code consistency and avoiding potential confusion.
No Duplicate Parameter Names: complete code
Let’s create an HTML file with a JavaScript script that demonstrates the impact of the “No Duplicate Parameter Names” rule in strict mode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strict Mode - No Duplicate Parameter Names</title>
</head>
<body>
<script>
// Without strict mode
function withoutStrict(duplicateParam, duplicateParam, uniqueParam) {
console.log("Without strict:", duplicateParam, uniqueParam);
}
withoutStrict(1, 2, 3); // Logs: Without strict: 2 3 (duplicateParam is 2, uniqueParam
is 3)
// With strict mode
"use strict";
function withStrict(duplicateParam, duplicateParam, uniqueParam) {
console.log("With strict:", duplicateParam, uniqueParam);
}
// The following line won't be reached due to the error in the previous function
withStrict(4, 5, 6); // This line won't be executed
// Explanation:
// In the "withoutStrict" function, duplicate parameter names are allowed.
// In the "withStrict" function, the use of duplicate parameter names triggers an error
in strict mode.
</script>
</body>
</html>Explanation:
Without strict mode:
- In the withoutStrict function, parameters with duplicate names (duplicateParam) are used
without any issue.
The values are logged to the console, and there is no error.With strict mode: - The “use strict”; directive is included at the top of the script, enabling strict mode.
In the withStrict function, parameters with duplicate names (duplicateParam) trigger an
error. - Duplicate parameter names are not allowed in strict mode.
When the withStrict function is called, it throws an error, and the subsequent code is not executed. - Enabling strict mode in this example helps catch the mistake of using duplicate parameter
names, promoting better coding practices and reducing the risk of unintentional errors
caused by parameter naming conflicts.
Assignment to Read-Only Properties and Variables:complete code
Let’s create an HTML file with a JavaScript script that demonstrates the impact of the “Assignment to Read-Only Properties and Variables” rule in strict mode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strict Mode - Assignment to Read-Only</title>
</head>
<body>
<script>
// Without strict mode
var globalVariable = 42; // Define a global variable
function withoutStrict() {
console.log("Before assignment - Without strict:", globalVariable);
// Attempt to assign a new value to a read-only global object property
Object.defineProperty(window, 'globalVariable', { writable: false });
// No error in non-strict mode, but the assignment has no effect
globalVariable = 100;
console.log("After assignment - Without strict:", globalVariable);
}
withoutStrict(); // Logs: Before assignment - Without strict: 42, After assignment -
Without strict: 42
// With strict mode
"use strict";
function withStrict() {
console.log("Before assignment - With strict:", globalVariable);
// Attempt to assign a new value to a read-only global object property
Object.defineProperty(window, 'globalVariable', { writable: false });
// Error: Assignment to a read-only property in strict mode
globalVariable = 200;
console.log("After assignment - With strict:", globalVariable); // This line won't be
executed
}
// The following line won't be reached due to the error in the previous function
withStrict(); // This line won't be executed
// Explanation:
// In the "withoutStrict" function, an attempt is made to make the globalVariable
read-only, but it has no effect in non-strict mode.
// In the "withStrict" function, the same attempt to make the globalVariable read-only
triggers an error in strict mode.
</script>
</body>
</html>Explanation:
Without strict mode:
- In the withoutStrict function, an attempt is made to make the globalVariable read-only using Object.defineProperty.
- However, this has no effect in non-strict mode, and the assignment proceeds without any error.
With strict mode:
- The “use strict”; directive is included at the top of the script, enabling strict mode.
- In the withStrict function, the attempt to make globalVariable read-only using Object.
- defineProperty triggers an error in strict mode. Assignment to read-only properties is not allowed.
- When the withStrict function is called, it throws an error, and the subsequent code is not executed.
- Enabling strict mode in this example helps catch the mistake of attempting to assign a value to a read-only property, promoting better coding practices and reducing the risk of unintentional modifications to read-only properties or variables.
Deleting a variable (or object) is not allowed:
Let’s create an HTML file with a JavaScript script that demonstrates the impact of the “Deleting a variable (or object) is not allowed” rule in strict mode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strict Mode - Deleting Variables</title>
</head>
<body>
<script>
// Without strict mode
var nonStrictVar = 42; // Define a global variable
function withoutStrict() {
console.log("Before deletion - Without strict:", nonStrictVar);
// Attempt to delete a variable in non-strict mode
delete nonStrictVar;
console.log("After deletion - Without strict:", nonStrictVar); // Logs: After
deletion - Without strict: 42
}
withoutStrict();
// With strict mode
"use strict";
var strictVar = 42; // Define a global variable in strict mode
function withStrict() {
console.log("Before deletion - With strict:", strictVar);
// Attempt to delete a variable in strict mode
delete strictVar; // Error: Deleting a variable in strict mode is not allowed
console.log("After deletion - With strict:", strictVar); // This line won't be
executed
}
// The following line won't be reached due to the error in the previous function
withStrict(); // This line won't be executed
// Explanation:
// In the "withoutStrict" function, an attempt is made to delete the variable
"nonStrictVar" in non-strict mode.
// The deletion has no effect, and no error is thrown.
// In the "withStrict" function, the attempt to delete the variable "strictVar"
triggers an error in strict mode.
</script>
</body>
</html>Explanation:
Without strict mode:
- In the withoutStrict function, an attempt is made to delete the variable nonStrictVar using delete.
- However, in non-strict mode, this deletion has no effect, and no error is thrown.
With strict mode:
- The “use strict”; directive is included at the top of the script, enabling strict mode.
- In the withStrict function, the attempt to delete the variable strictVar using delete triggers an error in strict mode. Deleting variables is not allowed in strict mode.
- When the withStrict function is called, it throws an error, and the subsequent code is not executed.
- Enabling strict mode in this example helps catch the mistake of attempting to delete variables, promoting better coding practices and reducing the risk of unintentional
variable deletions.
Deleting a function is not allowed:
Let’s create an HTML file with a JavaScript script that demonstrates the impact of the “Deleting a function is not allowed” rule in strict mode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strict Mode - Deleting Functions</title>
</head>
<body>
<script>
// Without strict mode
function nonStrictFunction() {
console.log("Non-strict function");
}
console.log("Before deletion - Without strict:");
nonStrictFunction(); // Logs: Non-strict function
// Attempt to delete a function in non-strict mode
delete nonStrictFunction;
console.log("After deletion - Without strict:");
nonStrictFunction(); // Logs: Non-strict function (deletion has no effect)
// With strict mode
"use strict";
function strictFunction() {
console.log("Strict function");
}
console.log("Before deletion - With strict:");
strictFunction(); // Logs: Strict function
// Attempt to delete a function in strict mode
delete strictFunction; // Error: Deleting a function in strict mode is not allowed
console.log("After deletion - With strict:"); // This line won't be executed
strictFunction(); // This line won't be executed
</script>
</body>
</html>
Explanation:
Without strict mode:
In the non-strict part of the script, a function nonStrictFunction is defined.
Before attempting to delete the function, it is called, and the message “Non-strict function” is logged to the console.
An attempt is made to delete the function using delete nonStrictFunction;. However, in non-strict mode, this deletion has no effect, and the function can still be called afterward without any error.
With strict mode:
- The “use strict”; directive is included at the top of the script, enabling strict mode.
In the strict part of the script, a function strictFunction is defined. - Before attempting to delete the function, it is called, and the message “Strict function” is logged to the console.
- An attempt to delete the function using delete strictFunction; triggers an error in strict mode. Deleting functions is not allowed in strict mode.
- When the code attempts to call strictFunction() after the attempted deletion, it won’t be
executed due to the error. - Enabling strict mode in this example helps catch the mistake of attempting to delete functions, promoting better coding practices and reducing the risk of unintentional function deletions.
Duplicating a parameter name is not allowed:
Let’s create an HTML file with a JavaScript script that demonstrates the impact of the “Duplicating a parameter name is not allowed” rule in strict mode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strict Mode - Duplicating Parameter Names</title>
</head>
<body>
<script>
// Without strict mode
function withoutStrict(duplicateParam, duplicateParam, uniqueParam) {
console.log("Without strict:", duplicateParam, uniqueParam);
}
withoutStrict(1, 2, 3); // Logs: Without strict: 2 3 (duplicateParam is 2, uniqueParam
is 3)
// With strict mode
"use strict";
function withStrict(duplicateParam, duplicateParam, uniqueParam) {
console.log("With strict:", duplicateParam, uniqueParam);
}
// The following line won't be reached due to the error in the previous function
withStrict(4, 5, 6); // This line won't be executed
// Explanation:
// In the "withoutStrict" function, duplicate parameter names are allowed.
// In the "withStrict" function, the use of duplicate parameter names triggers an error
in strict mode.
</script>
</body>
</html>
Explanation:
Without strict mode:
In the withoutStrict function, parameters with duplicate names (duplicateParam) are used without any issue.
The values are logged to the console, and there is no error.
With strict mode:
- The “use strict”; directive is included at the top of the script, enabling strict mode.
- In the withStrict function, parameters with duplicate names (duplicateParam) trigger an error. Duplicate parameter names are not allowed in strict mode.
- When the withStrict function is called, it throws an error, and the subsequent code is not executed.
- Enabling strict mode in this example helps catch the mistake of using duplicate parameter
names, promoting better coding practices and reducing the risk of unintentional errors
caused by parameter naming conflicts. - Octal numeric literals are not allowed:complete code with explanation
Let’s create an HTML file with a JavaScript script that demonstrates the impact of the “Octal numeric literals are not allowed” rule in strict mode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strict Mode - Octal Numeric Literals</title>
</head>
<body>
<script>
// Without strict mode
function withoutStrict() {
var octalNumber = 0123; // Octal literal
console.log("Without strict:", octalNumber);
}
withoutStrict(); // Logs: Without strict: 83 (octal 123 is decimal 83)
// With strict mode
"use strict";
function withStrict() {
var octalNumber = 0123; // Error: Octal literals are not allowed in strict mode
console.log("With strict:", octalNumber);
}
// The following line won't be reached due to the error in the previous function
withStrict(); // This line won't be executed
// Explanation:
// In the "withoutStrict" function, an octal literal (0123) is used without an issue.
// In the "withStrict" function, the same octal literal 0123 triggers an error in
strict mode.
</script>
</body>
</html>
Explanation:
Without strict mode:
- In the withoutStrict function, a variable octalNumber is assigned the value 0123, which is an octal literal. Octal literals are represented in base 8.
- The value is logged to the console, and there is no error.
With strict mode:
- The “use strict”; directive is included at the top of the script, enabling strict mode.
- In the withStrict function, the same octal literal 0123 triggers an error. Octal literals are not allowed in strict mode.
- When the withStrict function is called, it throws an error, and the subsequent code is not executed.
- Enabling strict mode in this example helps catch the use of octal literals, which are deprecated in modern JavaScript.
- It encourages the use of decimal literals instead,promoting code consistency and avoiding potential confusion.
Octal escape characters are not allowed:
Let’s create an HTML file with a JavaScript script that demonstrates the impact of the “Octal escape characters are not allowed” rule in strict mode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strict Mode - Octal Escape Characters</title>
</head>
<body>
<script>
// Without strict mode
function withoutStrict() {
var octalEscape = "\251"; // Octal escape character for ©
console.log("Without strict:", octalEscape);
}
withoutStrict(); // Logs: Without strict: ©
// With strict mode
"use strict";
function withStrict() {
var octalEscape = "\251"; // Error: Octal escape characters are not allowed in strict
mode
console.log("With strict:", octalEscape);
}
// The following line won't be reached due to the error in the previous function
withStrict(); // This line won't be executed
// Explanation:
// In the "withoutStrict" function, an octal escape character ("\251") is used without
an issue.
// In the "withStrict" function, the same octal escape character triggers an error in
strict mode.
</script>
</body>
</html>
Explanation:
Without strict mode:
In the withoutStrict function, a variable octalEscape is assigned the value “\251”, which is an octal escape character representing the copyright symbol (©).
The value is logged to the console, and there is no error.
With strict mode:
- The “use strict”; directive is included at the top of the script, enabling strict mode.
- In the withStrict function, the same octal escape character “\251” triggers an error.
- Octal escape characters are not allowed in strict mode.
- When the withStrict function is called, it throws an error, and the subsequent code is not executed.
- Enabling strict mode in this example helps catch the use of octal escape characters,which are deprecated in modern JavaScript.
- It encourages the use of hexadecimal escape characters or Unicode escape sequences instead, promoting code consistency and avoiding
potential confusion.
Writing to a read-only property is not allowed
Let’s create an HTML file with a JavaScript script that demonstrates the impact of the “Writing to a read-only property is not allowed” rule in strict mode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strict Mode - Writing to Read-Only Property</title>
</head>
<body>
<script>
// Without strict mode
var nonStrictObject = {};
Object.defineProperty(nonStrictObject, 'readOnlyProperty', { value: 42, writable: false
});
console.log("Before assignment - Without strict:", nonStrictObject.readOnlyProperty);
// Attempt to write to a read-only property in non-strict mode
nonStrictObject.readOnlyProperty = 100;
console.log("After assignment - Without strict:", nonStrictObject.readOnlyProperty); //
Logs: After assignment - Without strict: 42 (assignment has no effect)
// With strict mode
"use strict";
var strictObject = {};
Object.defineProperty(strictObject, 'readOnlyProperty', { value: 42, writable: false
});
console.log("Before assignment - With strict:", strictObject.readOnlyProperty);
// Attempt to write to a read-only property in strict mode
strictObject.readOnlyProperty = 200; // Error: Writing to a read-only property in
strict mode is not allowed
console.log("After assignment - With strict:", strictObject.readOnlyProperty); // This
line won't be executed
</script>
</body>
</html>
Explanation:
Without strict mode:
- In the non-strict part of the script, an object nonStrictObject is created with a read-only property readOnlyProperty using Object.defineProperty.
- Before attempting to write to the read-only property, its initial value is logged to the console.
- An attempt is made to write a new value (100) to the read-only property using nonStrictObject.readOnlyProperty = 100;.
- However, in non-strict mode, this assignment has no effect, and no error is thrown.
With strict mode:
- The “use strict”; directive is included at the top of the script, enabling strict mode.
- In the strict part of the script, an object strictObject is created with a read-only property readOnlyProperty using Object.defineProperty.
- Before attempting to write to the read-only property, its initial value is logged to the console.
- An attempt to write a new value (200) to the read-only property using strictObject.readOnlyProperty = 200; triggers an error in strict mode. Writing to read- only properties is not allowed.
- When the code attempts to log the value of strictObject.readOnlyProperty after the attempted assignment, it won’t be executed due to the error.
- Enabling strict mode in this example helps catch the mistake of attempting to write to read-only properties, promoting better coding practices and reducing the risk of unintentional modifications to read-only properties.
Writing to a get-only property is not allowed
In JavaScript, properties defined with getter methods (getters) can be read but not written to. In strict mode, attempting to write to a getter-only property results in an error. Let’s create an HTML file with a JavaScript script that demonstrates this behavior:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strict Mode - Writing to Get-Only Property</title>
</head>
<body>
<script>
// Without strict mode
var nonStrictObject = {
get getOnlyProperty() {
return 42;
}
};
console.log("Before assignment - Without strict:", nonStrictObject.getOnlyProperty);
// Attempt to write to a get-only property in non-strict mode
nonStrictObject.getOnlyProperty = 100;
console.log("After assignment - Without strict:", nonStrictObject.getOnlyProperty); //
Logs: After assignment - Without strict: 42 (assignment has no effect)
// With strict mode
"use strict";
var strictObject = {
get getOnlyProperty() {
return 42;
}
};
console.log("Before assignment - With strict:", strictObject.getOnlyProperty);
// Attempt to write to a get-only property in strict mode
strictObject.getOnlyProperty = 200; // Error: Writing to a get-only property in strict
mode is not allowed
console.log("After assignment - With strict:", strictObject.getOnlyProperty); // This
line won't be executed
</script>
</body>
</html>
Explanation:
Without strict mode:
- In the non-strict part of the script, an object nonStrictObject is created with a getter-only property getOnlyProperty using a getter method.
- Before attempting to write to the get-only property, its initial value is logged to the console.
- An attempt is made to write a new value (100) to the get-only property using nonStrictObject.getOnlyProperty = 100;.
- However, in non-strict mode, this assignment has no effect, and no error is thrown.
With strict mode:
- The “use strict”; directive is included at the top of the script, enabling strict mode.
- In the strict part of the script, an object strictObject is created with a getter-only property getOnlyProperty using a getter method.
- Before attempting to write to the get-only property, its initial value is logged to the console.
- An attempt to write a new value (200) to the get-only property using strictObject.getOnlyProperty = 200; triggers an error in strict mode.
- Writing to get-only properties is not allowed.
- When the code attempts to log the value of strictObject.getOnlyProperty after the attempted assignment, it won’t be executed due to the error.
- Enabling strict mode in this example helps catch the mistake of attempting to write to get-only properties, promoting better coding practices and reducing the risk of unintentional modifications to such properties.
Deleting an undeletable property is not allowed:
In JavaScript, certain properties, especially those defined using Object.defineProperty with the configurable property set to false, become undeletable. In strict mode, attempting to delete such undeletable properties results in an error.
Here’s a complete HTML file with a JavaScript script to demonstrate this behavior:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strict Mode - Deleting Undeletable Property</title>
</head>
<body>
<script>
// Without strict mode
var nonStrictObject = {};
Object.defineProperty(nonStrictObject, 'undeletableProperty', {
value: 42,
configurable: false
});
console.log("Before deletion - Without strict:", nonStrictObject.undeletableProperty);
// Attempt to delete an undeletable property in non-strict mode
delete nonStrictObject.undeletableProperty;
console.log("After deletion - Without strict:", nonStrictObject.undeletableProperty);
// Logs: After deletion - Without strict: 42 (undeletable property remains)
// With strict mode
"use strict";
var strictObject = {};
Object.defineProperty(strictObject, 'undeletableProperty', {
value: 42,
configurable: false
});
console.log("Before deletion - With strict:", strictObject.undeletableProperty);
// Attempt to delete an undeletable property in strict mode
delete strictObject.undeletableProperty; // Error: Deleting an undeletable property in
strict mode is not allowed
console.log("After deletion - With strict:", strictObject.undeletableProperty); // This
line won't be executed
</script>
</body>
</html>Explanation:
Without strict mode:
- In the non-strict part of the script, an object nonStrictObject is created with an undeletable property undeletableProperty using Object.defineProperty with configurable:false.
- Before attempting to delete the undeletable property, its initial value is logged to the console.
- An attempt is made to delete the undeletable property using delete nonStrictObject.undeletableProperty;.
- However, in non-strict mode, this deletion has no effect, and no error is thrown.
With strict mode:
- The “use strict”; directive is included at the top of the script, enabling strict mode.
- In the strict part of the script, an object strictObject is created with an undeletable
property undeletableProperty using Object.defineProperty with configurable: false. - Before attempting to delete the undeletable property, its initial value is logged to the console.
- An attempt to delete the undeletable property using delete strictObject.undeletableProperty; triggers an error in strict mode.
- Deleting undeletable properties is not allowed.
- When the code attempts to log the value of strictObject.undeletableProperty after the attempted deletion, it won’t be executed due to the error.
- Enabling strict mode in this example helps catch the mistake of attempting to delete undeletable properties, promoting better coding practices and reducing the risk of unintentional deletions.
- The word eval cannot be used as a variable:complete code with explanation
In strict mode, the use of the word eval as a variable name is not allowed.
Here’s a complete HTML file with a JavaScript script to demonstrate this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strict Mode - Use of 'eval' as a Variable</title>
</head>
<body>
<script>
// Without strict mode
var eval = 42; // Using 'eval' as a variable name in non-strict mode
console.log("Without strict:", eval); // Logs: Without strict: 42
// With strict mode
"use strict";
var eval = 42; // Error: 'eval' cannot be used as a variable name in strict mode
console.log("With strict:", eval); // This line won't be executed
</script>
</body>
</html>
Explanation:
Without strict mode:
In the non-strict part of the script, a variable named eval is declared and assigned a value (42). In non-strict mode, this is allowed, and there is no error.
The value of the variable is logged to the console.
With strict mode:
- The “use strict”; directive is included at the top of the script, enabling strict mode.
- In the strict part of the script, an attempt is made to declare a variable named eval.
- However, using eval as a variable name is not allowed in strict mode, and it triggers an error.
- The attempt to log the value of the variable eval in strict mode won’t be executed due to the error.
- Enabling strict mode helps catch the usage of reserved words like eval as variable names, promoting better coding practices and reducing the risk of unintentional conflicts with
language features.
The word arguments cannot be used as a variable
In strict mode, the use of the word arguments as a variable name is not allowed.
Here’s a complete HTML file with a JavaScript script to demonstrate this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strict Mode - Use of 'arguments' as a Variable</title>
</head>
<body>
<script>
// Without strict mode
var arguments = 42; // Using 'arguments' as a variable name in non-strict mode
console.log("Without strict:", arguments); // Logs: Without strict: 42
// With strict mode
"use strict";
var arguments = 42; // Error: 'arguments' cannot be used as a variable name in strict
mode
console.log("With strict:", arguments); // This line won't be executed
</script>
</body>
</html>
Explanation:
Without strict mode:
- In the non-strict part of the script, a variable named arguments is declared and assigned a value (42).
- In non-strict mode, this is allowed, and there is no error.
- The value of the variable is logged to the console.
With strict mode:
- The “use strict”; directive is included at the top of the script, enabling strict mode.
- In the strict part of the script, an attempt is made to declare a variable named
arguments. - However, using arguments as a variable name is not allowed in strict mode, and it triggers an error.
- The attempt to log the value of the variable arguments in strict mode won’t be executed
due to the error. - Enabling strict mode helps catch the usage of reserved words like arguments as variable
names, promoting better coding practices and reducing the risk of unintentional conflicts
with language features.
The with statement is not allowed
In strict mode, the use of the with statement is not allowed.
Here’s a complete HTML file with a JavaScript script to demonstrate this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strict Mode - Use of 'with' Statement</title>
</head>
<body>
<script>
// Without strict mode
var objWithoutStrict = {
prop1: 42
};
with (objWithoutStrict) {
console.log("Without strict:", prop1); // Logs: Without strict: 42
}
// With strict mode
"use strict";
var objWithStrict = {
prop1: 42
};
with (objWithStrict) {
console.log("With strict:", prop1); // Error: 'with' statement is not allowed in
strict mode
}
console.log("After 'with' statement in strict mode:", objWithStrict.prop1); // Logs:
After 'with' statement in strict mode: 42
</script>
</body>
</html>
Explanation:
Without strict mode:
- In the non-strict part of the script, an object objWithoutStrict is created with a property prop1.
- The with statement is used to create a temporary scope with objWithoutStrict as the context. Inside the with block, the property prop1 is accessed directly.
- The value of prop1 is logged to the console without any errors.
With strict mode:
- The “use strict”; directive is included at the top of the script, enabling strict mode.
In the strict part of the script, an object objWithStrict is created with a property prop1.
An attempt to use the with statement with objWithStrict as the context triggers an error in strict mode. - The use of the with statement is not allowed in strict mode.
The attempt to log the value of prop1 inside the with block won’t be executed due to the error. - After the with statement in strict mode, the value of objWithStrict.prop1 is logged to the console outside the with block, and it does not cause an error.
- Enabling strict mode in this example helps catch the use of the with statement, which is considered error-prone and has been deprecated in modern JavaScript.
- Strict mode promotes better coding practices by disallowing potentially confusing or ambiguous constructs.
For security reasons, eval() is not allowed :
In strict mode, the use of eval() is restricted for security reasons.
Here’s a complete HTML file with a JavaScript script to demonstrate this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strict Mode - Restriction on eval()</title>
</head>
<body>
<script>
// Without strict mode
function withoutStrict() {
var expression = "2 + 3";
var result = eval(expression); // Using eval() in non-strict mode
console.log("Without strict:", result); // Logs: Without strict: 5
}
withoutStrict();
// With strict mode
"use strict";
function withStrict() {
var expression = "2 + 3";
try {
var result = eval(expression); // Error: eval() is not allowed in strict mode
} catch (error) {
console.error("With strict:", error.message);
}
}
withStrict(); // Logs: With strict: eval is not allowed in strict mode
</script>
</body>
</html>Explanation:
Without strict mode:
In the non-strict part of the script, a function withoutStrict is defined, and a string expression “2 + 3” is evaluated using eval().
The result of the evaluation is logged to the console without any errors.
With strict mode:
- The “use strict”; directive is included at the top of the script, enabling strict mode.
- In the strict part of the script, a function withStrict is defined, and an attempt is made to evaluate the same string expression using eval().
- However, using eval() in strict mode triggers an error. The catch block catches the error, and an error message is logged to the console.
- Enabling strict mode in this example helps improve security by restricting the use of eval().
- The use of eval() can introduce security vulnerabilities, as it executes arbitrary code and poses a risk of injection attacks. In strict mode, its usage is limited to prevent such risks.
In strict mode, eval() can not declare a variable using the var keyword
In strict mode, using eval() to declare a variable using the var keyword is not allowed.
Here’s a complete HTML file with a JavaScript script to demonstrate this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strict Mode - Restriction on eval() for Variable Declaration</title>
</head>
<body>
<script>
// Without strict mode
function withoutStrict() {
var variableName = "value";
console.log("Before eval() - Without strict:", variableName);
// Using eval() to declare a variable in non-strict mode
eval("var variableName = 'new value';");
console.log("After eval() - Without strict:", variableName); // Logs: After eval() -
Without strict: new value
}
withoutStrict();
// With strict mode
"use strict";
function withStrict() {
var variableName = "value";
console.log("Before eval() - With strict:", variableName);
try {
// Using eval() to declare a variable in strict mode (throws an error)
eval("var variableName = 'new value';");
} catch (error) {
console.error("After eval() - With strict:", error.message); // Logs: After eval()
- With strict: Cannot declare a variable in eval code
}
// The variable outside eval() remains unchanged
console.log("After eval() (outside) - With strict:", variableName); // Logs: After
eval() (outside) - With strict: value
}
withStrict();
</script>
</body>
</html>
Explanation:
Without strict mode:
- In the non-strict part of the script, a function withoutStrict is defined.
- A variable variableName is declared and assigned the value “value”.
- Before using eval(), the initial value of variableName is logged to the console.
- eval() is used to declare a new variable with the same name (variableName) inside the function.
- In non-strict mode, this redeclaration has an effect, and the value is changed.
- After using eval(), the updated value of variableName is logged to the console.
With strict mode:
- The “use strict”; directive is included at the top of the script, enabling strict mode.
- In the strict part of the script, a function withStrict is defined.
- A variable variableName is declared and assigned the value “value”.
- Before using eval(), the initial value of variableName is logged to the console.
- eval() is used to declare a new variable with the same name (variableName) inside the function.
- However, in strict mode, this attempt triggers an error, and the catch block logs an error message.
- Despite the error, the variable outside the eval() block remains unchanged, and its value is logged to the console after the attempt.
- Enabling strict mode in this example helps catch the attempt to declare a variable using eval(), promoting better coding practices and reducing the risk of unintentional variable redeclarations.
eval() can not declare a variable using the let keyword:
In strict mode, using eval() to declare a variable using the let keyword is also not allowed.
Here’s a complete HTML file with a JavaScript script to demonstrate this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strict Mode - Restriction on eval() for 'let' Variable Declaration</title>
</head>
<body>
<script>
// Without strict mode
function withoutStrict() {
let variableName = "value";
console.log("Before eval() - Without strict:", variableName);
// Using eval() to declare a variable with 'let' in non-strict mode
eval("let variableName = 'new value';");
console.log("After eval() - Without strict:", variableName); // Logs: After eval() -
Without strict: value (unchanged)
}
withoutStrict();
// With strict mode
"use strict";
function withStrict() {
let variableName = "value";
console.log("Before eval() - With strict:", variableName);
try {
// Using eval() to declare a variable with 'let' in strict mode (throws an error)
eval("let variableName = 'new value';");
} catch (error) {
console.error("After eval() - With strict:", error.message); // Logs: After eval()
- With strict: Cannot use 'let' in strict mode
}
// The variable outside eval() remains unchanged
console.log("After eval() (outside) - With strict:", variableName); // Logs: After
eval() (outside) - With strict: value
}
withStrict();
</script>
</body>
</html>Explanation:
Without strict mode:
- In the non-strict part of the script, a function withoutStrict is defined.
- A variable variableName is declared and assigned the value “value” using let.
- Before using eval(), the initial value of variableName is logged to the console.
- eval() is used to declare a new variable with the same name (variableName) inside the function.
- In non-strict mode, this redeclaration has an effect, but because let has block scope, the variable outside the eval() block remains unchanged.
With strict mode:
- The “use strict”; directive is included at the top of the script, enabling strict mode.
- In the strict part of the script, a function withStrict is defined.
- A variable variableName is declared and assigned the value “value” using let.
- Before using eval(), the initial value of variableName is logged to the console.
- eval() is used to declare a new variable with the same name (variableName) inside the function.
- However, in strict mode, this attempt triggers an error, and the catch block logs an error message.
- Despite the error, the variable outside the eval() block remains unchanged, and its value
is logged to the console after the attempt. - Enabling strict mode in this example helps catch the attempt to declare a variable using
eval() with let, promoting better coding practices and reducing the risk of unintentional
variable redeclarations.
The this keyword in functions behaves differently in strict mode:
In strict mode, the behavior of the this keyword in functions is different compared to non-strict mode.
Here’s a complete HTML file with a JavaScript script to demonstrate this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strict Mode - Behavior of 'this' Keyword</title>
</head>
<body>
<script>
// Without strict mode
function withoutStrict() {
console.log("Without strict - Inside function:", this); // Logs: Without strict -
Inside function: [object Window]
function nestedFunction() {
console.log("Without strict - Inside nested function:", this); // Logs: Without
strict - Inside nested function: [object Window]
}
nestedFunction();
}
withoutStrict();
// With strict mode
"use strict";
function withStrict() {
console.log("With strict - Inside function:", this); // Logs: With strict - Inside
function: undefined
function nestedFunction() {
console.log("With strict - Inside nested function:", this); // Logs: With strict -
Inside nested function: undefined
}
nestedFunction();
}
withStrict();
</script>
</body>
</html>
Explanation:
Without strict mode:
- In the non-strict part of the script, a function withoutStrict is defined.
- Inside the function, the console.log statement logs the value of this.
- In non-strict mode, when a function is called as a standalone function, the default this value is the global object (in a browser, it is typically the Window object).
- The nestedFunction is also defined inside withoutStrict, and its console.log statement logs the value of this. Again, in non-strict mode, the default this value is the global object.
With strict mode:
- The “use strict”; directive is included at the top of the script, enabling strict mode.
In the strict part of the script, a function withStrict is defined. - Inside the function, the console.log statement logs the value of this.
- In strict mode,when a function is called as a standalone function, the default this value is undefined.
- The nestedFunction is also defined inside withStrict, and its console.log statement logs the value of this. In strict mode, the default this value is also undefined.
- Enabling strict mode in this example changes the default behavior of the this keyword inside functions, making it undefined instead of the global object.
- This can help prevent unintentional use of the global object and lead to more predictable code behavior.
A quiz to test your understanding of the concepts discussed in the lesson about strict
mode in JavaScript.
Quiz: JavaScript Strict Mode
1-What is the purpose of using strict mode in JavaScript?
A) To enable experimental features.
B) To catch common coding errors and prevent the use of problematic features.
C) To allow the use of deprecated JavaScript features.
2-How do you enable strict mode for an entire script in JavaScript?
A) Add “strict” at the top of the script.
B) Include strict; at the beginning of each line.
C) Add “use strict”; at the top of the script.
3-In strict mode, what happens when you attempt to assign a value to an undeclared variable?
A) It creates a new global variable.
B) It throws an error.
C) It ignores the assignment.
4-Which of the following is disallowed in strict mode to enhance security?
A) eval for variable declaration.
B) with statement.
C) Both A and B.
5-In strict mode, what is the default value of this inside a standalone function?
A) Global object (window in a browser).
B) undefined.
C) It remains unchanged.
6-Which keyword cannot be used as a variable name in strict mode?
A) var.
B) arguments.
C) Both A and B.
7-What type of errors does strict mode help prevent?
A) Logical errors.
B) Syntax errors.
C) Runtime errors.
8-What is the recommended approach for declaring strict mode within a function?
A) Use “strict”; at the beginning of the function body.
B) Declare strict mode for the entire script; it will apply to all functions.
C) Use “use strict”; at the beginning of the function body.
Answers:
1-B) To catch common coding errors and prevent the use of problematic features.
2-C) Add “use strict”; at the top of the script.
3-B) It throws an error.
4-C) Both A and B.
5-B) undefined.
6-C) Both A and B.
7-B) Syntax errors.
8-C) Use “use strict”; at the beginning of the function body.
Quiz: JavaScript Strict Mode
1-What is the behavior of the this keyword inside a function declared in strict mode when the function is used as a method of an object?
A) It refers to the global object.
B) It refers to the object calling the method.
C) It is always undefined.
2-In strict mode, which of the following is not allowed for function declarations?
A) Duplicate parameter names.
B) Using the arguments keyword as a variable.
C) Both A and B.
3-What does strict mode do to the assignment of values to NaN, Infinity, and undefined?
A) It allows assignments without any restrictions.
B) It throws an error for such assignments.
C) It issues a warning but allows the assignments.
4-Which of the following statements is true regarding the with statement in strict mode?
A) It is allowed and behaves the same as in non-strict mode.
B) It is disallowed and triggers an error.
C) It is deprecated but still functional.
Answers :
1-C) It is always undefined.
2-C) Both A and B.
3-B) It throws an error for such assignments.
4-B) It is disallowed and triggers an error.
Quiz: JavaScript Strict Mode
1-What happens in strict mode when you attempt to delete a variable using the delete operator?
A) The variable is deleted without any issues.
B) It throws an error, and the variable is not deleted.
C) It prompts the for confirmation before deleting the variable.
2-Which of the following is true regarding octal literals in strict mode?
A) They are allowed and behave the same as in non-strict mode.
B) They are disallowed and result in a syntax error.
C) They are automatically converted to decimal.
3-In strict mode, what happens if you declare a function parameter with a duplicate name?
A) It is allowed, and the last declaration takes precedence.
B) It throws an error, and duplicate parameter names are not allowed.
C) It issues a warning but allows the duplicate parameter.
4-Which of the following is a benefit of strict mode for optimizing JavaScript code?
A) It allows the use of deprecated features.
B) It prevents certain optimizations by JavaScript engines.
C) It enables optimizations that might not be possible in non-strict mode.
Answers (Continued):
1-B) It throws an error, and the variable is not deleted.
2-B) They are disallowed and result in a syntax error.
3-B) It throws an error, and duplicate parameter names are not allowed.
4-C) It enables optimizations that might not be possible in non-strict mode.
Quiz: JavaScript Strict Mode
1-In strict mode, can you use arguments as a variable name?
A) Yes, it is allowed.
B) No, it results in an error.
C) It depends on the context.
2-What is the significance of strict mode regarding octal escape characters in strings?
A) They are allowed and interpreted as octal values.
B) They are disallowed and result in a syntax error.
C) They are automatically converted to decimal.
3-How does strict mode handle the usage of eval() for declaring variables using the var keyword?
A) It allows variable declarations using eval() without any restrictions.
B) It disallows variable declarations using eval() with the var keyword.
C) It issues a warning but allows the usage.
4-Which statement is correct about the behavior of the this keyword in strict mode functions used as constructors?
A) It refers to the newly created object.
B) It refers to the global object.
C) It is always undefined.
Answers (Continued):
1-B) No, it results in an error.
2-B) They are disallowed and result in a syntax error.
3-B) It disallows variable declarations using eval() with the var keyword.
4-A) It refers to the newly created object.