WTF is strict mode?

You might have seen your colleagues dropping in 'use strict' into their JavaScript code and wondered: WTF does that do?

Another place you’ll often see use strict in place is within libraries and shared code on somewhere like GitHub.

Strict mode is an opt-in way for developers to follow a restricted set of JavaScript. One reason developers might use strict mode is because it allows for greater optimisation by the browser. Using strict mode means that the browser has to make less judgement calls about what is and is not possible this means that the browser can take short cuts when it comes to interpreting your code because it knows you’ve followed a stricter standard.

Strict mode is really easy to use. It can apply to an entire file or an entire function. You can’t apply it to individual blocks of code though.

If you’re writing a new file I recommend using it at the top. If you’ve inherited a true mess and adding strict mode to the top of the document has caused far too many problems then begin by adding it to your new functions while you refactor other parts of the codebase.

Invoke strict mode at the top of a document with the following line:

'use strict'

or within a function using:

function myFunc() {
  'use strict';
  return "Strict mode in use"
}

Changes in Strict Mode

Strict mode changes both syntax and runtime behaviour.

Strict mode makes it impossible to accidentally declare a global variable. If you try to create a global variable strict mode will cause the browser to throw an error. Declaring global variables isn’t a terrible thing but it might cause issues down the road, especially as we move towards modern JavaScript.

Strict mode makes assignments that would fail silently throw exceptions. Silent errors can be a real pain, especially when you they’re causing everything to fail. Strict mode will make your silent errors become loud exceptions and alert you to the problem straight away. This alone should make strict mode a priority for you.

A third way that strict mode helps makes you a better programmer is by preventing you from deleting things that can’t be deleted. If you try to delete Object.prototype or the String class you better believe that strict mode will be there to stop you being a fool.

On the same path of preventing you being an idiot strict mode will make sure that your function parameters are uniquely named. This should be pretty simple for you but we all know people who make these sorts of mistakes. Strict mode won’t let you run a function that looks like this:

function(myvar, myvar1, myvar) {
  return "fail in strict mode";
}

If you think this is a good way to program and are worried strict mode will start breaking things then no need to fear. Non-strict JavaScript will make your poorly named variables available through the arguments[i] array. In strict mode however you’ll get a syntax error telling you to stop being a burden on your tech lead.

While you’re using duplicate names for parameters and trying to delete Object.prototype you might have also tried to start changing the values of primitive types like booleans and integers.

While not recommended by nearly everyone non-strict JavaScript will just ignore your requests if you start trying to do this. In strict mode however you’ll start getting type errors.

So no more of this crap (source MDN):

(function() {
  'use strict';

  false.true = ''; // TypeError
  (14).sailing = 'home'; // TypeError
  'with'.you = 'far away'; // TypeErrorco
})();

Something you should care about is securing your JavaScript. This is a very common reason developers will use strict mode in their code.

If you use a site like Codepen you would have seen that it gives any old developer the ability to run JavaScript on your machine on the Codepen domain. If you listen to SecurityNow this should be setting off alarm bells in your head. If not, start listening to Steve Gibson.

When JavaScript runs in your browser a ton of security checks are run against it but given the nature of JavaScript and how it is essentially run on the fly there is a huge amount of performance drawbacks and code is far slower than it could be.

If you use strict mode though, you’re safe! Strict mode code can only be invoked in certain ways and for certain reasons, which means that the browser doesn’t need to use as many runtime checks. Substantially improving performance.

Strict mode doesn’t force the this into an object, a process referred to as “boxing” a variable, which gives a small performance boost but also stops this from having access to the global object and window, preventing unauthorised access to functions and variables not intended to be available to the below script.

Strict mode will also not allow the user to walk through the JavaScript stack from their less authorised script. This means that a function running in strict mode can’t go upwards and use myfunc.caller or myfunc.arguments preventing information being unintentionally shared.

The last common reason for implementing strict mode in your code is to allow for future ECMAScript versions. Right now JavaScript is pretty relaxed in how it works and handles your errors. As front-end development becomes a more mature field and JavaScript is used more and more we’re going to see the quality of code rise up with the growing use.

Strict mode puts into place some checks and manages your errors in a way that will allow you to jump straight into using future versions of ECMAScript. It makes your code FORWARD compatible, a really important thing.

If you want to start using strict mode today you’re in luck. There’s a lot of support for it across different browsers. Anything above IE11 supports it with no problems. Chrome and Firefox versions are reliable as always too.

Internet Explorer 10 and below do NOT support strict mode but shouldn’t cause too many problems for you if you enable it on your scripts. As always test across as many browsers as possible and run any unit tests that you can.

Check out this caniuse.com table for strict mode support.

Let’s review:

• Strict mode is opt-in
• Strict mode is enabled by putting use strict at the top of a script or the top of a function.
• Will stop you from accidentally adding things to the global scope
• Strict mode will throw louder errors for syntax, type, reference and runtime errors
• Stops you from deleting undeletable properties such as Object.prototype
• Won’t allow you to reuse parameter names in the same function
• Provides better security
• Is available in most browsers
• Is not available in IE10 or below