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

The main reasons why developers should use "use strict" are:

1. Prevents accidental declaration of global variables.Using "use strict()" will make sure that variables are declared with var before use. Eg:

   function useStrictDemo(){
    'use strict';
    //works fine
    var a = 'No Problem';
   
    //does not work fine and throws error
    k = "problem"
   
    //even this will throw error
    someObject = {'problem': 'lot of problem'};
   }
   

2. N.B: The "use strict" directive is only recognized at the beginning of a script or a function.

3. The string "arguments" cannot be used as a variable:

   "use strict";
   var arguments = 3.14;    // This will cause an error
   

4. Will restrict uses of keywords as variables. Trying to use them will throw errors.

In short will make your code less error prone and in turn will make you write good code.

To read more about it you can refer here.

Answer 2

Using 'use strict'; does not suddenly make your code better.

The JavaScript strict mode is a feature in ECMAScript 5. You can enable the strict mode by declaring this in the top of your script/function.

'use strict';

When a JavaScript engine sees this directive, it will start to interpret the code in a special mode. In this mode, errors are thrown up when certain coding practices that could end up being potential bugs are detected (which is the reasoning behind the strict mode).

Consider this example:

var a = 365;
var b = 030;

In their obsession to line up the numeric literals, the developer has inadvertently initialized variable b with an octal literal. Non-strict mode will interpret this as a numeric literal with value 24 (in base 10). However, strict mode will throw an error.

For a non-exhaustive list of specialties in strict mode, see this answer.

---

Where should I use 'use strict';?

• In my new JavaScript application: Absolutely! Strict mode can be used as a whistleblower when you are doing something stupid with your code.

• In my existing JavaScript code: Probably not! If your existing JavaScript code has statements that are prohibited in strict-mode, the application will simply break. If you want strict mode, you should be prepared to debug and correct your existing code. This is why using 'use strict'; does not suddenly make your code better.

---

How do I use strict mode?

1. Insert a 'use strict'; statement on top of your script:

   // File: myscript.js
   
   'use strict';
   var a = 2;
   ....
   

   Note that everything in the file myscript.js will be interpreted in strict mode.

2. Or, insert a 'use strict'; statement on top of your function body:

   function doSomething() {
       'use strict';
       ...
   }
   

   Everything in the lexical scope of function doSomething will be interpreted in strict mode. The word lexical scope is important here. For example, if your strict code calls a function of a library that is not strict, only your code is executed in strict mode, and not the called function. See this answer for a better explanation.

---

What things are prohibited in strict mode?

I found a nice article describing several things that are prohibited in strict mode (note that this is not an exclusive list):

Scope

Historically, JavaScript has been confused about how functions are scoped. Sometimes they seem to be statically scoped, but some features make them behave like they are dynamically scoped. This is confusing, making programs difficult to read and understand. Misunderstanding causes bugs. It also is a problem for performance. Static scoping would permit variable binding to happen at compile time, but the requirement for dynamic scope means the binding must be deferred to runtime, which comes with a significant performance penalty.

Strict mode requires that all variable binding be done statically. That means that the features that previously required dynamic binding must be eliminated or modified. Specifically, the with statement is eliminated, and the eval function’s ability to tamper with the environment of its caller is severely restricted.

One of the benefits of strict code is that tools like YUI Compressor can do a better job when processing it.

Implied Global Variables

JavaScript has implied global variables. If you do not explicitly declare a variable, a global variable is implicitly declared for you. This makes programming easier for beginners because they can neglect some of their basic housekeeping chores. But it makes the management of larger programs much more difficult and it significantly degrades reliability. So in strict mode, implied global variables are no longer created. You should explicitly declare all of your variables.

Global Leakage

There are a number of situations that could cause this to be bound to the global object. For example, if you forget to provide the new prefix when calling a constructor function, the constructor's this will be bound unexpectedly to the global object, so instead of initializing a new object, it will instead be silently tampering with global variables. In these situations, strict mode will instead bind this to undefined, which will cause the constructor to throw an exception instead, allowing the error to be detected much sooner.

