Strict Mode in JavaScript

The Strict mode was introduced in ECMAScript 2015 to make JavaScript a bit more restricted. As you might know, unlike other languages like C or Java, JavaScript is flexible. It ignores many programmers’ mistakes and makes assumptions about them. For example, normal JavaScript does not throw an error when a variable is referenced without its declaration, which can lead to unexpected problems in your code in the future if you have mistyped that variable name. While on the one hand, strict mode eliminates silent errors by throwing errors. On the other hand, it also fixes some mistakes and allows the JavaScript engine to perform optimizations. Therefore, code written in strict mode can be more efficient than code written in sloppy (non-strict) mode.

How to use Strict Mode

To use strict mode in your code, use the statement “use strict” or ‘use strict’ at the top of your program, i.e., before any other statement. This will make the whole code run in the restricted mode and thus has a global scope.

"use strict"
x = 30

Output

"use strict"
var x = 30

function f1(){
	y = 30 
}
f1()

Output

To run a specific function in the restricted mode, put the same statement "use strict" before any other statement in that function, and then it will have local or function scope.

x = 30 // this will not throw error

function f1(){
	"use strict"
	y = 30 // this will throw error

}
f1()

Output

Not Allowed in Strict Mode

Let’s now go ahead and see the cases where an error is thrown in strict mode.

Using variable without declaration

In strict mode, using a variable without its declaration is not allowed, and it throws a reference error, i.e.,

"use strict"
x = 30

Output

As already mentioned, this does not allow us to use accidentally typed variables.

Assigning values to NaN or undefined

Assigning values to NaN or undefined throw TypeError because they are read-only variables in the global scope, i.e.,

"use strict"
var undefined = 30

Output

In the sloppy mode, this statement would have done nothing, i.e.,

var undefined = 30
console.log(undefined)

Output

Assignment to a non-writable property

Assignment to a non-writable property is also not allowed. For example,

"use strict"
var obj = {}
Object.defineProperty(obj, 'a', {value:30, writable:false})
obj.a = 45

Output

Assigning a value to a getter-only property

Similarly, assigning value to a getter-only property throws a TypeError.

"use strict"
var obj = {
	a: 30,
	get x(){
		return this.a;
	}
}
obj.x = 45

Output

However, in both the above cases, normal JavaScript would have ignored the assignments, and the values would not have changed, i.e.,

var obj = {
	a: 30,
	get x(){
		return this.a;
	}
}
obj.x = 45
console.log(obj.x)

Output

Restriction for methods like seal, freeze, etc.

Methods like Object.seal(), Object.freeze() and Object.preventExtensions() prevent to make changes like adding a new property to an object or deleting a property. The strict mode throws a TypeError on doing so. However, in the sloppy mode, nothing would have happened.

"use strict"
var obj = {
	a: 30,
}
Object.freeze(obj)
obj.x = 35

Output

Deleting an undeletable property

Deleting an undeletable property also throws a TypeError, i.e., 

"use strict"
delete Object.prototype

Output

Relisting a variable in the parameter list of a function

Relisting a variable in the parameter list of a function throws a syntax error. However, in the normal JavaScript, the last listed value of the parameter would have been used, and this does not make the previous values inaccessible as they can be accessed through arguments[i]. 

"use strict"
function f1(a, a)
{
	return a
}

Output

Octal syntax

Strict mode does not allow octal syntax, i.e., prefixing the octal numeric literal with zero or octal escape sequences throws a syntax error. Prefix the octal number with “0o” instead.

"use strict"
var a = 010

Output

"use strict"
var b = "\046"

Output

Setting properties on primitive values

Setting properties on primitive values lead to TypeError. Let’s see.

"use strict"
true.x = "hi"

Output

“eval” and “arguments”

“eval” and “arguments” cannot be used as variable names.

"use strict"
var eval = 3

Output

However, in non-strict mode, it is allowed, i.e.,

var eval = 3
console.log(eval)

Output

Using a with statement

Using a with statement in the strict mode leads to a syntax error, i.e.,

"use strict"
var obj = {
	a:10,
	b:20
}
with (obj){
	a=45
}

Output

Prohibiting the use of with statement helps in the optimization of code.

Deleting variables and functions

Deleting variables and functions in strict mode is not allowed. Let’s see.

"use strict"
var x = 2
delete x

Output

"use strict"
function x(){
	return 10
}
delete x

Output

Identifiers as variable name

To make the transitions to newer versions of ECMAScript easier, strict mode restricts the use of some identifiers such as implements, interface, let, package, private, protected, public, static, and yield. Therefore, you cannot name variables with these keywords.

"use strict"
var protected = "not allowed"

Output

this

The keyword this performs a bit differently in the strict mode. In the strict mode, if the function is not called on any object, this returns undefined. However, in the sloppy mode, it returns the Window object. Let’s see.

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

Output

function f1(){
	console.log(this)
}
f1()

Output

Scope of variable in eval

In the strict mode, the scope of the variables created inside the eval() is limited to eval() only, i.e., it does not introduce new variables or overwrite existing variables into the surrounding or the global scope. Let’s see.

"use strict"
var x = 20;
var evalExpression = eval("var x = 40; console.log('inside eval: ' + x)");
console.log('outiside eval: ' + x)

Output