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.
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.
The Strict mode changes both its syntax and runtime behavior. The sections will highlight the general restrictions that are enforced in the strict mode:
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());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; // SyntaxErrorAlso, 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; // SyntaxErrorIn 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));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 definedIn 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 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;
} 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"; // TypeErrorAttempts 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"; // TypeErrorIn 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.
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.