Home >> javascript >> JS Strict Mode

JS Strict Mode

The strict mode was first introduced in ECMAScript 5 (ES5). The strict mode is a semantically stricter or restricted version of JavaScript language that produces errors for those mistakes that are handled silently otherwise. For instance, in a non-strict mode when you initialize a variable without declaring it while using the var keyword (e.g x = 5;), the JavaScript interpreter will assume you were referencing a global variable and in cases where no such variable existed, it will automatically create one.

However, the deprecated features may also generate errors in strict mode. therefore, the strict mode improves security, reduces bugs, and overall performance of your application.

Enabling Strict Mode

In other to make the strict mode active or enabled, you just need to add the string "use strict" at the beginning of your script, as shown in the example below:

"use strict";

// All your code goes here
x = 5; // ReferenceError: x is not defined
console.log(x);

As shown above, when you add the "use strict" directive as the first line of your JavaScript program, strict mode applies to the entire script written. However, the strict mode can be turned on only within the function. This is shown below:

x = 5;
console.log(x); // 5

function sayHello() {
    "use strict";
    str = "Hello World!"; // ReferenceError: str is not defined
    console.log(str);
}
sayHello();

Note: The "use strict" directive is only recognized in the early part of a script or a function. The 'use strict' directive is supported by all modern browser support, except Internet Explorer 9 and lower versions. In addition, the browsers that don't support the "use strict" directive silently ignore it and parse the JavaScript in non-strict mode.

General Restrictions in Strict Mode

The Strict mode changes both its syntax and runtime behavior. The sections will highlight the general restrictions that are enforced in the strict mode:

Undeclared Variables are Not Allowed

In strict mode, all variables must be declared. However, when you assign a value to an identifier that is not a declared variable, a ReferenceError will be thrown.

"use strict";

function doSomething() {
    msg = "Hi, there!"; // ReferenceError: msg is not defined
    return msg;
}
console.log(doSomething());

Deleting a Variable or a Function is Not Allowed

In strict mode, when you try to delete a variable or a function, a syntax error will be returned. while, for a non-strict mode, such an attempt fails silently and the delete expression evaluates to false.

"use strict";

var person = {name: "Peter", age: 28};
delete person; // SyntaxError

Also, when you try to delete a function in the strict mode you will get a syntax error. This is shown below:

"use strict";

function sum(a, b) {
    return a + b;
}
delete sum; // SyntaxError

Duplicating a Parameter Name is Not Allowed

In strict mode, if a function declaration has two or more parameters with the same name, a syntax error will be thrown. While in non-strict mode, no error occurs.

"use strict";

function square(a, a) { // SyntaxError
    return a * a;
}
console.log(square(2, 2));

The eval Method Cannot Alter Scope

For security reasons, In strict mode, code passed to eval() cannot declare/modify variables or define functions in the surrounding scope as it can in non-strict mode.

"use strict";

eval("var x = 5;");
console.log(x); // ReferenceError: x is not defined

The eval and arguments Cannot be Used as Identifiers

In strict mode, the names eval and arguments are treated like keywords, so they cannot be used as variable names, function names, function parameter names, etc.

"use strict";

var eval = 10; // SyntaxError
console.log(eval);

The with Statement is Not Allowed

The with statement is not allowed in strict mode. The ‘with statement’ usually adds the properties and methods of the object to the current scope. Therefore, the statements nested inside the ‘with statement’ can invoke the properties and methods of the object directly even without referencing it.

"use strict";

// Without with statement
var radius1 = 5;
var area1 = Math.PI * radius1 * radius1;

// Using with statement
var radius2 = 5;
with(Math) { // SyntaxError
    var area2 = PI * radius2 * radius2;
}

Writing to a Read-only Property is Not Allowed

Assigning value to a non-writable property, in strict mode, a ‘get-only’ property or a non-existing property will throw an error. However, in a non-strict mode, these approaches fail silently.

"use strict";

var person = {name: "Peter", age: 28};

Object.defineProperty(person, "gender", {value: "male", writable: false});
person.gender = "female"; // TypeError

Adding a New Property to a Non-extensible Object is Not Allowed

Attempts to create new properties on non-extensible or non-existing objects will also throw an error, in strict mode. However, these attempts fail silently.

"use strict";

var person = {name: "Peter", age: 28};

console.log(Object.isExtensible(person)); // true
Object.freeze(person); // lock down the person object
console.log(Object.isExtensible(person)); // false
person.gender = "male"; // TypeError

Octal Numbers are Not Allowed

In strict mode, octal numbers ( i.e numbers prefixed with a zero e.g. 010, 0377) are not permitted. But, it is supported in a non-strict mode in all browsers. In ES6 octal numbers are supported by prefixing a number with 0o (i.e 0o10, 0o377, etc).

"use strict";

var x = 010; // SyntaxError
console.log(parseInt(x));

From the examples above, you saw how a strict mode can help you prevent making common mistakes that often go unnoticed while writing a JavaScript program.

Keywords Reserved for Future are Not Allowed

From previous tutorials, the reserved words cannot be used as an identifier (i.e variable names, function names, and loop labels) in a JavaScript program. More so, the strict mode also sets restrictions on the uses of those keywords that are reserved for the future.

However, under the latest ECMAScript 6 (or ES6) standards, the keywords are reserved keywords. When they are found in strict mode code: await, implement, package, private, public, static, and interface. But, for optimal compatibility, avoid using the reserved keywords as variable names or function names in your program.

Tip: Reserved words, or keywords, are special words that are part of the JavaScript language syntax (e.g., var, if, for, function, etc).

Please, see the JavaScript reserved keywords reference for a complete list of all reserved words in JavaScript.

-Advertisement-