Noisy Failure

JavaScript has always had read-only properties, but you could not create them yourself until ES5’s Object.createProperty function exposed that capability. If you attempted to assign a value to a read-only property, it would fail silently. The assignment would not change the property’s value, but your program would proceed as though it had. This is an integrity hazard that can cause programs to go into an inconsistent state. In strict mode, attempting to change a read-only property will throw an exception.

Octal

The octal (or base 8) representation of numbers was extremely useful when doing machine-level programming on machines whose word sizes were a multiple of 3. You needed octal when working with the CDC 6600 mainframe, which had a word size of 60 bits. If you could read octal, you could look at a word as 20 digits. Two digits represented the op code, and one digit identified one of 8 registers. During the slow transition from machine codes to high level languages, it was thought to be useful to provide octal forms in programming languages.

In C, an extremely unfortunate representation of octalness was selected: Leading zero. So in C, 0100 means 64, not 100, and 08 is an error, not 8. Even more unfortunately, this anachronism has been copied into nearly all modern languages, including JavaScript, where it is only used to create errors. It has no other purpose. So in strict mode, octal forms are no longer allowed.

Et cetera

The arguments pseudo array becomes a little bit more array-like in ES5. In strict mode, it loses its callee and caller properties. This makes it possible to pass your arguments to untrusted code without giving up a lot of confidential context. Also, the arguments property of functions is eliminated.

In strict mode, duplicate keys in a function literal will produce a syntax error. A function can’t have two parameters with the same name. A function can’t have a variable with the same name as one of its parameters. A function can’t delete its own variables. An attempt to delete a non-configurable property now throws an exception. Primitive values are not implicitly wrapped.

---

Reserved words for future JavaScript versions

ECMAScript 5 adds a list of reserved words. If you use them as variables or arguments, strict mode will throw an error. The reserved words are:

implements, interface, let, package, private, protected, public, static, and yield

---

Further Reading

• Strict Mode - JavaScript | MDN
• Browser support for strict mode
• Transitioning to strict mode

Answer 3

Strict mode eliminates errors that would be ignored in non-strict mode, thus making javascript “more secured”.

Is it considered among best practices?

Yes, It's considered part of the best practices while working with javascript to include Strict mode. This is done by adding the below line of code in your JS file.

'use strict';

in your code.

What does it mean to user agents?

Indicating that code should be interpreted in strict mode specifies to user agents like browsers that they should treat code literally as written, and throw an error if the code doesn't make sense.

For example: Consider in your .js file you have the following code:

Scenario 1: [NO STRICT MODE]

var city = "Chicago"
console.log(city) // Prints the city name, i.e. Chicago

Scenario 2: [NO STRICT MODE]

city = "Chicago"
console.log(city) // Prints the city name, i.e. Chicago

So why does the variable name is being printed in both cases?

Without strict mode turned on, user agents often go through a series of modifications to problematic code in an attempt to get it to make sense. On the surface, this can seem like a fine thing, and indeed, working outside of strict mode makes it possible for people to get their feet wet with JavaScript code without having all the details quite nailed down. However, as a developer, I don't want to leave a bug in my code, because I know it could come back and bite me later on, and I also just want to write good code. And that's where strict mode helps out.

Scenario 3: [STRICT MODE]

'use strict';

city = "Chicago"
console.log(city) // Reference Error: asignment is undeclared variable city.

Additional tip: To maintain code quality using strict mode, you don't need to write this over and again especially if you have multiple .js file. You can enforce this rule globally in eslint rules as follows:

Filename: .eslintrc.js

module.exports = {
    env: {
        es6: true
    },
    rules : {
        strict: ['error', 'global'],
        },
    };
    

Okay, so what is prevented in strict mode?

• Using a variable without declaring it will throw an error in strict mode. This is to prevent unintentionally creating global variables throughout your application. The example with printing Chicago covers this in particular.

• Deleting a variable or a function or an argument is a no-no in strict mode.

  "use strict";
   function x(p1, p2) {}; 
   delete x; // This will cause an error
  

• Duplicating a parameter name is not allowed in strict mode.

   "use strict";
   function x(p1, p1) {};   // This will cause an error
  

• Reserved words in the Javascript language are not allowed in strict mode. The words are implements interface, let, packages, private, protected, public. static, and yield

For a more comprehensive list check out the MDN documentation here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

Answer 4

If you use a browser released in the last year or so then it most likely supports JavaScript Strict mode. Only older browsers around before ECMAScript 5 became the current standard don't support it.

The quotes around the command make sure that the code will still work in older browsers as well (although the things that generate a syntax error in strict mode will generally just cause the script to malfunction in some hard to detect way in those older browsers).

Answer 5

When adding "use strict";, the following cases will throw a SyntaxError before the script is executing:

• Paving the way for future ECMAScript versions, using one of the newly reserved keywords (in prevision for ECMAScript 6): implements, interface, let, package, private, protected, public, static, and yield.

• Declaring function in blocks

  if(a<b){ function f(){} }
  

• Octal syntax

  var n = 023;
  

• this point to the global object.

   function f() {
        "use strict";
        this.a = 1;
   };
   f(); 
  

• Declaring twice the same name for a property name in an object literal

   {a: 1, b: 3, a: 7} 
  

  This is no longer the case in ECMAScript 6 (bug 1041128).

• Declaring two function arguments with the same name function

  f(a, b, b){}
  

• Setting a value to an undeclared variable

  function f(x){
     "use strict";
     var a = 12;
     b = a + x*35; // error!
  }
  f();
  

• Using delete on a variable name delete myVariable;

• Using eval or arguments as variable or function argument name

  "use strict";
  arguments++;
  var obj = { set p(arguments) { } };
  try { } catch (arguments) { }
  function arguments() { } 
  

Sources:

• Transitioning to strict mode on MDN

• Strict mode on MDN

• JavaScript’s Strict Mode and Why You Should Use It on Colin J. Ihrig's blog (archived version)

Answer 6

"use strict" makes JavaScript code to run in strict mode, which basically means everything needs to be defined before use. The main reason for using strict mode is to avoid accidental global uses of undefined methods.

Also in strict mode, things run faster, some warnings or silent warnings throw fatal errors, it's better to always use it to make a neater code.

"use strict" is widely needed to be used in ECMA5, in ECMA6 it's part of JavaScript by default, so it doesn't need to be added if you're using ES6.

Look at these statements and examples from MDN:

The "use strict" Directive
The "use strict" directive is new in JavaScript 1.8.5 (ECMAScript version 5). It is not a statement, but a literal expression, ignored by earlier versions of JavaScript. The purpose of "use strict" is to indicate that the code should be executed in "strict mode". With strict mode, you can not, for example, use undeclared variables.

Examples of using "use strict":
Strict mode for functions: Likewise, to invoke strict mode for a function, put the exact statement "use strict"; (or 'use strict';) in the function's body before any other statements.

1) strict mode in functions

 function strict() {
     // Function-level strict mode syntax
     'use strict';
     function nested() { return 'And so am I!'; }
     return "Hi!  I'm a strict mode function!  " + nested();
 }
 function notStrict() { return "I'm not strict."; }

 console.log(strict(), notStrict());

2) whole-script strict mode

'use strict';
var v = "Hi! I'm a strict mode script!";
console.log(v);

3) Assignment to a non-writable global

'use strict';

// Assignment to a non-writable global
var undefined = 5; // throws a TypeError
var Infinity = 5; // throws a TypeError

// Assignment to a non-writable property
var obj1 = {};
Object.defineProperty(obj1, 'x', { value: 42, writable: false });
obj1.x = 9; // throws a TypeError

// Assignment to a getter-only property
var obj2 = { get x() { return 17; } };
obj2.x = 5; // throws a TypeError

// Assignment to a new property on a non-extensible object.
var fixed = {};
Object.preventExtensions(fixed);
fixed.newProp = 'ohai'; // throws a TypeError

You can read more on MDN.