JavaScript Strict mode (use strict)

JavaScript strict mode introduces in ECMAScript 5. JavaScript Strict mode ("use strict") is a way of checking error in your code and executed in "strict mode".

The main purpose of strict mode is to check more deeply JavaScript code, and remove the vulnerability of your code.

JavaScript Strict mode

How to enable strict mode

You have to add "use strict"; at the top of your JavaScript code. This type declaration you can say string directive.

"use strict";

Scope of strict mode is current context of your code.

If you declare strict mode in the function, scope of strict mode is only that function.

Take a look of following example, strict mode enables in function. In strict mode var keyword must be required.

function myFun(){
        "use strict";
        var var1 = 15;            // works
        document.writeln(var1);
        
        // Remove below comments and run it again it will throw syntax error
        // var2 = 20;             // throw the syntax error
}

// Outside of strict mode scope
var3 = 10;                        // works              
document.writeln(var3);

myFun();

Run it...   »

If you want to enable strict mode in all the code of your program (globally), you need to declare the strict mode beginning of your code (outside of a function).

"use strict";
var var1 = 10;                  // works              
document.writeln(var1);

function myFun(){
        "use strict";
        var var2 = 15;          // works
        document.writeln(var2);
        
}
myFun();

// Remove below comments and run it again it will throw syntax error
// var3 = 10;                   // undefined              
document.writeln(var3);

Run it...   »

You have to define strict mode within an anonymous self-invoked function, This way you can create good JavaScript libraries in a strict manner without affecting outside code.

Already, a number of existing JavaScript library has been used this technique to easily enable strict mode.

(function(){
    "use strict";

    // strict codes

})();

// Out of strict scope, non-strict codes

What are the changes after enabling JavaScript strict mode?

Variables

var keyword

  1. Prevent: Can't use a variable without declaring.
  2. Error: Without var keyword it will be thrown variable undefined.
"use strict";
var var1 = 4;

Prevent to deletion

  1. Prevent: variable deletion is not allowed in strict mode
var var1 = 10;
delete var1;
document.writeln(var1);

Object properties

Prevent: You can't reassign read only property.

Here is the Object.defineProperties() method define new property or modify existing property on an object.

Prevent to writable

You can't modify any existing property whose has writable attribute value false. Default writable attribute values, false.

var obj = {};
Object.defineProperties(obj, {
    "pro1": {
        value: 10,
        writable: true          // default false
    },
    "pro2": {
        value: "Hello World!",
        writable: false
    }
});
console.log( obj );             // pro1: 10, pro2: "Hello World!"

obj.pro1 = 20;                  // works!, modify successfully
obj.pro2 = "Very nice!";        // not works!, prevent to modify
console.log( obj );             // pro1: 20, pro2: "Hello World!"

Run it...   »

Prevent to delete

You can't delete any existing property whose has configurable attribute value false. Default configurable attributes values, false.

var obj = {};
Object.defineProperties(obj, {
    "pro1": {
        value: 10,
        configurable: true    // default false
    },
    "pro2": {
        value: "Hello World!",
        configurable: false
    }
});
console.log( obj );           // pro1: 10, pro2: "Hello World!"

delete obj.pro1;              // works!, delete successfully
delete obj.pro2 ;             // no works!, preven to deletion
console.log( obj );           // pro2: "Hello World!"

Run it...   »

Prevent to extend

Object.preventExtensions() method prevents you to extend new properties on existing object.

var obj = {};
Object.defineProperties(obj, {
    "pro1": {
        value: 10
    },
});
console.log( obj );               // pro1: 10

obj.name = "Opal Kole";           // works!, extended
console.log( obj );               // name: "Opal Kole", pro1: 10

Object.preventExtensions( obj );
obj.address = "63 street Ct.";    // not works!, prevent to extend
console.log( obj );               // name: "Opal Kole", pro1: 10

Run it...   »

Function parameter names

  1. Prevent: You can't allow to duplicate argument name in strict mode.
  2. Error: SyntaxError, Strict mode function may not have duplicate parameter names.

Non-strict mode

function fun1(arg1, arg1){
    return arg1 + arg1;
}

result = fun1(5, 10);
document.writeln( result );

Run it...   »

Strict mode

"use strict";
function fun1(arg1, arg1){
    return arg1 + arg1;
}

result = fun1(5, 10);
document.writeln( result );

Run it...   »

with statement

with statement allow you to use an object with in the scope.

  1. Prevent: You can't use with statement in strict mode.
  2. Error: SyntaxError, Strict mode code may not include a with statement.

Non-strict mode

var val = 4, radius, root, power;
with (Math) {
  radius = PI * val * val;
  root = sqrt(val);
  power = pow(val, 3);
}

document.writeln("Radius: " + radius);
document.writeln("Square root: " + root);
document.writeln("Power: " + power);

Run it...   »

Strict mode

"use strict";
var val = 4, radius, root, power;
with (Math) {
    radius = PI * val * val;
    root = sqrt(val);
    power = pow(val, 3);
}

document.writeln("Radius: " + radius);
document.writeln("Square root: " + root);
document.writeln("Power: " + power);

Run it...   »

eval is no longer identifier

You can not use eval keyword in strict mode. You can't longer use the eval keyword as an identifier.

Non-strict mode

eval = 10;
document.writeln(eval);
eval = "Hello world!";
document.writeln(eval);

function myFun(eval, eval1){
    document.writeln(eval + eval1);
}

eval = "How are you? ";
eval1 = "Thank you";
myFun(eval, eval1);

Run it...   »

Strict mode

"use strict";
eval = 10;
document.writeln(eval);
eval = "Hello world!";
document.writeln(eval);

function myFun(eval, eval1){
    document.writeln(eval + eval1);
}

eval = "How are you? ";
eval1 = "Thank you";
myFun(eval, eval1);

Run it...   »

Same as arguments is also no longer used as identifiers in strict mode.

Octals literals

  1. Prevent: You can't store an octal value in strict mode.
  2. Error: SyntaxError, Octal literals are not allowed in strict mode.

Non-strict mode

var var1 = 0644;
document.writeln( var1 );

Run it...   »

Strict mode

"use strict";
var var1 = 0644;        // SyntaxError: Octal literals are not allowed in strict mode.
document.writeln( var1 );

Run it...   »

You can store an octal value as string. And parse into parseInt() method to convert that value into octal or hexadecimal numbers.

"use strict";
var var1 = '0644';
var octalval = parseInt(var1, 8);
var hexadecimalval = parseInt(var1, 16);
document.writeln( octalval );
document.writeln( hexadecimalval );

Run it...   »

As per ECMAScript 6, you'll be specifies 'o' mean Ocal and 'x' mean hexadecimal characters,

"use strict";
var octalval = 0o644;
document.writeln( octalval );

var hexadecimalval = 0x644;
document.writeln( hexadecimalval );

Run it...   »

Scope of this keyword

In Non strict mode this keyword scope becomes a global, Where as after enabling strict mode this keyword scope only those functions so this will return undefined.

Non-strict mode

function myFun(){
    console.log(this);
}
myFun();
console.log(this);

Run it...   »

Strict mode

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

Run it...   »