JavaScript evolved for a long time having no compatibility issues and modified by adding new features but not changing the old features. It had its advantages and disadvantages and the advantage was that it didn’t allow the breaking of the existing code, however, the disadvantage was that any error made by the developers or creators was stuck within JavaScript forever.
It carried on until ECMAScript 5 (also referred to as ES5) was introduced in 2009 whose perk was that it added new features while modifying current ones. However, by default in JavaScript, these modifications are off. One needs to enable it with a special message or command which is the “use strict”.
What is “use strict”
The basic definition of “use strict ” is that it enables JavaScript to run code in strict mode. Strict mode is something where one cannot use undeclared variables. Strict mode also helps us avoid possible bugs/errors, if we have not properly followed JavaScript syntax. It also helps us when we make typos which results in an unwanted new variable. We can also say that the basic purpose of strict mode is to make our code look cleaner.
Universally supported?
It should be kept in mind that use strict is not universally supported by the browsers. Most modern browsers support “use strict” with the exception of Internet Explorer 9 and the versions below 9. The following browsers with versions above or the specified versions support “use strict”.
| Mozilla Firefox | Internet Edge | Google Chrome | Opera | Safari |
|---|---|---|---|---|
| 4.0 | 10.0 | 13.0 | 12.1 | 6.0 |
Strict Mode Syntax
We can implement or declare use strict by adding at the top of a function or code the keyword “use strict” in an exact manner. If we declare it at the top of our code, it will have a global scope which means all our JavaScript code will execute in strict mode.
Let us see two examples. In the first example, we will use an undeclared variable without using “use strict”. In the second example, we will use strict mode in the same manner.
Example 1:
name=“Linux Hint”;
console.log(name);
Output: Linux Hint
<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/image1-27.png" height="68" src="data:image/svg xml,” width=”138″>
Example 2:
“use strict”;
name=“Linux Hint”;
//this will cause an error that name is not defined
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/image3-25.png" data-lazy- height="108" src="data:image/svg xml,” width=”495″>
“name is not defined” error will be caused in the above scenario.
Let us have a look at another example where strict mode is used inside the function. “use strict” scope will be functional i-e limited to the function.
Example 3:
function myFunc(){
“use strict”;
y=4;
//this will cause an error
//error will be that y is not defined
}
myFunc();
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/image2-26.png" data-lazy- height="112" src="data:image/svg xml,” width=”497″>
In this example, the first variable “name” will not have an error as we are not using strict mode. However, in the function, we will be shown an error of “y” is not declared as we are using “use strict” mode. Let me stress again that in this example the strict mode scope is restricted to the “myFunc()” function.
Why use Strict mode?
Now that we have looked at the syntax of the strict mode and some examples, let us explore the question of why use Strict mode?
The perk of using strict mode is that it makes our code cleaner as mentioned earlier. Also, Strict mode helps us write secure JavaScript. Often we ignore bad syntax. This can cause us problems later. Strict mode aids us in converting informal/bad syntax code into real errors so that we can handle them accordingly.
In example 1, we saw that we didn’t declare a variable but the JavaScript console didn’t throw any errors. It treated the variable “name” as a global variable. In Strict mode, we avoid this as strict mode throws an error that name is not defined. This helps us avoid accidentally declaring global variables in our code.
Restrictions in Strict Mode
Let us discuss what is not permissible or not allowed in strict mode. We can see from example 1 that we cannot use a variable in strict mode if it is not defined or declared. The same goes for objects. We have to declare objects in strict mode otherwise we will get an error.
Example 4:
“use strict”;
language={
first:“English”,
second: “Chinese”
};
//this will throw us an error as object “language” is not defined
Strict mode also doesn’t let us delete a variable or a function.
Example 5:
“use strict”;
const pi=3.143;
delete pi;
//this will cause an error
function myFunc(){
//Hello World
}
delete myFunc;
//this will cause an error
Apart from this, strict mode restricts us from using keywords reserved in future JavaScript versions or currently using. For example, we cannot use implements, let, package, interface, yield, static, protected, public, private, arguments, etc.
Keyword “this” in Strict Mode
Keyword “this” is used in JavaScript to refer to an object it belongs to. “this” keyword behaves differently in strict mode. Suppose you use an undeclared object with the use of “this”. JavaScript will return “undefined” in strict mode rather than the object.
Example 6:
“use strict”;
function myFunc(){
alert(this);
//this will show us an alert of undefined
}
//calling the function now
myFunc();
Conclusion
The keyword use strict helps JavaScript developers to run their JavaScript code in strict mode hence restricting the use of undeclared variables and helps developers by avoiding possible errors or bugs.
We studied the “use strict” directive in this post and discussed how and why to use the “use strict” directive as well as discussed, the browser that supports strict mode. We held a grip on the concepts using examples. By studying this article, we know how to make our code cleaner and how to avoid unnecessary global variables with the use of “use strict”. Let me stress on the fact again that if you are working with “use strict” always declare it at the top of a block of code or top of the function for it to work.
About the author
<img data-del="avatar" data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/7011409B3A384F43A8417D1DAC68D179-150×150.jpg6165064b82f3a.jpg" height="112" src="data:image/svg xml,” width=”112″>
Shehroz Azam
A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.
