Why "use strict" in JavaScript can save you hours

Thanks for the feature in the JavaScript Weekly issue #167 (2th time). (:

You can also read it in your language: Chinese.

"use strict" is such a nice feature in JavaScript and is easy to get started!

How to use

// file.js
"use strict";
function doStuff(){
    // use strict is enabled here!
}

By doing this your file.js will "use strict".

If you just want to enable only within a function:

// file.js
function a(){
    "use strict";

    // use strict is enabled in this context

    function nestedFunction(){
        // and here too
    }
}

Benefits

Duplicate keys in object

var zombie = {
    eyeLeft : 0,
    eyeRight: 1,
    // ... a lot of keys ...
    eyeLeft : 1
}

This will result in an error because eyeLeft key exists twice. This saves you from wrongly assigning the left eye to the zombie.

Variables without var

plane = 5;

You already know the pain of forgetting to add the var keyword before defining a variable. If you don't then you have to know it's very painfull and hard to debug because the variable is defined in the global context and can be changed by other parts of the program.
Imagine a variable i globally defined. This can mess up nested loops in the whole application.

Duplicate arguments

function run(fromWhom, fromWhom){}

Notice the fromWhom argument exists twice, therefore an error is thrown.

What can happen:

function run(fromWhom, fromWhom){alert(fromWhom)}
run(1, 2);
// alert: 2

Freezes the arguments of the functions

var run = function(fromWhom){
    arguments[0] = 'alien';
    alert(fromWhom);
}
run('zombie');
// alert: 'alien';

Now if you "use strict"

var run = function(fromWhom){
    "use strict";
    arguments[0] = 'alien';
    alert(fromWhom);
}
run('zombie');
// alert: 'zombie';

How counter-intuitive is that a change to the arguments (arguments[0] = 'alien') changes the named argument fromWhom? "use strict" saves the day again.

Update: Some confusion happened about the intuitiveness about this "feature" and I want to explain it better.
So if you have:

var fromWhom = 'zombie';

You would expect the fromWhom value to only change if you change the fromWhom variable. For example in the following context:

var crazyActors = ['zombie'];
var player = crazyActors[0];

You would not expect that changing the zombie string (remember that string are immutable) from the crazyActors will change the player variable.

var crazyActors = ['zombie'];
var player = crazyActors[0];
crazyActors[0] = 'zombie and alien';
// player === 'zombie'; // true

What would you expect player variable to be? zombie or zombie and alien? Of course the right one is zombie. When we do var player = crazyActor[0];, there still exists only one 'zombie' string and not 2. Both the array and the player variable points to the same string in memory (Check in the Google Chrome profiler).

In the case of arguments there is some strange stuff going on.

Your word

WoollyMittens, reddit user: has suggested in a comment

In combination with this install a "linter" to catch silly mistakes before you even run the code: http://www.jshint.com/
Most text editors have plugins for this. Think of it as the wavy red lines underneath your spelling mistakes when you write an email, only for code.

Soon I will explain how to make it automatic with a grunt task.

loz220, reddit user: has suggested in a comment

nice write up. For the full list of what "use strict" does, click here..

Further reading

Subscribe to receive new interesting posts about programming

comments powered by Disqus