How Strict Mode works in JavaScript

Learn how Strict mode in JavaScript works. The Strict has different semantics that the non-strict JavaScript code. It provides the safety net to the developers and help them in avoiding mistakes in the programs. Learn with hands-on examples in this video.

Code

// Avoid Making Mistakes
// An attempt to create a variable in the global object

"use strict" // try with and without this line
a = 2;
console.log(a)

// Qualifying this in strict mode
"use strict" // try with and without this line
function whoIsThis () {
    console.log(this === global)
}
whoIsThis()

// Silent About Error to Throwing Error
// Deleting a Variable
"use strict" // try with and without this line
let b = 2;
console.log(b);
delete b;

// Deleting a Function
"use strict" // try with and without this line
function echo (me) {
    console.log(me)
}
echo("bonsaiilabs")
delete(echo)

// Deleting an argument of a Function
"use strict" // try with and without this line
function echo (me) {
    delete me
    console.log(me)
}
echo("bonsaiilabs")
delete(echo)

// Deleting the property of an Object
"use strict" // try with and without this line

let ironMan = {}
Object.defineProperty(ironMan, "name", {
    value: "Tony Stark",
    enumerable: true,
    configurable: false // also the default value
})

console.log(ironMan)

delete ironMan.name
console.log(ironMan)

Full Transcript

0:00 Hey, it's Harit Himanshu from bonsaiilabs. Welcome to the series on JavaScript. Today, in this video you will learn about the strict mode in JavaScript. The strict mode is an opt in way to use a restricted version of JavaScript. It isn't just a subset of JavaScript, rather than it has different behavior from the normal JavaScript code. So the browsers supporting strict mode code will behave differently from the browsers that don't. Also, the strict mode code and the non strict code mode can coexist at the same time. So if you're not using the strict mode, you can still start using the strict variant in some parts and refactor eventually to use strict mode in the entire JavaScript file. But what strict mode good for, why shall I as developer use it? Strict mode helps in two ways. It helps us as developers avoid making mistakes, which we don't intend to.

0:50 I will show you examples of these in just a moment and it stops from being silent about the error to throwing them, which helps programmer to handle the issues in the code base. We will also see examples about this in a moment. Now, there are a few ways to enable the strict mode. The first way is by adding a string containing use strict at the top of the file. Just by writing this now, the entire JavaScript file will be evaluated in the strict mode code. The other way to enable the strict mode code is inside the function. This way only the JavaScript code inside the function will be evaluated in the strict mode. We should always strive to have consistency in our code base, so we should either enable strict mode in all the code base or not. However, if you're refactoring the code base from not a strict mode to a strict mode, introducing the strict mode slowly in the second approach helps you manage the change in an organized manner.

1:44 Also, if you are using ESX and above syntax of JavaScript in your code and making use of export, import or class directive, then you are already making use of strict mode code by default. If you read the ECMAScript spec, you can confirm this, by reading the section of the strict mode code. And at this time all the major browsers are support strict mode evaluation of JavaScript. Okay, so now that we know what strict mode does, how to enable it and that it is available on the browsers, why not we write some code to see how strict mode code differs from the non strict ones. This will help us assert our understanding that strict mode is a wonderful thing for us as developers. Let's create a variable called a equals two and try to print that on the console. Once we do that, we see the value of two appeared on the console.

2:34 Now what if we use that in the strict mode? So it will say use strict as the top of the line and run it again and as you see now it failed saying that a is not defined. So we are using the variable a without defining it in the first place. Now let's try another example. Let's create a function called who is this? And the only thing that function does it checks if the this inside the function matches the global this. We execute this function to see what the value is and we get the value of true. Now let's enable the strict mode and see what the value we get now. As we execute, we get the value of false. This is because in the plain function calls in the strict mode, the global objects are not qualified as the reference to this inside the function. Now let's try another example and this time let's create a variable called b equals two and we will do a console dot log of b and then we will try to delete the variable B.

3:36 And then we've run it, we would see it still sees two, so does not deleted B. Now let's run the same thing in the strict mode. Once we run, we will see that the error has popped up. This is because the strict mode does not allowed deleting of the plain names. Let's try another example. This time let's write a function called echo, with a parameter called me and we are going to print that parameter onto the console. Next, we are going to call the function with an argument called bonsaiilabs. After that we will try to delete the function called echo. Now let's run it. Once we run, you see that bonsaiilabs has been printed on the console but no error. Let's try to run the same function in the strict mode. So we called the use strict and run it. And now as you see, the error has popped up.

4:24 So the deleting of the functions in the strict mode is also not allowed. Let's try another example. This time let's try to delete the parameter me and run it without the strict mode and as we run we see bonsaiilabs printed to console but no issues. Now let's try to run the same thing with the strict mode on. So we'll write use strict and then run it. And as you see, it popped up the error because deleting of the parameters in the strict mode is not allowed. Let's run another example. This time, let's create an object called ironMan and we will add a new property with object.defineProperty on ironMan object. We'll call the property name and we'll add descriptive properties to the object. We'll add a value of Tony stark. We will make this property and an enumerable property so that we can get the values and for in loop and then we will make this configurable property as false.

5:26 This is also a default property. And after that we will try to print iron man on the console. Next we will try to delete the property name inside ironMman. And to confirm we will again print the iron man onto the console. And we'll run it and we'll see that the name has been printed twice. So that means the program failed silently. Let's try to run the program with the strict mode on. And when we run, you see that the error has popped up in the second console statement, it says cannot delete the property name of the object. So strict mode does not allow you to delete the non-configurable properties of an object. And that's it. I hope you learned something new today. If you liked the video, please hit the subscribe button on our channel to receive more engaging content about JavaScript every single week. Until then, keep learning new skills and apply them regularly to become an expert programmer. See you next time.