Don’t be so sloppy, let’s invoke strict mode

Normal JavaScript is pure chaos! You can initialize undeclared variables, you can compare strings and numbers, and you can do a lot of other stuff that makes your head pop. Therefore, normal JavaScript is sometimes called “sloppy”. Fortunately, there is a solution: You can force “strict mode” on your code to end the chaos and start the logic.

strict mode only works in ECMAScript 5 or higher implementations. Luckily, older browser will just ignore it and process your code as normal.

How to invoke strict mode

If you want to declare strict mode to your code then at the following line at the top of your code.

"use strict";

This will force strict mode onto everything inside the script tag. You can also use strict mode in functions.

function stuff(){
"use strict";
//does strict stuff.

Very important! “use strict” will only work if it’s written at the top of a script or function. Otherwise it will be ignored.

Also note that you can not use it inside if/else, for, do… statements because it only works for the whole script or for functions, not for other blocks.

Why use strict?

It forces you to write more ‘secure’ JavaScript by changing ‘bad syntax’ into actual errors. (undeclared variables, crazy comparisons…).

It restricts you in the use of JavaScript, but that’s not a bad thing. Since it throws more error’s when you do crazy stuff by accident. For example, making global variables in functions, or putting a leading zero in front of a number whithout realizing you just made it an octal and not a decimal.

Give me some examples

"use strict"
name = "Demian"; // name undefined => error
anObject = {a:1, b:2}; //anObject undefined => error

var badCake = “rotten applecake”;
delete badCake;//deleting a variable, object or function is not allowed => error
delete Object.prototype;//undeletable => error

function fun(a, a){};//duplicate parameter name => error

var octalNumber = 010;//I hate octal Numbers => error
//ES6: put 0o in front for Octal notation.
//like this: var a = 0o10;

var escapeThis = \010;//your characters cannot escape => error

var emptyObj = {};
Object.defineProperty(emptyObj, “x”, {value: 0, writable: false});
emptyObj.x = 666;// A read only property cannot be written to => error

var numberOfTheBeast = {get x() {return 666}};
numberOfTheBeast.x = 4; //It’s a demonic getter, don’t write holy numbers on it

with (Math){x = cos(2)}; //’with’ is not allowed => error

eval(“var number = 3”);
console.log(number); //eval cannot create variables in the scope from which it was called => error.

In addition it also future proof’s your code by making reserved keywords not allowed.

  • implements
  • interface
  • let
  • package
  • private
  • protected
  • public
  • static
  • yield

"use strict"
var interface = {}; //error!

Look at MDN for a full list of all the changes “use strict” enforces.

If you turn things around, normal JavaScript allows all of the above, some are legit syntax while others are silent errors.

How does it work internally?

Basically, your strict code is compiled differently from the sloppy code. Therefore, it’s not a subset, it’s JavaScript with different syntax rules.

Is it backwards compatible?

Yes, the “use strict”; syntax is actually a string literal like (“I’m a string”;) which will compile to a non existing variable never to be seen again. Thus it is harmless in older browsers and newer browser will recognize the literal and enforce strict mode.

Be careful when you use strict, older browsers, like Internet Explore 9, will ignore it and execute your code as normal JavaScript, this can have unwanted side effects. Test your code in both browser that support strict mode and browsers that do not. Otherwise you’re bound to run into major troubles.


Leave a Reply

Your email address will not be published. Required fields are marked *