Strict Mode in JavaScript

One of the amazing things about JavaScript is that it is very flexible. It ignores many mistakes of programmers. For example, you can use a variable before declaring it. While this can surely be a good thing, it can cause unexpected errors in your code as well. For example, while assigning a value to a variable, you may mistype its name. In this case, JavaScript will not throw any error, but your program can provide a wrong output or have unexpected behavior. These mistakes are hard to find as well. Therefore, sloppy mode of JavaScript can cause a lot of pain. However, ECMAScript 5 introduced strict mode, which allows you to opt in to a more restricted variant of JavaScript.

Strict mode provides a lot of benefits. It removes JavaScript silent errors by explicitly throwing them. Moreover, it fixes those mistakes that make it difficult for the JavaScript engine to perform optimizations. Therefore, the code written in strict mode can be made more efficient than the one in sloppy mode. It also restricts the programmers from using the syntax, which can be used in the future ECMAScript versions, so the update to newer versions becomes simpler. Strict mode helps us to write a secure JS code.

Read more on Strict Mode at the Mozilla MDN page:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

Invoking Strict Mode

Strict mode can be applied in two ways, either to the whole script or a function.

Strict Mode for the Script

To invoke strict mode for the whole script (global scope), write “use strict”; or ‘use strict’; at the beginning of your code. Everything inside it will run in strict mode.

//whole script will run in the script mode
"use strict";
//rest of code here

Let’s take an example.

"use strict";
b = 34
console.log(b)

Output

For the Function

To invoke strict mode for a function (local scope), write “use strict”; or ‘use strict’; at the beginning of the function. Everything inside it will run in strict mode.

function test(){
    "use   strict";
    //this function   will run in the strict mode
}
function test2(){
    //this function   is not in the strict mode
}

Let’s take an example

b = 34
console.log(b)
function test(){
    "use strict";
    print("This function is in a strict mode")
    a = 3;
    console.log(a)
}
test()

Output

Remember to put “use strict”; or ‘use strict’; before any other statement in your script or function. Otherwise, it would not work.

function test(){
   console.log("This is a test function")
   "use strict";
    a = 3;
    console.log(a)
}
test()

Output

This is a test function

3

As you can see in the output, strict mode did not enable.

The “use strict”; or ‘use strict’; directive is a literal expression. Therefore, versions of JavaScript or browsers that do not recognize it will simply ignore it.

Not allowed in Strict Mode

Let’s now go ahead and see the restrictions put by strict mode.

As already mentioned, a variable used without a declaration will cause a reference error. Let’s see.

"use strict";
x = 'Ashton'
console.log(x)

Output

Strict mode also restricts the use of some assignments by throwing an exception. Specifically, those that will silently fail in sloppy mode.

In Non-Strict mode, assignment to a non-writable global is allowed. However, it does nothing. Therefore, it will silently fail, and thus, it is not allowed in strict mode. It will throw a type error. Let’s see.

"use strict";
undefined = "Hi"
NaN = "bye"

Output

Similarly, assignment to a read only property of an object will also result in a type error. In sloppy mode, this statement will have no effect. Let’s see.

"use strict";
var obj1={}
Object.defineProperty(obj1, 'x', {
   value:34,
   writable: false
})
obj1.x = 52
console.log(obj1.x)

Output

Strict mode also does not allow assigning values to a getter-only property. In normal mode, this assignment will silently fail. Consider the following example

"use strict";
var obj1 = {
   x: 3,
   y: 5,
   get z(){
      return 32
   }
}
obj1.z = 6
console.log(obj1.z)

Output

Moreover, assigning a new property to an object that is not extensible will throw a type error in strict mode. Let’s see.

"use strict";
var obj1 = {
  x: 3,
   y: 5,
}
obj1.z = 6
Object.preventExtensions(obj1)
obj1.t = 3 // this line will cause an error
console.log(obj1)

Output

In strict mode, "0"-prefixed octal literals and octal escape sequence s throw a syntax error. Consider the following example.

"use strict";
var a = 034
console.log(a)

Output

"use strict";
var a = "\341"
console.log(a)

Output

For a valid octal number, use 0O or 0o as a prefix. Let’s see.

"use strict";
var a = 0o34
console.log(a)

Output

28

For a valid octal escape sequence, use a hexadecimal escape sequence. Let’s see.

"use strict";
var a = "\xE1"
console.log(a)

Output

á

In strict mode, the parameter names of the function need to be different. Otherwise, you will get a syntax error. Consider the following example.

"use strict";
function test(x, y, y){
    console.log(x, y)
}
test(3, 4, 5)

Output

Deleting a variable or a function is also restricted in strict mode. Let’s see.

"use strict";
function test(x, y){
    console.log(x, y)
}
delete test

Output

"use strict";
var a = 3
delete a

Output

In strict mode, you cannot delete an undeletable property. In sloppy mode, however, this statement would not have any effect. Let’s see.

"use strict";
var obj1={y:5}
Object.defineProperty(obj1, 'x', {
   value:34,
   configurable:false   //x cannot be deleted
})
delete obj1.x
console.log(obj1)

Output

Setting a property on a primitive value causes a type error in strict mode. Consider the following example.

"use strict";
true.x = 3
console.log(true.x)

Output

Strict mode restricts the use of the with statement to optimize the code better.

"use strict";
var obj1 = {
   x:4,
   y:6,
   z:5
}
with(obj1){
   console.log(x+y+z)
}

Output

Strict mode does not allow the eval() function to create new variables into the surrounding scope. Consider the following example.

"use strict";
var a = 44;
eval("var a=3;")
console.log(a)

Output

44

As you can see in the output, the value of a did not change, i.e., the eval() function did not introduce a new variable. If we run the same code in non-strict mode, a new variable a will get created into the surrounding scope. Let’s see.

var a = 44;
eval("var a=3;")
console.log(a)

Output

3

The this keyword points to the object that invoked the function. In non-strict mode, if the function is not invoked on any object, the this keyword refers to the window object. In strict mode, however, it will not point to the window object but will be undefined.

"use strict";
function test(){
    console.log(this)
}
test()

Output

undefined

The words eval and arguments cannot be bound or used in an assignment in strict mode. Let’s see.

"use strict";
var eval = 3
console.log(eval)

Output

"use strict";
function arguments(){
    console.log("not   allowed")
}
arguments()

Output

Strict mode restricts us from using some identifiers that are likely to be used in the future versions of ECMAScript. So, you cannot use them since they are reserved words. Implements, Interface, Let, Package, Private, Protected, Public, Static, and Yield

"use strict";
function interface(){
    console.log("not allowed")
}
interface()

Output

"use strict";
var public = 45
console.log(public)

Output