What does “use strict” do in JavaScript, and what is the reasoning behind it?


In this tutorial, we will learn what "use strict" does in JavaScript.

The "use strict" is a directive. JavaScript 1.8.5 is its origin.

The use strict directive says that the JavaScript code must run in the strict mode. The strict directive is not a statement but rather a constant expression. Earlier JavaScript versions ignore this expression.

We can't use undeclared variables when writing the code in strict mode. Except for IE9 and lower versions, all modern browsers support this JavaScript directive. Strict mode allows us to write a cleaner code as it throws errors when we use undeclared variables in the program.

"use strict" is a string. To enable strict mode, we need to write this string at the beginning of our script. Writing, in the beginning, means that this has a global scope.

The advantage of using this JavaScript directive is that we get a safe code. Early JavaScript versions ignore wrong syntaxes. Say, for example, an incorrectly typed variable name becomes a global variable before. It will throw an error for this variable in strict mode, and we can rectify it. The JavaScript functions also use strict mode when necessary.

Users can follow the syntax below for using this method.

Syntax

"use strict";
const a = "Strict Variable";

Here, the first line in the syntax is the directive, and a is a variable that follows strict mode.

Example 1

This program has an undeclared variable named q in normal mode and p in strict mode. Without strict mode, we can display the q-value in the output. When the user opts for the strict mode, we cannot display the p-value; rather, it throws an error in the catch block.

<html> <body> <h2>Using JavaScript strict mode</h2> <p id = "strictModInp"></p> <div id = "strictModOutWrap"> <h3>Click this button to strict mode</h3> <button id = "strictModBtn" onclick = "getStrictMode();">Be Strict </button> </div> <p id = "strictModOut"></p> <script> var strictModEl; var strictModData; var strictModWrap = document.getElementById("strictModOutWrap"); function getStrictMode() { "use strict"; try { p = 10; strictModData = "Undeclared variable in strict mode -
"
+ p; } catch(e) { strictModData = "Undeclared variable in strict mode -
"
+ e; } strictModEl = document.getElementById("strictModOut"); strictModEl.innerHTML = strictModData; // strictModWrap.style.display = "none"; } function noStrict() { q = 10; strictModEl = document.getElementById("strictModInp"); strictModData = "Undeclared variable in normal mode -
"
+ q; strictModEl.innerHTML = strictModData; } noStrict(); </script> </body> </html>

Example 2

This program has four cases where the strict mode throws an error. We use the try-catch block to display this error to the user. You can refer to each case comments inline the program below.

<html> <body> <h2>Using the JavaScript strict mode restriction cases.</h2> <p id = "useStrictInp"></p> <div id = "useStrictOutWrap"> <h5>Click this button to strict mode</h5> <button id = "useStrictBtn" onclick="strictUse();"> Strict </button> </div> <p id = "useStrictOut"> </p> <script> var useStrictEl; var useStrictData; var useStrictWrap = document.getElementById("useStrictOutWrap"); var useStrictOut = document.getElementById("useStrictOut"); var useStrictErr = ""; function strictMode(option) { 'use strict'; try { switch(option) { case 1: //must declare a variable a = 'hi'; break; case 2://must declare an object jsonObj = {name: 'Carla', age: 25}; break; case 3://must not assign to the non-writable property let obj1 = {}; Object.defineProperty(obj1, 'x', { value: 40, writable: false }); obj1.x = 10; break; case 4://must not assign to a getter-only property let obj2 = { get x() { return 10; } }; obj2.x = 5; break; } } catch(e) { useStrictErr += e + "<br><br>"; } useStrictOut.innerHTML = useStrictErr; } function strictUse() { strictMode(1); strictMode(2); strictMode(3); strictMode(4); } </script> </body> </html>

Other restrictions in strict mode

We can not assign to the variable "arguments"

'use strict';
let arguments = 'hello'; //error
let eval = 44;

We can not use octal values

'use strict';
let a = 010; //error

We can not use escape characters

'use strict';
let a = \010; //error

We can not assign a new property to a non-extensible object

'use strict';
let obj = {};
Object.preventExtensions(obj);
obj.newKey = 'test'; //error

We can not use duplicate arguments

"use strict";
function hello(p1, p1)
{
   console.log('hello')
}; //error
hello();

We can not delete an object

'use strict';
let person = {name: 'Egan'};
delete person; //error

We can not use an undeclared variable

"use strict";
var x = 1; //valid
y = 1;//invalid

We can not use keywords

"use strict";
var for = 1; //error
var if = 1;

We can not assign to a read-only object

"use strict";
var arr = [10,20,30];
arr.length = 10;

We can not use "with"

"use strict";
with (Math)
{
   x = abs(200.234, 2); //error
};

We can not use "eval"

"use strict";
eval("var x = 1");

Strict mode inside the function

x = 1; //valid
function sum(val1, val2)
{
   "use strict";
   result = val1 + val2;//error
   return result;
}

We can not delete a prototype

"use strict";
delete Object.prototype;

We can not delete an unqualified identifier.

"use strict";
function f(a, b)
{
   delete(a); //error
}

We can not delete an unqualified identifier, function, or an object

"use strict";
var x = 50;
var obj =
{
   'name': 'name'
};
   function f()
{
}
delete x; //error
delete obj; //error
delete f; //error,

To use strict mode in some consoles, use this code block

(function() {
   'use strict';
   //code here...
})()

In this tutorial, we learned the strict mode in JavaScript that restricts the use of undeclared variables. Using strict mode, we can ensure a safe and clean code. Strict mode is helpful because it prevents errors.

Updated on: 31-Oct-2022

160 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements