JavaScript "usar estrito"


Índice

    Mostrar índice


"use strict"; Define que O código JavaScript deve ser executado em "modo estrito".


A diretiva "uso estrito"

A diretiva "use strict" era nova no ECMAScript versão 5.

Não é uma declaração, mas uma expressão literal, ignorada pelas versões anteriores de JavaScript.

O objetivo de "use strict" é indicar que o código deve ser executado em "modo estrito".

Com o modo estrito, você não pode, por exemplo, usar variáveis não declaradas.

Todos os navegadores modernos suportam "uso estrito", exceto o Internet Explorer 9 e inferior:

Directive
"use strict" 13.0 10.0 4.0 6.0 12.1

Os números na tabela especificam a primeira versão do navegador que suporta totalmente a diretiva.

Você pode usar o modo estrito em todos os seus programas. Ajuda você a escrever um código mais limpo, como impedir que você use variáveis não declaradas.

"use strict" é apenas uma string, então o IE 9 não gerará um erro, mesmo que não o entenda.


Declarando modo estrito

O modo estrito é declarado adicionando "use strict"; ao início de um script ou uma função.

Declarado no início de um script, possui escopo global (todo código no script será executado em modo estrito):

Exemplo

"use strict";
x = 3.14;       // This will cause an error 
 because x is not declared

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Using a variable without declaring it, is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
x = 3.14;  // This will cause an error (x is not defined).
</script>

</body>
</html>

Exemplo

"use strict";
myFunction();

function myFunction() {
   y = 3.14;   // This will also cause an error 
 because y is not declared
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Global "use strict" declaration.</h2>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
myFunction();

function myFunction() {
  y = 3.14;   // This will cause an error (y is not defined)
}
</script>

</body>
</html>

Declarado dentro de uma função, possui escopo local (apenas o código dentro da função é no modo estrito):

x = 3.14;       // This will not cause an error.
 
myFunction();
function 
 myFunction() {
  "use strict";
    y = 3.14;   // This will cause an error
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<p>"use strict" in a function will only cause errors in that function.</p>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
x = 3.14;    // This will not cause an error.
myFunction();

function myFunction() {
  "use strict";
  y = 3.14;  // This will cause an error (y is not defined).
}
</script>

</body>
</html>


O “uso estrito”; Sintaxe

A sintaxe, para declarar o modo estrito, foi projetada para ser compatível com versões mais antigas do JavaScript.

Compilar um literal numérico (4 + 5;) ou um literal de string ("John Doe";) em um O programa JavaScript não tem efeitos colaterais. Ele simplesmente compila para um arquivo inexistente variável e morre.

Então "use strict"; só importa para novos compiladores que "entendem" o significado disso.


Por que modo estrito?

O modo estrito facilita a gravação de JavaScript "seguro".

O modo estrito transforma a "sintaxe incorreta" anteriormente aceita em erros reais.

Por exemplo, em JavaScript normal, digitar incorretamente o nome de uma variável cria um novo variável global. No modo estrito, isso gerará um erro, tornando impossível criar acidentalmente uma variável global.

Em JavaScript normal, um desenvolvedor não receberá nenhum feedback de erro atribuir valores a propriedades não graváveis.

No modo estrito, qualquer atribuição a uma propriedade não gravável, um objeto somente getter propriedade, uma propriedade inexistente, uma variável inexistente ou uma propriedade inexistente objeto, gerará um erro.


Não permitido no modo estrito

Não é permitido usar uma variável, sem declará-la:

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Using a variable without declaring it, is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
x = 3.14;  // This will cause an error (x is not defined).
</script>

</body>
</html>

Objetos também são variáveis.

Não é permitido usar um objeto, sem declará-lo:

"use strict";
 x = {p1:10, p2:20};      // This will cause an error

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Using an object without declaring it, is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
x = {p1:10, p2:20};   // This will cause an error (x is not defined).
</script>

</body>
</html>

Não é permitido excluir uma variável (ou objeto).

"use strict";
let x = 3.14;
delete x;                // This 
will cause an error

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>With &quot;use strict&quot;:</h2>
<h3>Deleting a variable (or object) is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
let x = 3.14;
delete x;     // This will cause an error 
</script>

</body>
</html>

Não é permitido excluir uma função.

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Deleting a function is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

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

</body>
</html>

Não é permitido duplicar o nome de um parâmetro:

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Duplicating a parameter name is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

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

</body>
</html>

Literais numéricos octais não são permitidos:

"use strict";
let x = 010;             // This 
will cause an error

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Octal numeric literals are not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
let x = 010;   // This will cause an error 
</script>

</body>
</html>

Caracteres de escape octais não são permitidos:

"use strict";
let x = "\010";            // This will cause an error

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Octal escape characters are not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
let x = "\010";   // This will cause an error 
</script>

</body>
</html>

Não é permitido gravar em uma propriedade somente leitura:

"use strict";
const obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});

obj.x = 3.14;            // This 
will cause an error

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Writing to a read-only property is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
const obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});

obj.x = 3.14;   // This will cause an error
</script>

</body>
</html>

Não é permitido gravar em uma propriedade get-only:

"use strict";
const obj = {get x() 
{return 0} };
obj.x = 3.14;            // This 
will cause an error

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Writing to a get-only property is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
const obj = {get x() {return 0} };

obj.x = 3.14;   // This will cause an error
</script>

</body>
</html>

Não é permitido excluir uma propriedade que não pode ser excluída:

"use strict";
delete Object.prototype; // This will cause an error

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Deleting an udeletable property is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
delete Object.prototype;   // This will cause an error 
</script>

</body>
</html>

A palavra eval não pode ser usada como variável:

"use strict";
let eval = 3.14;         // This will cause an error

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>The string "eval" cannot be used as a variable.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
let eval = 3.14;   // This will cause an error 
</script>

</body>
</html>

A palavra argumentos não pode ser usada como variável:

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>The string "arguments" cannot be used as a variable.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
let arguments = 3.14;   // This will cause an error 
</script>

</body>
</html>

A instrução with não é permitida:

"use strict";
with (Math){x = cos(2)}; // This will cause an error

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>The with statement is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
with (Math){x = cos(2)};   // This will cause an error 
</script>

</body>
</html>

Por motivos de segurança, eval() não tem permissão para criar variáveis no escopo do qual foi chamado.

No modo estrito, uma variável não pode ser usada antes de ser declarada:

"use strict";
eval ("x = 2");
alert (x);      // This 
will cause an error

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>For security reasons, eval() is not allowed to create variables in the scope from which it was called.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
eval ("x = 2");
alert (x);      // This will cause an error 
</script>

</body>
</html>

No modo estrito, eval() não pode declarar uma variável usando a palavra-chave var:

"use strict";
eval ("var x = 2");
alert (x);    // This 
will cause an error

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>For security reasons, eval() is not allowed to create variables in the scope from which it was called.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
eval ("var x = 2");
alert (x);      // This will cause an error 
</script>

</body>
</html>

eval() não pode declarar uma variável usando a palavra-chave let:

eval ("let x = 2");
alert (x);        // This 
will cause an error

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Using eval()</h2>
<h3>For security reasons, eval() is not allowed to create variables in the scope from which it was called.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
eval ("let x = 2");
alert (x);      // This will cause an error 
</script>

</body>
</html>

A palavra-chave this em funções se comporta diferentemente no modo estrito.

A palavra-chave this refere-se ao objeto que chamada de função.

Se o objeto não for especificado, funciona em modo estrito retornará indefinido e funcionará normalmente mode retornará o objeto global (janela):

"use strict";
function myFunction() {
  
  alert(this); // will alert "undefined"
}
myFunction(); 

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Inside functions, the "this" keyword is no longer the global object if not specified:</h3>

<script>
"use strict";
function myFunction() {
  alert(this);
}
myFunction();
</script>

</body>
</html>

À prova de futuro!

Palavras-chave reservadas para futuras versões de JavaScript NÃO podem ser usadas como variáveis nomes em modo estrito.

Estes são:

  • implements
  • interface
  • let
  • package
  • private
  • protected
  • public
  • static
  • yield
"use strict";
let public = 1500;      // This will cause an error

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>With "use strict":</h2>
<h3>Future reserved keywords are not allowed in strict mode.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
let public = 1500;   // This will cause an error 
</script>

</body>
</html>

Atenção!

A diretiva "use strict" só é reconhecida no início de um script ou uma função.