BlogsDope image BlogsDope

Strict Mode in JavaScript

Nov. 17, 2020 JAVASCRIPT 246

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

how to use strict mode

"use strict"
var x = 30

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

Output

how to use strict mode with global scope

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

how to use strict mode with local scope

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

variable without declaration not allowed in strict mode

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

assigning undefined is not allowed in strict mode

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

var undefined = 30
console.log(undefined)

Output

undefined

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

Assignment to a non-writable property is also not allowed

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

assigning value to getter-only is not allowed

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

30

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

restriction on seal, freeze, etc methods in strict mode

Deleting an undeletable property

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

"use strict"
delete Object.prototype

Output

deletion of non-deletable property not allowed in strict mode

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

relisting of a variable is not allowed in strict mdoe

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

Octal syntax is not allowed in strict mode

"use strict"
var b = "\046"

Output

octal sequence is not allowed in strict mode

Setting properties on primitive values

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

"use strict"
true.x = "hi"

Output

Setting property on primitive type is not allowed in strict mode

“eval” and “arguments”

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

"use strict"
var eval = 3

Output

eval as argument name is not allowed in strict mode

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

var eval = 3
console.log(eval)

Output

3

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

with not allowed in strict mode

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

delete of variable is not allowed in strict mode

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

Output

delete of function is not allowed in strict mode

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

identifier as variable name is not allowed in strict mode

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

undefined

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

Output

use of this keyword in strict mode

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

inside eval: 40
outside eval: 20




Liked the post?
A computer science student having interest in web development. Well versed in Object Oriented Concepts, and its implementation in various projects. Strong grasp of various data structures and algorithms. Excellent problem solving skills.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).