What are the characteristics of JavaScript 'Strict Mode'?

Front End Technology Javascript Object Oriented Programming

This tutorial will explain you what are the different characteristics of JavaScript 'Strict Mode'. As such, there are two different modes of programming in JavaScript.

By default, the simple mode or sometimes known as the sloppy mode is enabled. In this mode, we do not need to follow strict rules while writing the code.
On the other hand, the strict mode is also there. This mode enables some strict rules in the environment. Strict mode is not a subset of the sloppy mode but it also has different semantics than normal code.

Syntax

Strict modes can be enabled in different scopes. The syntaxes are given below−

Strict mode for scripts: To convert an entire script as strict

‘use strict’;

Strict mode for function: To convert a function as strict

function function_name(){
   ‘use strict’;
   // function body
}

JavaScript classes are already in strict mode, we do not need to write anything for them.

What are the changes that come after enabling Strict Mode in JavaScript?

In sloppy JavaScript, it sometimes hides the errors and makes them silent while executing. For example, if we do not declare a variable before, we can assign some value to an undeclared variable. It will automatically create a global variable after that initialization statement. But in strict mode, it will raise an error since we are assigning a value to some variable that is not declared. There are other few changes which are listed below −

Strict mode throws some errors which are turned into silent errors in sloppy mode.
Sometimes the strict mode codes run faster than identical sloppy mode codes because fixing mistakes becomes more difficult for JavaScript engines to perform any optimization.

When the strict mode throws many errors and makes our environment stricter, then why should we enter into this mode? Well, there are some advantages also.

Strict mode helps us to write secure JavaScript code.
A sloppy JavaScript code may have silently accepted bad syntaxes. Which can be turned into real error in strict mode. Which helps to write better code in JavaScript.
When a variable is non-writable, the sloppy JavaScript variant does not return any error whether strict mode feedbacks the developer an error message for them.
In strict mode when we try to assign some value to a non-writable property, getter only property, or non-existing property it will raise errors.

Examples

Let us see some examples to understand which are not allowed in strict mode −

Source Code


<!DOCTYPE html>
<html>
<head>
   <title>HTML Console</title>
</head>
<body>
   <h3> Output Console </h3>
   <p> Output: </p>
   <div id = "output" >
   </div>
   <script>
      "use strict" // enabling strict mode
      var content = ''
      var opDiv = document.querySelector( '#output' )
      // actual javascript code
      try{
         // Assigning to a variable that is not declared beforehand a = 2.5;
         content = "Value of variable a = " + a;
      }
      catch (err) {
         content = err
         opDiv.style.color = '#ff0000'
      }
      finally{
         // display on output console
         opDiv.innerHTML = content
      }
   </script>
</body>
</html>

So, declare a variable and use it

Source Code


<!DOCTYPE html>
<html>
<head>
   <title>HTML Console</title>
</head>
<body>
   <h3> Output Console </h3>
   <p> Output: </p>
   <div id="output">
   </div>
   <script>
      "use strict" // enabling strict mode
      var content = ''
      var opDiv = document.querySelector('#output')
      // actual javascript code
      try {
         var a
         a = 2.5;
         var b = 5.7;
         content = "Value of variable a: " + a + "<br>";
         content += "Value of variable b: " + b;
      }
      catch (err) {
         content = err
         opDiv.style.color = '#ff0000'
      }
      finally {
         // display on output console
         opDiv.innerHTML = content
      }
   </script>
</body>
</html>

Deleting variables is not allowed in strict mode.

Source Code


<!DOCTYPE html>
<html>
<head>
   <title>HTML Console</title>
</head>
<body>
   <h3> Output Console </h3>
   <p> Output: </p>
   <div id="output">
   </div>
   <script>
      "use strict" // enabling strict mode
      var content = ''
      var opDiv = document.querySelector('#output')
      // actual javascript code
      try {
         let a = 2.5;
         content += 'Value of a:' + a + '<br>';
         delete a;
      }
      catch (err) {
         content += err
         opDiv.style.color = '#ff0000'
      }
      finally {
         // display on output console
         opDiv.innerHTML = content
      }
   </script>
