Open In App

What is JavaScript Strict mode and how can we enable it ?

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Example 1:

  • index.html

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>


  • script.js

Javascript




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:

 



Last Updated : 21 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads