What does “use strict” do in JavaScript, and what is the reasoning behind it?

Question

Recently, I ran some of my JavaScript code through Crockford\'s JSLint, and it gave the following error:

Problem at line 1 character 1: Missing \"use

Answer 1

Small examples to compare:

Non-strict mode:

for (i of [1,2,3]) console.log(i)
    
// output:
// 1
// 2
// 3

Strict mode:

'use strict';
for (i of [1,2,3]) console.log(i)

// output:
// Uncaught ReferenceError: i is not defined

Non-strict mode:

String.prototype.test = function () {
  console.log(typeof this === 'string');
};

'a'.test();

// output
// false

String.prototype.test = function () {
  'use strict';
  
  console.log(typeof this === 'string');
};

'a'.test();

// output
// true

Answer 2

This article about Javascript Strict Mode might interest you: John Resig - ECMAScript 5 Strict Mode, JSON, and More

To quote some interesting parts:

Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a "strict" operating context. This strict context prevents certain actions from being taken and throws more exceptions.

And:

Strict mode helps out in a couple ways:

• It catches some common coding bloopers, throwing exceptions.
• It prevents, or throws errors, when relatively "unsafe" actions are taken (such as gaining access to the global object).
• It disables features that are confusing or poorly thought out.

Also note you can apply "strict mode" to the whole file... Or you can use it only for a specific function (still quoting from John Resig's article):

// Non-strict code...

(function(){
  "use strict";

  // Define your library strictly...
})();

// Non-strict code...

Which might be helpful if you have to mix old and new code ;-)

So, I suppose it's a bit like the "use strict" you can use in Perl (hence the name?): it helps you make fewer errors, by detecting more things that could lead to breakages.

Strict mode is now supported by all major browsers.

Inside native ECMAScript modules (with import and export statements) and ES6 classes, strict mode is always enabled and cannot be disabled.

Answer 3

If people are worried about using use strict it might be worth checking out this article:

ECMAScript 5 'Strict mode' support in browsers. What does this mean?
NovoGeek.com - Krishna's weblog

It talks about browser support, but more importantly how to deal with it safely:

function isStrictMode(){
    return !this;
} 
/*
   returns false, since 'this' refers to global object and 
   '!this' becomes false
*/

function isStrictMode(){   
    "use strict";
    return !this;
} 
/* 
   returns true, since in strict mode the keyword 'this'
   does not refer to global object, unlike traditional JS. 
   So here, 'this' is 'undefined' and '!this' becomes true.
*/

Answer 4

It's a new feature of ECMAScript 5. John Resig wrote up a nice summary of it.

It's just a string you put in your JavaScript files (either at the top of your file or inside of a function) that looks like this:

"use strict";

Putting it in your code now shouldn't cause any problems with current browsers as it's just a string. It may cause problems with your code in the future if your code violates the pragma. For instance, if you currently have foo = "bar" without defining foo first, your code will start failing...which is a good thing in my opinion.

Answer 5

My two cents:

One of the goals of strict mode is to allow for faster debugging of issues. It helps the developers by throwing exception when certain wrong things occur that can cause silent & strange behaviour of your webpage. The moment we use use strict, the code will throw out errors which helps developer to fix it in advance.

Few important things which I have learned after using use strict :

Prevents Global Variable Declaration:

var tree1Data = { name: 'Banana Tree',age: 100,leafCount: 100000};

function Tree(typeOfTree) {
    var age;
    var leafCount;

    age = typeOfTree.age;
    leafCount = typeOfTree.leafCount;
    nameoftree = typeOfTree.name;
};

var tree1 = new Tree(tree1Data);
console.log(window);

Now,this code creates nameoftree in global scope which could be accessed using window.nameoftree. When we implement use strict the code would throw error.

Uncaught ReferenceError: nameoftree is not defined

Sample

Eliminates with statement :

with statements can't be minified using tools like uglify-js. They're also deprecated and removed from future JavaScript versions.

Sample

Prevents Duplicates :

When we have duplicate property, it throws an exception

Uncaught SyntaxError: Duplicate data property in object literal not allowed in strict mode

"use strict";
var tree1Data = {
    name: 'Banana Tree',
    age: 100,
    leafCount: 100000,
    name:'Banana Tree'
};

There are few more but I need to gain more knowledge on that.

Answer 6

Normally, JavaScript does not follow strict rules, hence increasing chances of errors. After using "use strict", the JavaScript code should follow strict set of rules as in other programming languages such as use of terminators, declaration before initialization, etc.

If "use strict" is used, the code should be written by following a strict set of rules, hence decreasing the chances of errors and ambiguities.