</body>
</html>

Output (this error cannot be displayed through HTML page online console. Copy the above code and create an HTML file into your local machine, and try to run this HTML file then check page console to get this error:

Writing to read-only objects is not allowed.

Source Code


<!DOCTYPE html>
<html>
<head>
   <title>HTML Console</title>
</head>
<body>
   <h3> Output Console </h3>
   <p> Output: </p>
   <div id="output">
   </div>
   <div id="opError" style = "color : #ff0000">
   </div>
   <script>
      "use strict" // enabling strict mode
      var content = ''
      var error = ''
      var opDiv = document.querySelector('#output')
      var opErrDiv = document.querySelector('#opError')
      // actual javascript code
      try {
         const obj = {};
         Object.defineProperty(obj, "a", { value: 10, writable: false });
         content += "The value of obj.a: " + obj.a + "<br>"
         obj.a = 5.27;
      }
      catch (err) {
         error += err
      }
      finally {
         // display on output console
         opDiv.innerHTML = content
         opErrDiv.innerHTML = error
      }
   </script>
</body>
</html>

Creating a variable with a name same as a reserved keyword is not allowed−

Source Code


<!DOCTYPE html>
<html>
<head>
   <title>HTML Console</title>
</head>
<body>
   <h3> Output Console </h3>
   <p> Output: </p>
   <div id="output">
   </div>
   <div id="opError" style = "color : #ff0000">
   </div>
   <script>
      "use strict" // enabling strict mode
      var content = ''
      var error = ''
      var opDiv = document.querySelector('#output')
      var opErrDiv = document.querySelector('#opError')
      // actual javascript code
      try {
         let public = 15;
         content += "The value of public: " + public + "<br>"
      }
      catch (err) {
         error += err
      }
      finally {
         // display on output console
         opDiv.innerHTML = content
         opErrDiv.innerHTML = error
      }
   </script>
</body>
</html>

In sloppy mode, we can use ‘With’ keyword which is not allowed in strict mode −

Source Code


<!DOCTYPE html>
<html>
<head>
   <title>HTML Console</title>
</head>
<body>
   <h3> Output Console </h3>
   <p> Output: </p>
   <div id="output">
   </div>
   <div id="opError" style = "color : #ff0000">
   </div>
   <script>
      // Sloppy Mode
      var content = ''
      var error = ''
      var opDiv = document.querySelector('#output')
      var opErrDiv = document.querySelector('#opError')
      // actual javascript code
      try {
         with (Math){a = sqrt(64)};
         content += "The value of a: " + a + "<br>"
      }
      catch (err) {
         error += err
      }
      finally {
         // display on output console
         opDiv.innerHTML = content
         opErrDiv.innerHTML = error
      }
   </script>
</body>
</html>

Source Code


<!DOCTYPE html>
<html>
<head>
   <title>HTML Console</title>
</head>
<body>
   <h3> Output Console </h3>
   <p> Output: </p>
   <div id="output">
   </div>
   <div id="opError" style = "color : #ff0000">
   </div>
   <script>
      "use strict" // enabling strict Mode
      var content = ''
      var error = ''
      var opDiv = document.querySelector('#output')
      var opErrDiv = document.querySelector('#opError')
      
      // actual javascript code
      try {
         with (Math){a = sqrt(64)};
         content += "The value of a: " + a + "<br>"
      }
      catch (err) {
         error += err
      }
      finally {
         // display on output console
         opDiv.innerHTML = content
         opErrDiv.innerHTML = error
      }
   </script>
</body>
</html>

Conclusion

JavaScript strict mode enables a secure environment for JavaScript development. In this mode, it does not allow codes with bad syntaxes and also restricts the implicit conversion from sloppy modes. JavaScript optimizes the codes to reduce errors while compiling but in Strict mode, the level of optimization is much less. Sometimes the codes written in strict mode run faster than the similar code written in sloppy mode.