When, why and how to use the "use Strict" directive in Javascript?

Question

I had never seen before the use of this directive, but almost all the most mature jQuery plugins use it.

I would like to know when and how to use it and what its purpose is.

Answer 1

As others have said, Strict mode is a more rigorous way of interpreting language, which prohibits certain practices that have always been allowed but are not recommended (such as the creation of implicit global variables, already mentioned in other responses). Since unconditionally prohibiting such a practice would break legacy codes, it was decided to create the directive "use strict"; to activate the strict mode.

There are two ways to use "use strict":

• At the top of the file, the directive applies the strict mode for the entire file.

• As the first line of code of a function, the directive applies the strict mode only within the function (including other functions eventually declared within the function).

The great benefit of using Strict mode is to reduce the chance of hard-to-find bugs in the code (such as a name conflict when creating an implicit global, or the existence of two equal keys in literal object).

I have prepared a free and adapted translation of Annex C to the language specification, summarising existing restrictions in Strict mode:

• The identifiers implements, interface, let, package, private, protected, public, static, and yield are reserved words when used in Strict mode.

• Numeric literals are never considered octal, even when they start with zero. The same goes for octals escaped in strings, such as '\012' (modern browsers no longer support, even outside the Strict mode)

• Trying to assign a value to a variable that does not exist in the current scope no longer creates a property in the global object (i.e., no longer creates a global variable). Instead, it launches an exception of the Referenceerror type. In addition, it is not possible to assign properties that have the {[Writable]]:false}attribute, nor to a accessor without Setter defined ({[Set]]:Undefined}), nor for properties of objects whose internal property [[Extensible]] is false. In all these cases a Typeerror will be launched.

• Cannot reset eval, or use it with ++ or --.

• If you try to access arguments.caller or arguments.callee in a function, a typeerror will be launched.

• Named function arguments do not share values dynamically with numerically indexed equivalent properties. For example, in function foo(bar) { arguments[0] = 10; }, bar keeps the value passed in the call and does not assume the value 10.

• The same is true in the opposite case: in function foo(bar) { bar = 10; }, arguments[0] keeps the value passed in the call and does not assume the value 10.

• If there is more than one property with the same name on a literal object, a syntaxerror is launched.

• "Eval" and "Arguments" identifiers cannot be used as function parameter names that define getters or setters on literal objects (even if the external code is not in Strict mode, but the getter/Setter body is).

• The eval in Strict mode cannot instantiate variables or functions in the scope of who calls eval. The code passed to eval will create a new scope, where these variables will be instantiated.

• In Strict mode, there is no coercion of this to the object. In cases where this for null or undefined, it will not be converted to the global object. For example: in function f(){ console.log(this) }; f();, this is undefined in Strict mode, and not the global object (in browsers, window). Also, if a primitive value is passed as this, he will not be converted to wrapper equivalent.

• The operator delete launches a Syntaxerror when used on non-deleteable items such as variables, functions and arguments. For example: delete variavel, delete funcao and function(foo) { delete foo; }.

• The operator delete launches a Typeerror if the property to be deleted has the attribute { [[Configurable]]:false }.

• If you try to declare a variable with the name "Eval" or "Arguments", a Syntaxerror will be launched.

• The use of with launches a Syntaxerror.

• In a clause catch cannot use "Eval" or "Arguments" as the exception name; this is a Syntaxerror.

• "Eval" and "Arguments" identifiers cannot be used as function parameter names; this is a syntaxerror.

• Functions cannot have multiple parameters with the same name; this is a Syntaxerror.

• Implementations are prohibited from extending the meaning of the "Caller" and "Arguments" properties of function instances beyond the specification.

• It is a Syntaxerror trying to use "Eval" or "Arguments" as a function name or parameter, as well as trying to force it through the constructor Function.

Answer 2

Javascript is a dynamic language and it was not planned for the dimensions it is used today. So it has some little problems. For example the variable declaration, if you use a variable without var before it will become a global variable, so you may be overwriting a value that may be being used by some other function somewhere else. This kind of thing causes mistakes that are very hard to find.

This type of behavior is "natural" language and would break a lot of existing libraries if it were taken out of the language now.

The "use Strict" serves to try to mitigate these problems, browsers that recognize this directive will issue errors when they find code that is valid javascript but that is potentially problematic, such as the case of using variables without declaring with var. Old browsers that don’t recognize simply ignore the directive.

And since "use Strict" can be used in code blocks, you can use it within your new functions without having to refactor all your old libraries.

Example of use:

y = 2;//funciona sem problemas porque esta fora do bloco
function foo() {
  "use strict";
  x = 1;//emite erro em navegadores suportados
}

Reference: http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/

Answer 3

'use Strict' is used to expose exceptions to your javascript code, seeing errors in more detail

Example

    function isStrictMode(){
      return !this;
    } 
    //retorna falso, uma vez que "this" se refere ao objeto global e '!this' se torna falso

    function isStrictMode(){   
      "use strict";
       return !this;
   } 
  //retorna verdadeiro, pois no modo estrito, a palavra-chave "this" não se refere ao objeto global, ao contrário JS tradicionais. Então, aqui, "this" é nulo e '!this' se torna verdade.

Answer 4

Javascript was originally designed to be easy to learn by inexperienced programmers. And so they made Javascript into a language where you’re allowed to do all sorts of stupid things - the compiler rarely complains. I think everyone has already realised that it is better for the compiler to warn us of the mistakes we make, rather than silently ignoring the mistakes. "Strict mode" changes Javascript semantics to a stricter mode, in which probable error situations are rejected by the compiler. Example:

var length = 1;
...
lenght = 2;  // "length" mal escrito - em JavaScript normal
             // uma nova variável global chamada "lenght" é
             // criada

'use strict';
var length = 1;
...
lenght = 2;  // "length" mal escrito - em "strict mode" uma
             // excepção é lançada

It is important to note that the "Strict mode" changes the semantics of the program. A program that worked correctly without "Strict mode" can crash with "Strict mode" active. Moreover the "Strict mode" is not supported by all browsers, and therefore it is necessary to be careful because code that works correctly with the "Strict mode" active, may not work in browsers that do not support the "Strict mode".

Answer 5

Caio Gondim wrote a very good article about Infinite Loop that says the following:

Strict mode is a new Ecmascript 5 Feature that allows Javascript code to run in a more rigorous mode. In this mode, the Javascript engine has its behavior modified, generating errors that were previously silenced and even prohibiting the use of certain parts of the language that are considered problematic, thus forcing us to write better quality code and helping to catch bugs earlier.

There in the article it also exemplifies how to use. I suggest taking a look.

http://loopinfinito.com.br/2013/07/16/javascript-strict-mode/

Answer 6

"use Strict" is a directive where you are told that the compiler will not allow you to make faults in your code that are not considered errors by the interpreter, but may cause you headaches. For example, Javascript allows you to use a variable without being declared, or reset the variable Arguments on the job:

The code below is considered valid without the use of the "use Strict directive":

function f() {
  var arguments = [];
}

x = 0;

However, if used "use Strict":

"use strict";

function f() {
  var arguments = []; // SyntaxError: Variable name may not be eval or arguments in strict mode
}

x = 0; // ReferenceError: x is not defined