¿Qué es el modo estricto de JavaScript y cómo podemos habilitarlo?

JavaScript es un lenguaje indulgente, ya que ignora los errores tontos de los desarrolladores o programadores o los errores en el código, como la terminación de la declaración, la declaración de variables, el tipo de datos incorrecto de la variable, los problemas de elevación y muchos más. A veces, estos errores dan resultados inusuales que dificultan que los programadores o desarrolladores encuentren un error en un código largo como 1000 líneas de código. Así que necesito algo en lo que los desarrolladores sepan sus errores en lugar de que JavaScript interfiera o haga algo aquí. Para eliminar estos problemas, » use Strict» entra en escena.

El modo estricto era una característica nueva en ECMAScript 5 que le permite colocar un programa o una función en un contexto operativo «estricto». Este contexto estricto evita que se realicen ciertas acciones y genera más excepciones. La declaración “uso estricto”; indica al navegador que utilice el modo estricto, que es un conjunto de funciones de JavaScript reducido y más seguro.

Ejemplo 1:

  • índice.html

HTML

<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style type="text/css">
    #box {
        height: 20vh;
        width: 10vw;
        background-color: coral;
        margin: 100px;
        border-radius: 4px;
        border: 2px palevioletred solid;
        margin-bottom: 0px;
    }
 
    p {
        color: red;
        margin-left: 100px;
    }
</style>
 
<body>
    <div id="box"></div>
     
 
 
<p>Box clicked: <span id="click-count">0</span> times</p>
 
 
 
    <script type="text/javascript" src="script.js"></script>
</body>
 
</html>
  • guión.js

Javascript

const box = document.getElementById('box');
const click = document.getElementById('click-count');
//Not declared count here
count = 0;
box.addEventListener('click', function () {
    count++;
    console.log(count);
    click.innerText = count + " ";
});

Producción:

Así que aquí la variable count no se declara en el código JavaScript, pero funciona bien sin ningún error porque se supone que JavaScript es indulgente con los desarrolladores, por lo que en realidad no crea una variable como var o const, sino que crea una variable como una variable global.

Ejemplo 2:

Javascript

<script>
    // var c execute before declare
    console.log(c);
    var c=10;
 
    //function call before declare
    sum(30,40)
    function sum(a,b){
        //add is not declared as var or let
        add = a + b;
        console.log(add);
        //string compare with integer gives true
        console.log('2'==2);
     }
</script>

Producción: 

Ejemplo 3:

Javascript

//function call before declare
operation(30, 40)
function operation(a, b) {
    // undefined output because variable
    console.log(subtract); 
    //hoisting works as c is declared as var.
 
    //subtract variable is declared as var
    //browser understand statement terminate
    var subtract = a - b
    console.log(subtract); // -10 output
 
    //create error because add is not defined yet
    console.log(add);
    //because browser also dont know add is defined or not
 
    //add is not declared
    add = a + b;
    console.log(add);
}

Producción:

Modo estricto: se prefiere obtener errores en lugar de dejarlos ir e interferir. Por lo tanto, es una forma de agregar una verificación estricta en JavaScript que cometería menos errores. Después de usarlo ahora, JavaScript no lo llena automáticamente, sino que genera un error. Por lo tanto, los desarrolladores ahora pueden corregir sus errores fácilmente en lugar de tener resultados inesperados del lado de JavaScript y dedican mucho tiempo a corregir estos errores ahora, casi todos los navegadores admiten el modo estricto.

Ejemplo 4: Tomemos el mismo Ejemplo 1 y usemos el modo estricto ahora:

Javascript

"use strict"
const box = document.getElementById('box');
const click = document.getElementById('click-count');
//Not declared count here
count = 0;
box.addEventListener('click', function () {
    count++;
    console.log(count);
    click.innerText = count + " ";
});

Producción:

Aquí da un error porque el conteo está definido pero no declarado, por lo que para javascript ahora, después de usar el modo estricto, se desconoce el conteo. Ahora javascript identifica el error fácilmente. Si count se declara como var o let o const, entonces funciona bien.

Comprendamos cómo se puede habilitar el modo estricto en JavaScript.

Podemos habilitar un modo estricto en el código JavaScript escribiendo esta simple declaración: ‘use strict’; O «uso estricto».

Podemos aplicar el modo estricto a un script completo o a una función individual o sección de código.

  • La parte superior de todo el script es aplicar el modo estricto globalmente.
  • Está dentro de las funciones para aplicarlo solo a una función en particular.

Permite que el modo estricto y el modo no estricto coexistan juntos. Por lo tanto, puede ser fácil en lugares donde es necesario agregar un nuevo código JavaScript en archivos JavaScript existentes.

Ejemplo 5:

Javascript

const box = document.getElementById('box');
const click = document.getElementById('click-count');
// declared count here
var count = 0;
box.addEventListener('click', function () {
    //non strict mode
    "use strict"
    count++;
    //demo is not declared
    demo = 100;
    console.log(count);
    click.innerText = count + " ";
});

Producción: 

Propiedades del modo estricto:

  • Valores duplicados no permitidos

Ejemplo 6:

Javascript

function xyz(a, a) {
    'use strict';
    console.log(a + a);
}
xyz(10, 20);

Producción:

  • No se puede eliminar la variable o eliminar no se puede aplicar en modo estricto

Ejemplo 7:

Javascript

"use strict"
var x = 3.14;
delete x;
console.log(x)

Producción:

 

Publicación traducida automáticamente

Artículo escrito por surbhikumaridav y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *