Strict Mode In JavaScript

Introduction

Strict mode in JavaScript is a modern way of writing the JavaScript code. This is a new feature in ECMAScript 5 that prevents most of the Javascript silent errors by changing them into throw errors.

What we will cover

How to use strict mode
The benefits of strict mode
Different levels of using the strict mode

How to use strict mode

“use strict” is the statement that instructs the browser to use the strict mode. Let 's check the difference between Normal mode and Strict mode with an example.

Default Mode

Consider the below code.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
</head>
<body>
<label id="message"></label>
<script>
var foo="hello";
x=10;
function baz()
{
foo="Hello from function";
bam="Hello from bam"
document.getElementById('message').innerHTML=bam;
}
baz();
</script>
</body>
</html>

As per the code in default mode, the function baz will assign the bam identifier value to the inner HTML of the label. You can see the result of executing this code as below.

figure 1: In Default mode

Even though the variable bam is not declared, the value can be initialized to the variable which is somewhat annoying in the normal identical way of writing JavaScript.

Strict Mode

Consider the below code.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
</head>
<body>
<label id="message"></label>
<script>
'use strict';
var foo="hello";
x=10;
function baz()
{
foo="Hello from function";
bam="Hello from bam"
document.getElementById('message').innerHTML=bam;
}
baz();
</script>
</body>
</html>

In "strict" mode, you will get an error saying bam is undefined because bam is not declared anywhere in the code.

figure 2: In strict mode

Benefits of strict mode

It makes it easier to write a safe and secure JavaScript.
It fixes the mistakes that sometimes make it difficult for JavaScript engines to perform in an optimized way.
In JavaScript, most of the time, we don't get any error feedback while assigning the value for the read-only property. But, by using the "strict" mode, a developer always gets error feedback while committing a mistake.

Different levels of using the strict mode

Script mode for the entire script
Script mode for scope

Script mode for an entire script

While declaring the “use strict” statement, it will apply the strict mode on the entire script.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
</head>
<body>
<label id="message"></label>
<script>
'use strict';
var foo="hello";
x=10;
function baz()
{
foo="Hello from function";
bam="Hello from bam"
document.getElementById('message').innerHTML=bam;
}
baz();
</script>
</body>
</html>

From the above code, you will get an error saying x is undefined. Here, the "strict" mode is applied to the entire script.

Script mode for scope

We can use the "strict" mode at function level as well.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
</head>
<body>
<label id="message"></label>
<script>
var foo="hello";
x=10;
function baz()
{
'use strict';
foo="Hello from function";
bam="Hello from bam"
document.getElementById('message').innerHTML=bam;
}
baz();
</script>
</body>
</html>

From the above code, you will get an error stating bam is undefined. Here, the "strict" mode is applied only to the baz() level.

Conclusion

We have seen the usage and benefits of strict mode which is a modern way of writing the JavaScript and we also discussed the differences between normal mode and the strict mode. Not only this, we went through the examples to learn how to write better and safer code in JavaScript using the strict mode.