What is JavaScript Strict mode and how can we enable it ?
Last Updated :
24 Jul, 2024
JavaScript is a forgiving language as it ignores developers' or programmers' silly mistakes or errors in code like termination of the statement, variable declaration, the wrong data type of variable, hoisting issues, and many more. Sometimes these errors give unusual results which difficult for programmers or developers to find an error in long code like 1000 lines of code. So need something in which developers knew their mistakes instead of JavaScript interfering or doing something here. To eliminate these problems "use Strict" come into the picture.
Strict Mode was a new feature in ECMAScript 5 that allows you to place a program, or a function, in a “strict” operating context. This strict context prevents certain actions from being taken and throws more exceptions. The statement “use strict”; instructs the browser to use the Strict mode, which is a reduced and safer feature set of JavaScript.
How to Enable Strict Mode
To enable Strict mode in your JavaScript code, you simply need to include the following directive at the beginning of a script or a function:
Enabling Strict Mode in the Entire Script:
JavaScript
"use strict";
function myFunction() {
// This code is in strict mode
}
Example 1:
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
#box {
height: 20vh;
width: 10vw;
background-color: coral;
margin: 100px;
border-radius: 4px;
border: 2px palevioletred solid;
margin-bottom: 0px;
}
p {
color: red;
margin-left: 100px;
}
</style>
<body>
<div id="box"></div>
<p>Box clicked: <span id="click-count">0</span> times</p>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
const box = document.getElementById('box');
const click = document.getElementById('click-count');
//Not declared count here
count = 0;
box.addEventListener('click', function () {
count++;
console.log(count);
click.innerText = count + " ";
});
Output:
So here count variable is not declared in JavaScript code, yet it works fine without any error because JavaScript is supposed to be lenient for developers so actually don't create a variable as var or const then actually it creates a variable as a global variable.
Example 2:
JavaScript
<script>
// var c execute before declare
console.log(c);
var c=10;
//function call before declare
sum(30,40)
function sum(a,b){
//add is not declared as var or let
add = a + b;
console.log(add);
//string compare with integer gives true
console.log('2'==2);
}
</script>
Output:
Example 3:
JavaScript
//function call before declare
operation(30, 40)
function operation(a, b) {
// undefined output because variable
console.log(subtract);
//hoisting works as c is declared as var.
//subtract variable is declared as var
//browser understand statement terminate
var subtract = a - b
console.log(subtract); // -10 output
//create error because add is not defined yet
console.log(add);
//because browser also dont know add is defined or not
//add is not declared
add = a + b;
console.log(add);
}
Output:
Strict mode: It is preferred to get errors instead of letting them go and interfering. So it is a way to add a strict checking in JavaScript that would make fewer mistakes. After using it now JavaScript not filling it for us automatically instead it is generating an error. So developers is now able to fix their mistakes easily rather than having unexpected results from the JavaScript side and spend lots of time to fix these bugs now almost all browsers support strict mode.
Example 4: Let's take the same Example1 and use strict mode now:
JavaScript
"use strict"
const box = document.getElementById('box');
const click = document.getElementById('click-count');
//Not declared count here
count = 0;
box.addEventListener('click', function () {
count++;
console.log(count);
click.innerText = count + " ";
});
Output:
Here it gives an error because count is defined but not declared so for javascript now after using strict mode count is unknown. Now javascript identify error easily. If count is declared as var or let or const then it works fine.
Let's understand how strict mode can be enabled in JavaScript.
We can enable a strict mode in the JavaScript code by writing this simple statement: 'use strict'; OR "use strict".
We can apply strict mode to an entire script or to an individual function or section of code-
- The top of the whole script is to apply strict mode globally.
- It is inside functions to apply it to a particular function only.
It allows strict mode and non-strict mode to coexist together. So it can be easy at places where there is a need to add new JavaScript code in old existing JavaScript files.
Example 5:
JavaScript
const box = document.getElementById('box');
const click = document.getElementById('click-count');
// declared count here
var count = 0;
box.addEventListener('click', function () {
//non strict mode
"use strict"
count++;
//demo is not declared
demo = 100;
console.log(count);
click.innerText = count + " ";
});
Output:
Properties of strict mode:
- Duplicate values not allowed
Example 6:
JavaScript
function xyz(a, a) {
'use strict';
console.log(a + a);
}
xyz(10, 20);
Output:
- Cannot delete variable or delete cannot apply in strict mode
Example 7:
JavaScript
"use strict"
var x = 3.14;
delete x;
console.log(x)
Output:
Similar Reads
What is Strict Mode and how to enable it in JavaScript ?
The strict mode of JavaScript, introduced in ECMAScript 5, is a mechanism to opt into a restricted version of JavaScript." Strict mode modifies the regular JavaScript semantics in the following ways: Some JavaScript silent errors are eliminated by converting them to throw errors. How to enable stric
3 min read
How to Enable JavaScript on a MacOS?
JavaScript is a programming language used to create dynamic content on web pages, such as animations or real-time updates, without needing to refresh the page. Enabling JavaScript in your browser is essential for a smooth online experience, like automatic updates on Facebook or Twitter timelines. In
2 min read
How to Enable JavaScript on Android ?
JavaScript is the world's most popular lightweight, interpreted compiled programming language. It is also known as a scripting language for web pages. It is well-known for the development of web pages, many non-browser environments also use it. Therefore nowadays it is essential for users to have Ja
2 min read
How to enable JavaScript in Windows ?
Whenever you are browsing through some websites, you can observe that some of the blocks are not displayed properly. Instead of behaving dynamic, they are just standstill like any other static page which is very undesirable to the user. This behavior is mainly because of not enabling JavaScript on y
2 min read
What Are Access Modifiers In JavaScript ?
Access modifiers in JavaScript play a significant role in controlling the visibility and accessibility of class members. Although JavaScript is not traditionally an object-oriented programming (OOP) language, the introduction of classes and access modifiers in ECMAScript 6 (ES6) allowed developers t
4 min read
How to Disable Input in JavaScript ?
Disabling input fields in JavaScript is a common task when you want to restrict users from interacting with specific form elements. This can be useful in various scenarios, such as preventing modifications to fields that are conditionally locked or ensuring certain inputs are controlled programmatic
2 min read
What are the variable naming conventions in JavaScript ?
When we name variables in javascript, we've to follow certain rules. Each variable should have a name that appropriately identifies it. Your JavaScript code gets easier to comprehend and work with when you use suitable variable names. It's critical to name variables correctly. For example Constants
2 min read
How to enable JavaScript in my browser ?
We will explore the process of enabling JavaScript in web browsers to ensure seamless functionality of applications and websites. JavaScript serves as a fundamental component of modern web development, facilitating dynamic interactions and enhanced user experiences. However, encountering issues wher
2 min read
What is the use of debugger keyword in JavaScript ?
Debugging is a very important aspect of programming to determine why a system or application is misbehaving. It is a process of testing and finding errors to reduce bugs from computer programs. In this article, we will learn about the debugger keyword in JavaScript. To know more about debugging chec
2 min read
Strict Equality(===) Comparison Operator in JavaScript
JavaScript Strict Equality Operator is used to compare two operands and return true if both the value and type of operands are the same. Since type conversion is not done, so even if the value stored in operands is the same but their type is different the operation will return false. Syntax: a===b E
2 min read