Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What are the characteristics of JavaScript 'Strict Mode'?
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.
390 Views
