JS Basics: Understanding 'strict mode'.

Yogini Bende - Feb 2 '21 - - Dev Community

Hi folks,

Many of us have seen use strict at the start of javascript files. In this article, we will be covering javascript strict mode and non-strict mode also informally called sloppy mode.

JavaScript's strict mode, introduced in ECMAScript 5, is a way to opt into a restricted variant of JavaScript. As per MDN documentation, using strict mode will make many changes in the general javascript semantics -

  1. It eliminates some JavaScript silent errors by changing them to throw errors.
  2. Fixes mistakes that make it difficult for JavaScript engines to perform optimisations: strict mode code can sometimes be made to run faster than identical code that's not strict mode.
  3. Prohibits some syntax likely to be defined in future versions of ECMAScript.

Strict mode in javascript will tighten the rules for some behaviour. Strict mode changes otherwise accepted bad syntax into real errors. It will always keep your code secure. To use strict mode, you can make use of the ‘use strict’ directive.

Using strict mode -

You can either apply strict mode to the entire JS script or to the particular function. You cannot use strict mode to any block enclosed in {} braces. To apply strict mode to entire JS file, ‘use strict’ directive is called at the top of the file.

‘Use strict’;
var abc;
function print() { 
// ... remaining file
// ...
Enter fullscreen mode Exit fullscreen mode

If you add the ‘use strict’ directive at the start of the function, then the function will run in the strict mode.

function helloWorld() {
    ‘use strict’;
    console.log(“Hello world! I am a strict mode function”);
}
Enter fullscreen mode Exit fullscreen mode

For javascript modules, the strict mode is enabled by default.

function Jsmodule() {
    // because this is a module, its strict by default
}
export default Jsmodule;
Enter fullscreen mode Exit fullscreen mode

Errors in strict mode -

Strict mode makes it impossible to accidentally create global variables.

function helloWorld() {
    ‘use strict’;
    x = 100;
    console.log(“Hello world! I am a strict mode function and x = ”, x);
}
Enter fullscreen mode Exit fullscreen mode

The above function will throw reference error considering the variable is not declared and it assumes you are trying to refer to some other variable. In non-strict mode, this would have led to a new variable declaration without giving an error.

In strict mode, deleting a variable is not allowed opposite to non-strict mode. Also, in strict mode we cannot assign value to non writable or getter property of an object. For non-strict mode javascript, this will end up just by creating a warning, but strict mode does not accept that.

In non-strict mode, generally you can create functions who have parameters with the same name. But strict mode throws a syntax error for that, as it requires every parameter to have a different name.

In browsers it is not possible to reference the window object through this keyword inside a strict mode. The this keyword in functions behaves differently in strict mode. this keyword always refers to the object that called the function. If the object is not specified, functions in strict mode will return undefined and functions in normal mode will return the global object (window).

Strict mode also makes impossible to easily access the most recently called function. These features of strict mode have many security advantages.

Modern JavaScript supports classes and modules – advanced language structures, that enable use strict automatically. So we don’t need to add the use strict directive, if we use them.

Because strict mode has many security advantages and it can eliminate the errors at a very early level, many people prefer to work in a strict mode.

Do share your comments/feedback about the article.

You can also connect with me on Twitter or buy me a coffee if you like my articles.

Keep coding :)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .