JavaScript Strict Mode. Learn Everything You Need To Know

Last time we talked about JavaScript closures, you can find this article here. Now, in this tutorial we will talk about JavaScript strict mode, what it is and how you can execute your code in strict mode in JavaScript.

What Is JavaScript Strict Mode

The strict mode was introduced in ES5. It is a stricter version of JavaScript language that produces errors for those mistakes that are handled silently otherwise. Also, features that are deprecated may also generate errors in strict mode. In another words – strict mode reduces bugs, improves security and overall performance of your application.

How To Enable Strict Mode In JavaScript

To enable strict mode all you need to do is add the “use strict” at the beginning of your script. Here’s how it all looks:

"use strict";

x = 1; // ReferenceError: x is not defined
console.log(x);

If you add the “use strict” as the first line of your script, strict mode applies to the entire script. But you can use strict mode inside a function and not an entire script. Here’s an example:

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

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

The “use strict” directive is only recognized at the beginning of a script or a function. All modern browsers support “use strict” directive.

General Restrictions In JavaScript Strict Mode

Strict mode changes both syntax and runtime behavior.

Undeclared Variables Are Not Allowed In JavaScript Strict Mode

As you know, in strict mode, all variables must be declared. If you assign a value to an identifier that is not a declared variable, you will get ReferenceError. Loot at the example:

"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 JavaScript Strict Mode

In strict mode if you try to delete a variable or function, you’ll get syntax error. While in non strict mode you simply would get false.

"use strict";

let person = {name: "Paul", age: 20};
delete person; // SyntaxError

When you try to delete a function in strict mode you will get an syntax error as well:

"use strict";

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

Duplicating A Parameter Name Is Not Allowed In JavaScript Strict Mode

In strict mode, you will get a syntax error, if a function declaration has two or more parameters with the same name. In non-strict mode, no error occurs. Here’s an example:

"use strict";

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

The eval Method Can’t Alter Scope In JavaScript Strict Mode

In strict mode, for security reasons, code passed to eval() cannot declare or modify variables or define functions in the surrounding scope like in non-strict mode. Here’s an example for you:

"use strict";

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

The eval And Arguments Can’t Be Used As Identifiers In JavaScript Strict Mode

In strict mode, eval and arguments are treated like keywords, they can’t be used as variable names, function names, or as function parameter names etc. Here’s an example:

"use strict";

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

The with Statement Is Not Allowed In JavaScript Strict Mode

In strict mode, the with statement is not allowed. The with statement adds the properties and methods of the object to the current scope. So, the statements nested inside the with statement can call the properties and methods of the object directly without referring them.

"use strict";

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

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

Writing To A Read-only Property Is Not Allowed In JavaScript Strict Mode

In strict mode, assigning value to a non-writable property, a get-only property or a non-existing property will give you an error. In non-strict mode, these attempts fail silently. Here’s how it looks:

"use strict";

let person = {name: "Paul", age: 20};

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

Adding A New Property To A Non-extensible Object Is Not Allowed In JavaScript Strict Mode

In strict mode, attempts to create new properties on non-extensible or non-existing objects will also give you an error. But in non-strict mode, these attempts fail silently.

"use strict";

let person = {name: "Paul", age: 20};

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 JavaScript Strict Mode

In strict mode, octal numbers are not allowed. Worth noticing that it is supported in all browsers in non-strict mode and in ES6 octal numbers are supported by prefixing a number with 0o i.e. 0o10, 0o377 etc.

"use strict";

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

Keywords Reserved For Future Are Not Allowed In JavaScript Strict Mode

Since ES6 standards, these keywords are reserved keywords when they are found in strict mode code: await, implements, interface, package, private, protected, public, and static. You should avoid using the reserved keywords as variable names or function names in your program.