Learnitweb

strict mode in JavaScript

JavaScript was developed over the years and several versions came but backward compatibility was maintained. The downside of this approach is that all imperfect language constructs remained there in language over the years. In ECMAScript 5, there were some major changes done to the existing language features. To maintain backward compatibility, these features are off by default. You have to explicitly enable these features and this you can do by using strict mode.

Please note that not all browsers support strict mode. Browsers not supporting strict mode will execute strict mode code with different behavior than a browser which does support strict mode. It is also important to note that both strict mode and non strict mode codes can coexist.

Strict mode changes the semantics of the normal JavaScript semantics:

  • Strict mode eliminates some silent errors by changing them to throw errors.
  • Strict mode fixes mistakes that make it difficult for JavaScript engines to perform optimizations. Strict mode code can sometimes be made to run faster than identical code that’s not strict mode.
  • Strict mode prohibits some syntax likely to be defined in future versions of ECMAScript.

Where can strict mode be applied

  • Scripts
  • Modules (Introduced in ECMAScript 2015. By default entire content of JavaScript modules is in strict mode)
  • Function code
  • eval code
  • strings passed to WindowTimers.setTimeout()
  • event handler attributes

Where strict mode can not be applied

Block statements enclosed in curly ({}) braces. Even if you apply, it means nothing.

How to invoke strict mode

To invoke strict mode for an entire script or function, put the exact statement “use strict”; (or ‘use strict’;) before any other statements.

// Example of invoking strict mode in entire script
'use strict';
var msg = 'this is first message of strict';

function strictFunction() {
  // Function-level strict mode invoked
  'use strict';
  console.log("inside strict mode function");
}
function notStrictFunction() { 
	return "inside non strict mode function"; 
}

Only comments may appear above “use strict”.

Strict mode for modules

The entire contents of JavaScript modules (introduced in ECMAScript 2015) are automatically in strict mode. There is no need to write ‘use strict’ to invoke strict mode in modules.

There’s no way to undo ‘use strict’

Once you enter strict mode, there is no way to go back to non strict mode.

strict mode in Browser console

Browers’ console doesn’t use strict by default.

However for testing purpose, if you want to write and test your code, you can use ‘use strict’ in console. It works fine in most browsers like Firefox and Chrome.

You can use to input multiple lines of code.

'use strict'; <Shift+Enter>
console.log('example of strict mode in console')
<Enter to execute code>

It works in most browsers, namely Firefox and Chrome.

How strict mode changes normal JavaScript code

Strict mode changes both syntax and runtime behavior. This can be understood with the help of following examples:

Variable and Object declaration is required in strict mode

strict mode makes it impossible to accidentally create global variables. Assignments, which would accidentally create global variables, throw an error in strict mode.

'use strict';
x = 13;       // This will cause an error because x is not declared

"use strict";
x = {length:5, width:20};      // This will cause an error as x is not declared

Duplicate property names are not allowed in strict mode

'use strict';
var obj = { prop: 1, prop: 2 }; // This results in syntax error

Duplicate argument names are not allowed in strict mode

function sum(a, a) { // This results in syntax error
  'use strict';
  return a + a; 
}

setting properties on primitive values is not allowed in strict mode

'use strict';
(10).x='hello'; //Throws TypeError

Octal numeric literals are not allowed in strict mode

"use strict";
var x = 010;             // This will cause an error 
var y = 0o10; 			// Right way to declare octal numeric literal in ES2015

Assignments to non-writable global fails in strict mode

'use strict';
var undefined = 10; // throws a TypeError as undefined is a non-writable global
var Infinity = 10; // throws a TypeError as Infinity is a non-writable global

Assignments to non-writable property fails in strict mode

'use strict';
var obj = {};
Object.defineProperty(obj, 'prop', { value: 10, writable: false });
objp.prop = 9; // throws a TypeError

Assignment to a getter-only property fails in strict mode

'use strict';
var obj = { get prop() { return 10; } };
obj.prop = 5; // throws a TypeError

Deletion of undeletable properties fails in strict mode

'use strict';
delete Object.prototype; // throws a TypeError

Deletion of variables is not allowed in strict mode

'use strict';
var x;
delete x; // This will cause a syntax error

eval cannot be used as a variable

"use strict";
var eval = 10;         // This will cause an error

‘arguments’ cannot be used as a variable

"use strict";
var arguments = 10;    // This will cause an error

arguments.callee is not supported in strict mode

'use strict';
var func = function() { return arguments.callee; };
func(); // throws a TypeError

Assignment to a new property on a non-extensible object fails in strict mode

'use strict';
var fixed = {};
Object.preventExtensions(fixed);
fixed.newProp = 'newValue'; // throws a TypeError

with is not allowed in strict mode

"use strict";
with (Math){x = sin(60)}; // This will cause an error 

eval() is not allowed to create variables in the enclosing scope

"use strict";
eval ("var x = 10");
alert (x);             // This will cause an error 

this if unspecified, will be undefined in strict mode

'use strict';
function test(){
console.log(this); //undefined, without strict mode this refers to window object
}

caller and arguments properties of function name can not set or retrieved in strict mode

function test(){
	'use strict';
	test.caller; //causes Type error
	test.arguments; //causes Type Error
}

reserved keywords in strict mode

In strict mode variable and arguments can not have following names:

  • implements
  • interface
  • let
  • package
  • private
  • protected
  • public
  • static
  • yield

Note: You should avoid concatenation of strict and non-strict script codes. If you need to do so, it is better to do it on the basis of functions.