JS Strict Mode

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JavaScript Use Strict

“Using strict”; Specifies that JavaScript code must be executed in “strict mode”.

 The “use strict” Directive

The “use strict” directive was new in ECMAScript version 5.

It is not a statement, but a literal expression, not considered important by earlier versions of JavaScript.

The aim of “use strict” is to define that the code should must be executed in “strict mode”.

Using strict mode, you cannot, for example, use undeclared variables.

Declaring Strict Mode

Strict mode is declared by adding “use strict”; to the starting of a script or a function.

Declaring at the starting of a script, it has global scope (all code in the script will execute in strict mode):

Example

<!DOCTYPE html>

<html>

<body>

<h2>With “use strict”:</h2>

<h3>Using a variable without declaring it, is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>

“use strict”;

x = 3.14;  // This will cause an error (x is not defined).

</script>

</body>

</html>

Output

With "use strict":

Using a variable without declaring it, is not allowed.

Activate debugging in your browser (F12) to see the error report.

Declaring Strict Mode

Strict mode is defined by adding “use strict”; to the beginning of a script or a function.

Declared at the beginning of a script, it has global scope (all code in the script will execute in strict mode):

Example

<!DOCTYPE html>

<html>

<body>

<h2>With “use strict”:</h2>

<h3>Using a variable without declaring it, is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>

“use strict”;

x = 3.14;  // This will cause an error (x is not defined).

</script>

</body>

</html>

Output

With "use strict":

Using a variable without declaring it, is not allowed.

Activate debugging in your browser (F12) to see the error report.

Global “use strict” declaration

Example

<!DOCTYPE html>

<html>

<body>

<h2>Global “use strict” declaration.</h2>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>

“use strict”;

myFunction();

function myFunction() {

  y = 3.14;   // This will cause an error (y is not defined)

}

</script>

</body>

</html>

Output

Global "use strict" declaration.

Activate debugging in your browser (F12) to see the error report.

Declared within a function, it has local scope (only the code within the function is in strict mode):

Example

<!DOCTYPE html>

<html>

<body>

<p>”use strict” in a function will only cause errors in that function.</p>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>

x = 3.14;    // This will not cause an error.

myFunction();

function myFunction() {

  “use strict”;

  y = 3.14;  // This will cause an error (y is not defined).

}

</script>

</body>

</html>

Output

"use strict" in a function will only cause errors in that function.

Activate debugging in your browser (F12) to see the error report.

The “use strict”

Syntax        

The syntax, for defining strict mode, was created to be compatible with older versions of JavaScript.

Compiling a numeric literal (4 + 5;) or a string literal (“John Doe”;) in a JavaScript program has no side effects. It simply compiles to a non existing variable and dies.

So “use strict”; only matters to new compilers that “understand” the meaning of it.

Why Strict Mode?

Strict mode makes it easy to write “secure” JavaScript.

Strict mode changes previously accepted “bad syntax” into real errors.

As an example, in normal JavaScript, mistyping a variable name when mistype creates a new global variable. In strict mode, this will create an error, making it impossible to accidentally create a global variable.

In normal JavaScript, a developer will not receive any error feedback assigning values to non-writable properties.

In strict mode, any assignment to a non-writable property, a getter-only property, a non-existing property, a non-existing variable, or a non-existing object, will throw an error.

Not Allowed in Strict Mode

Using a variable, without declaring it, is not allowed:

Example

<!DOCTYPE html>

<html>

<body>

<h2>With “use strict”:</h2>

<h3>Using a variable without declaring it, is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>

“use strict”;

x = 3.14;  // This will cause an error (x is not defined).

</script>

</body>

</html>

Output

With "use strict":

Using a variable without declaring it, is not allowed.

Activate debugging in your browser (F12) to see the error report.

Deleting a variable (or object) is not allowed.

Example

<!DOCTYPE html>

<html>

<body>

<h2>With “use strict”:</h2>

<h3>Deleting a variable (or object) is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>

“use strict”;

let x = 3.14;

delete x;     // This will cause an error

</script>

</body>

</html>

Output

With "use strict":

Deleting a variable (or object) is not allowed.

Activate debugging in your browser (F12) to see the error report.

Deleting a function is not allowed.

Example

<!DOCTYPE html>

<html>

<body>

<h2>With “use strict”:</h2>

<h3>Deleting a function is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>

“use strict”;

function x(p1, p2) {};

delete x;        // This will cause an error

</script>

</body>

</html>

Output

With "use strict":

Deleting a function is not allowed.

Activate debugging in your browser (F12) to see the error report.

Writing to a read-only property is not allowed:

Example

<!DOCTYPE html>

<html>

<body>

<h2>With “use strict”:</h2>

<h3>Writing to a read-only property is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>

“use strict”;

const obj = {};

Object.defineProperty(obj, “x”, {value:0, writable:false});

obj.x = 3.14;   // This will cause an error

</script>

</body>

</html>

Output

With "use strict":

Writing to a read-only property is not allowed.

Activate debugging in your browser (F12) to see the error report.

For security reasons, eval() is not allowed to create variables in the scope from which it was called:

Example

<!DOCTYPE html>

<html>

<body>

<h2>With “use strict”:</h2>

<h3>For security reasons, eval() is not allowed to create variables in the scope from which it was called.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>

“use strict”;

eval (“var x = 2”);

alert (x);      // This will cause an error

</script>

</body>

</html>

Output

use strict

The this keyword in functions behaves differently in strict mode.

The this keyword denotes to the object that called the function.

If the object is not specified, functions in strict mode returns undefined and functions in normal mode returns the global object (window):

Example

<!DOCTYPE html>

<html>

<body>

<h2>With “use strict”:</h2>

<h3>Inside functions, the “this” keyword is no longer the global object if not specified:</h3>

<script>

“use strict”;

function myFunction() {

  alert(this);

}

myFunction();

</script>

</body>

</html>

Output

use strict undefined