How to secure my JavaScript using "Strict mode"?

Javascript Web Development Front End Technology

In this tutorial, we are going to learn how to secure my JavaScript using “Strict mode”. There are some errors in the code which are just ignored by the JavaScript engine and if any line fails it perform nothing, to indicate that there is an error we can use the strict mode which will make the JavaScript engine throw an error.

The ‘use strict’ is a literal expression which is the directive we can add to the code, not in any block. We can add this ‘use strict’ directive in the whole script, a function, or in a class.

Syntax

Now let’s move to see the syntax to secure JavaScript using “strict mode” for the whole script −

<script>
   "use strict";
</script>

In the above syntax, we have added the ‘use strict’ directive in the whole script and it will make the JavaScript engine throw error if any mistake happens in the whole code.

Now let’s move to see the syntax to secure JavaScript using “strict mode” for a particular function −

<script>
// normal code
function name_of_function(){
   "use strict";
   // code for function
}
</script>

In the above syntax, we have added the ‘use strict’ directive in the whole script and it will make the JavaScript engine throw error if any mistake happens in the whole code.

We have seen the algorithm for how to secure the JavaScript using the “Strict Mode”, now let’s move to the example to understand all the steps by the implementation.

Example 1

In this example, we are going to use the strict mode for the whole script and going to define some functions in it. We will initialize a none declared variable in the script to show the use of the ‘use script’ directive.


<!DOCTYPE html>
<html>
<head>
   <script>
      "use strict";
      a = 7;
      function function_one() {
         function nested() {
            document.getElementById("result").innerHTML =
            "This is the nested function of first function";
         }
         nested();
         document.getElementById("result").innerHTML +=
         "<br> This is the first function";
      }
      function function_second() {
         document.getElementById("result").innerHTML =
         "This is the second function";
      }
   </script>
</head>
<body>
   <h3>How to secure my JavaScript using "Strict mode"?</h3>
   <p>Press this button to call the first function.
   <button onclick = "function_one()"> Press Me </button>
   </p>
   <p>Press this button to call the second function.
   <button onclick = "function_second()"> Press Me </button>
   </p>
   <p id = "result"> </p>
</body>
</html>

In the above code, we have defined the body of the code which defined the two paragraphs and each will contain a button. For buttons, we have defined the onclick event that will call to the pre-defined function on clicking them.

In the script, we have added the ‘use strict’ directive at the beginning of the script and then initialized a variable that is not declared. After that is defined two functions will write in the document and the first function will contain a nested function also.

Example 2

In this example, we are going to use the strict mode, not for the whole script, and going to define some functions in the script. We will create two functions, the first function will contain the ‘use strict’ directive and a nested function and the second function will only contain the writing expression.in it. We will initialize a none declared variable in the script to show the use of the ‘use script’ directive.


<!DOCTYPE html>
<html>
<head>
   <script>
      function function_one() {
         "use strict";
         function nested() {
            document.write("This is the nested function of first function");
         }
         nested();
         document.write("<br> This is the first function");
      }
      function function_second() {
         document.write("This is the second function");
      }
   </script>
</head>
<body>
   <h3>How to secure my JavaScript using "Strict mode"?</h3>
   <p>Press this button to call the first function.
   <button onclick = "function_one()"> Press Me </button>
   </p>
   <p>Press this button to call the second function.
   <button onclick = "function_second()"> Press Me </button>
   </p>
</body>
</html>

In the above code, we have defined the body of the code which defined the two paragraphs and each will contain a button. For buttons, we have defined the onclick event that will call to the pre-defined function on clicking them.

In the script, we have created two functions, the first function will contain the ‘use strict’ directive and a nested function and the second function will only contain the writing expression.

Note − Strict mode is not allowed in the function with default parameters.

For Example

function add(first = 1, second = 2) {
   "use strict";
   return first + second;
}

The above JavaScript code will throw a syntax error because we cannot use the ‘use strict’ directive with the default parameter function.

Conclusion

In this tutorial, we have learned how to secure my JavaScript using “Strict mode”. There are some errors in the code which are just ignored by the JavaScript engine and if any line fails it perform nothing, to indicate that there is an error we can use the strict mode which will make the JavaScript engine throw an error. The ‘use strict’ is a literal expression which is the directive we can add to the code, not in any block. We can add this ‘use strict’ directive in the whole script, a function, or in a class.