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

#javascript #webdev

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;"

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

Declaring strict mode
Declaring a variable/object in strict mode
Deleting a variable/object in strict mode
Naming variables in strict mode
Duplicating a parameter in a function
Octal numeric literals are not allowed
Eval function to create a variable
Writing to a read-only property is not allowed
Writing to a get-only property is not allowed
'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();

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);

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");

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);

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

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

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);

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;

7. Eval function to create a variable is not allowed

"use strict";
eval("var x = 1");// error

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;

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;

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();

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.