DEV Community

Cover image for Do you know what "use strict" does in JavaScript ?
Kritika Pattalam Bharathkumar
Kritika Pattalam Bharathkumar

Posted on • Originally published at blog.kritikapattalam.com

Do you know what "use strict" does in JavaScript ?

As JavaScript developers, we often have "use strict" - strict mode enabled in our projects. But do we know what does that expression does?. Let's find out.

What is a strict mode?

JavaScript's strict mode makes JS be executed in strict mode, which helps identify common mistakes in coding practices which might lead to potential bugs.

Syntax

"use strict;"
Enter fullscreen mode Exit fullscreen mode

As part of this blog, let's see a list of things to remember while using strict mode in JavaScript

  1. Declaring strict mode
  2. Declaring a variable/object in strict mode
  3. Deleting a variable/object in strict mode
  4. Naming variables in strict mode
  5. Duplicating a parameter in a function
  6. Octal numeric literals are not allowed
  7. Eval function to create a variable
  8. Writing to a read-only property is not allowed
  9. Writing to a get-only property is not allowed
  10. 'this' in strict mode

Below is the list of few things which are identified as issues in strict mode vs without one

1. Declaring strict mode

The "use strict" directive/expression is only recognized at the beginning of a script or a function.

Declare strict mode at the top of the file

Strict mode can be declared at the top of the file as the first thing. When declared at the top it takes a global scope.
In the below piece of code, use strict is declared as the first thing on the script file, making it a global scope, causing the strict mode feature to be enabled for the whole file.

"use strict";
alert("I am part of the file");

function test() {
   console.log("javascript use strict is declared at the top of the file");
}
test();
Enter fullscreen mode Exit fullscreen mode

What happens when strict mode is declared inside a function and not at the top?

When used inside a function it has local scope and only that function will execute in strict mode.
In the example below, the strict mode will be enabled only inside the function(local scope), and the code outside it will not follow the strict rules.

function log(x) {
    "use strict;"
    console.log(x);
}
log(5);
Enter fullscreen mode Exit fullscreen mode

What to avoid?

In the example below, use strict is not the first line & should be avoided. Preferably it's better to declare it on the top of the file due to global scope, instead of declaring it inside a function.

alert("I am inside this file");

"use strict;" //not declared as the first line
console.log("javascript use strict is not declared at the first thing");
Enter fullscreen mode Exit fullscreen mode

2. Variable/Object declaring in strict mode

Using a variable/object without declaring it is not allowed in strict mode.
In the example below, myVar variable is assigned a value before declaring, this will throw an error.

What happens strict mode is not enabled? - myVar will just be created as a global variable in that scenario.

"use strict;"
myVar = 5; // This will throw an error
function log(x) {
    console.log(x);
}
log(5);
Enter fullscreen mode Exit fullscreen mode

3. Deleting a variable/object/function

Deleting a variable or object or function when in strict mode enabled is not possible.

use strict;
let myVar = 5; // This will throw an error
function log(x) {
    console.log(x);
}
log(6);
delete log; //throws an error
delete myVar; //throws an error
Enter fullscreen mode Exit fullscreen mode

4. Naming variables in strict mode

When learning JS for the first time, the thing which we are sure often would have read is "Do not use reserved words as variable names".

But at times people do tend to use reserved words without realizing it, in such cases strict mode helps by throwing an error. Just try it out in a chrome developer tool console and one should be able to see the difference.

"use strict;"
var static = "hello";
//static is a reserved word, hence when using strict mode, it will throw below error
// Uncaught SyntaxError: Unexpected strict mode reserved word
Enter fullscreen mode Exit fullscreen mode

5. Duplicating a parameter in a function

In the example below, you will see that the x parameter in the function log has been duplicated. This is not allowed in strict mode.

use strict;
// This will throw an error because "x" parameter is duplicated
function log(x,y,x) {
    console.log(x);
}
log(6,10);
Enter fullscreen mode Exit fullscreen mode

6. Octal numeric literals are not allowed

In the example below, one might assume a preceding zero before 1 does nothing and the value might just be 12, but in JavaScript preceding zero before a number means its Octal numeric.
Strict mode does not allow octal numeric.

'use strict';
 // Will throw an error
 let x = 012;   
Enter fullscreen mode Exit fullscreen mode

7. Eval function to create a variable is not allowed

"use strict";
eval("var x = 1");// error
Enter fullscreen mode Exit fullscreen mode

8. Writing to a read-only property is not allowed.

In the example below, we define an object, and in the configurable property, we set the writable value to false, which means that a particular object is read-only.
So when you try to assign a new value to that object, the strict mode will throw an error.

'use strict';
let obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});
// Will throw an error
obj.x = 25; 

Enter fullscreen mode Exit fullscreen mode

9. Writing to a get-only property is not allowed

In the example below, trying to write to a get-only property throws an error.

'use strict';
let obj = {get x() {return 0} };
// Will throw an error
obj.x = 25; 
Enter fullscreen mode Exit fullscreen mode

10. 'this' in strict mode

In non-strict mode, when you call a function that isn't bound to any object "this" will refer to the global window object, whereas in strict mode it returns undefined.

'use strict';
const foo = function() {
  console.log(this); // undefined in strict mode
foo();
Enter fullscreen mode Exit fullscreen mode

Conclusion

The concludes what is strict mode is, how/where to declare it, and the list of few items to keep in mind/expect while using "use strict" in JavaScript.

References

Follow me on Twitter | LinkedIn for more web development related tips and posts. Feedbacks and suggestions are welcome.

Top comments (3)

Collapse
 
kumarkalyan profile image
Kumar Kalyan

Thanks for the amazing content. Learned a lot :)

Collapse
 
kritikapattalam profile image
Kritika Pattalam Bharathkumar

Glad you found it useful :)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Probably a good idea to also mention that JavaScript modules are in strict mode by default, so you don't need to turn it on