const - JS | lectureJavaScript Fundamentals 2

Activating Strict Mode

JavaScript Fundamentals 2

Before moving forward with our learning process, I felt it was important to talk about a special mode in JavaScript known as Strict mode.

Strict mode is a special mode that we can activate in JavaScript, making it easier to write secure JavaScript code. All we have to do to activate strict mode is to write the below string at the beginning of the script file.

script.js
'use strict'

Writing this activates strict mode for the entire script. Now it's important to note that the statement 'use strict' has to be the first statement in the script file. Meaning if we have any code before that statement, then strict mode will not be activated. Comments are allowed because JavaScript will ignore them but no code.

We can also activate strict mode only for a specific function or a specific block. I've tried to understand while some developers do that, but I haven't, so I always use it at the beginning of each script, and I would advise you to do the same.

So always put strict mode at the beginning of your script files and, like that, write more secure code. By secure, I mean that strict mode makes it easier for us developers to avoid accidental errors. So basically, it prevents us from introducing bugs into our code, and that's because of two reasons: first, strict mode forbids us to do certain things, and second, it will create visible errors for us in certain situations in which without strict mode JavaScript will fail silently without letting us know that we made a mistake.

Let's have an example of one of the most important changes strict mode introduces. Consider the below code example:

script.js
//'use strict'

let hasBeenAdmitted = false
const passInterview = true

if (passInterview) hasBeeAdmitted = true
if (hasBeenAdmitted ) console.log('Hey! Welcome!');

From the above code, we are just doing a very simple check in which a certain person right now is not yet an employee of a certain company ( hasBeenAdmitted = false ) but has succeeded in an interview ( passInterview = true ). We now check to see if this person has succeeded in the interview; he should be admitted.

You will notice that on the first highlighted line, I introduced a bug. I intentionally omitted the letter n ( hasBeeAdmitted ). This is to show you how strict mode can help us avoid certain kinds of errors because doing this is more common than you might think.

You can now see that I wrote the variable name correctly in the if condition on the second highlighted line. For the moment, as you can see in the above code, I deactivated strict mode ( // 'use strict' ) so that we can see how this bug can affect our code.

Now, if you run this script by reloading your browser, you will see that nothing has been logged in your console even though we attempted doing this: hasBeeAdmitted = true. We expected that hasBeenAdmitted being true should then log 'Hey! Welcome!'.

We are eventually getting nothing, which is normal because of the bug I introduced on purpose by omitting the letter n. So by correcting that, we will get the expected result.

Leaving the code as it was, we can find this bug with the help of strict mode. Let's activate it back by removing the double slash because right now, JavaScript considers it as a comment. Save everything and execute the script again by reloading your browser.

We get an error! An error saying hasBeeAdmitted is not defined. That's where we then say, "Oh! I made a mistake! I'm missing an n on my variable name". After correcting that typo, if we try reloading the browser again, we can see that the error is gone.

Another thing that strict mode does is to introduce a shortlist of variable names that are reserved for features that might be added to the language a bit later. For example, let's try to define a variable called implements.

script.js
'use strict'
const implements = 'something'

If we reload our browser, we see an error saying: Unexpected strict mode reserved word. We are getting this because JavaScript is reserving this word for a feature that it might implement in the future. So by reserving this kind of word ( implements ), it will make it easier to implement the feature in the future. It's just like the rules I explained to you in the beginning about naming variables. You can find the full list of reserved words in JavaScript here.

There are many other changes that affect things that we haven't yet learned about, like functions, objects, setting properties, and many more. All these will be mentioned in upcoming lectures.

To finish, in all the upcoming lectures, for all code snippets that will be given as examples, make sure you test them in strict mode to have the same results.