Post
Ask Question

Strict Mode In JavaScript

Introduction

 
Strict mode in JavaScript is a modern way of writing the JavaScript code. This is a new feature in ECMAScript 5 that prevents most of the Javascript silent errors by changing them into throw errors.
 
What we will cover
  1. How to use strict mode
  2. The benefits of strict mode
  3. Different levels of using the strict mode
How to use strict mode
 
“use strict” is the statement that instructs the browser to use the strict mode. Let 's check the difference between Normal mode and Strict mode with an example.
 
Default Mode
 
Consider the below code.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Untitled</title>  
  6. </head>  
  7. <body>  
  8.   <label id="message"></label>  
  9.   <script>      
  10.       var foo="hello";  
  11.       x=10;  
  12.       function baz()  
  13.       {                
  14.           foo="Hello from function";          
  15.           bam="Hello from bam"  
  16.           document.getElementById('message').innerHTML=bam;  
  17.       }  
  18.       baz();  
  19.       </script>  
  20. </body>  
  21. </html>  
As per the code in default mode, the function baz will assign the bam identifier value to the inner HTML of the label. You can see the result of executing this code as below.
 
Strict Mode In JavaScript 
figure 1: In Default mode
 
Even though the variable bam is not declared, the value can be initialized to the variable which is somewhat annoying in the normal identical way of writing JavaScript.
 
Strict Mode
 
Consider the below code.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Untitled</title>  
  6. </head>  
  7. <body>  
  8.   <label id="message"></label>  
  9.   <script>  
  10.      'use strict';  
  11.       var foo="hello";  
  12.       x=10;  
  13.       function baz()  
  14.       {  
  15.           foo="Hello from function";          
  16.           bam="Hello from bam"  
  17.           document.getElementById('message').innerHTML=bam;  
  18.       }  
  19.       baz();  
  20.       </script>  
  21. </body>  
  22. </html>  
In "strict" mode, you will get an error saying bam is undefined because bam is not declared anywhere in the code.
 
Strict Mode In JavaScript 
figure 2: In strict mode 
 
Benefits of strict mode 
  1. It makes it easier to write a safe and secure JavaScript.
  2. It fixes the mistakes that sometimes make it difficult for JavaScript engines to perform in an optimized way.
  3. In JavaScript, most of the time, we don't get any error feedback while assigning the value for the read-only property. But, by using the "strict" mode, a developer always gets error feedback while committing a mistake.
Different levels of using the strict mode
  1. Script mode for the entire script
  2. Script mode for scope
Script mode for an entire script
 
While declaring the “use strict” statement, it will apply the strict mode on the entire script.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Untitled</title>  
  6. </head>  
  7. <body>  
  8.   <label id="message"></label>  
  9.   <script>  
  10.      'use strict';  
  11.       var foo="hello";  
  12.       x=10;  
  13.       function baz()  
  14.       {              
  15.           foo="Hello from function";          
  16.           bam="Hello from bam"  
  17.           document.getElementById('message').innerHTML=bam;  
  18.       }  
  19.       baz();  
  20.       </script>  
  21. </body>  
  22. </html>  
From the above code, you will get an error saying x is undefined. Here, the "strict" mode is applied to the entire script.
 
Strict Mode In JavaScript 
 
Script mode for scope
 
We can use the "strict" mode at function level as well.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Untitled</title>  
  6. </head>  
  7. <body>  
  8.   <label id="message"></label>  
  9.   <script>       
  10.       var foo="hello";  
  11.       x=10;  
  12.       function baz()  
  13.       {  
  14.             'use strict';  
  15.           foo="Hello from function";          
  16.           bam="Hello from bam"  
  17.           document.getElementById('message').innerHTML=bam;  
  18.       }  
  19.       baz();  
  20.       </script>  
  21. </body>  
  22. </html>   
From the above code, you will get an error stating bam is undefined. Here, the "strict" mode is applied only to the baz() level.
 
Strict Mode In JavaScript
 

Conclusion

 
We have seen the usage and benefits of strict mode which is a modern way of writing the JavaScript and we also discussed the differences between normal mode and the strict mode. Not only this, we went through the examples to learn how to write better and safer code in JavaScript using the strict mode.
Next Recommended Reading Get And Set Variable Values From One JavaScript File To Another JavaScript File Using Local Storage