JavaScript (JS) es un lenguaje de programación ubicuo, flexible y muy popular, aunque también es propenso a errores y errores que hacen que la mayoría de los desarrolladores frunzcan el ceño y se vuelvan locos.
JS se utiliza ampliamente para potenciar la interactividad del usuario en el lado del cliente de la mayoría de las aplicaciones web. Sin JavaScript, quizás las cosas en la web podrían ser sin vida y poco estimulantes. No obstante, los flujos y reflujos del lenguaje a veces hacen que los desarrolladores tengan una relación de amor-odio con él.
Las fallas de JavaScript hacen que las aplicaciones produzcan resultados inesperados y perjudiquen la experiencia del usuario. A estudio de la Universidad de Columbia Británica (UBC) buscó descubrir las causas fundamentales y el impacto de los errores y errores de JavaScript. Los resultados del estudio revelaron algunos patrones comunes que afectan el desempeño de los programas JS.
Aquí hay un gráfico circular que muestra lo que descubrieron los investigadores:
En esta publicación de blog, ilustraremos algunas de las causas comunes de fallas de JavaScript destacadas en el estudio (además de otras que encontramos a diario) y cómo hacer que sus aplicaciones sean menos propensas a fallas.
DOM-related
El modelo de objetos de documento (DOM) juega un papel vital en la interactividad de los sitios web. La interfaz DOM permite manipular el contenido, el estilo y la estructura de una página web. Hacer interactivas las páginas web HTML simples, o manipular el DOM, es la razón por la que se lanzó el lenguaje de programación JavaScript.
Entonces, incluso con la introducción de tecnologías de backend JavaScript como Node.js, trabajar con DOM todavía forma una gran parte de lo que hace el lenguaje. Por lo tanto, DOM es una vía importante para introducir errores y errores en las aplicaciones JavaScript.
No es una sorpresa que el estudio del informe de errores de JavaScript descubrió que los problemas relacionados con DOM son responsables de la mayoría de las fallas, en un 68%.
Por ejemplo, algunos programadores de JavaScript comúnmente cometen el error de hacer referencia a un elemento DOM antes de que se cargue, lo que genera errores de código.
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
</script>
<div id="container"></div>
</body>
</html>Si el código anterior se ejecuta en el navegador Chrome, arrojará un error, que se puede ver en la consola del desarrollador:
El error se produce porque el código JavaScript generalmente se ejecuta de acuerdo con el orden en que aparece en un documento. Como tal, el navegador desconoce la referencia <div> elemento cuando se ejecuta el código.
Para resolver este problema, puede utilizar varios enfoques. El método más simple es colocar el <div id="container"></div> antes del comienzo de la etiqueta de secuencia de comandos. También puede usar una biblioteca de JavaScript como jQuery para asegurarse de que el DOM se cargue primero antes de que se pueda acceder a él.
<!DOCTYPE html>
<html>
<body>
<div id="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
</script>
</body>
</html>Syntax-based
Los errores de sintaxis tienen lugar cuando el intérprete de JavaScript no puede ejecutar un código sintácticamente incorrecto. Si crea una aplicación y el intérprete observa tokens que no coinciden con la sintaxis estándar del lenguaje de programación JavaScript, arrojará un error. Según el estudio del informe de errores de JavaScript, estos errores son responsables del 12% de todos los errores en el idioma.
Los errores gramaticales, como la falta de paréntesis o los corchetes que no coinciden, son las principales causas de errores de sintaxis en JavaScript.
Por ejemplo, cuando debe utilizar declaraciones condicionales para abordar varias condiciones, es posible que no proporcione los paréntesis según sea necesario, lo que provocará fallas de sintaxis.
Veamos el siguiente ejemplo.
if((x > y) && (y < 77) {
//more code here
}Sí, falta el último paréntesis de la declaración condicional. ¿Notaste el error con el código anterior?
Vamos a corregirlo.
if ((x > y) && (y < 77)) {
//more code here
}Para evitar tales errores de sintaxis, debe dedicar tiempo a aprender las reglas gramaticales del lenguaje de programación JavaScript. Con una amplia práctica de codificación, puede detectar los errores gramaticales fácilmente y evitar enviarlos con su aplicación desarrollada.
Improper usage of undefined/null keywords
Algunos desarrolladores de JavaScript no saben cómo utilizar indefinido y nulo palabras clave correctamente. De hecho, el estudio informó que el uso inadecuado de las palabras clave representa el 5% de todos los errores de JavaScript.
EL nulo La palabra clave es un valor de asignación, que generalmente se asigna a una variable para denotar un valor inexistente. Asombrosamente, nulo también es un objeto JavaScript.
Aquí hay un ejemplo:
var codeJS = null;
console.log(codeJS);
//output is null
console.log(typeof codeJS);
//output is objectPor otra parte, indefinido indica que una variable o cualquier otra propiedad, ya declarada, carece de un valor asignado. También puede implicar que no se ha declarado nada. indefinido es un tipo de sí mismo.
Aquí hay un ejemplo:
var codeJS;
console.log(codeJS);
//output is undefined
console.log(typeof codeJS);
//output is undefinedCuriosamente, si el operador de igualdad y el operador de identidad están acostumbrados a comparar el nulo y indefinido palabras clave, este último no las considera iguales.
console.log(null==undefined);
//output is true
console.log(null===undefined);
//output is falsePor lo tanto, conocer el uso correcto de la nulo y indefinido Las palabras clave pueden ayudarlo a evitar la introducción de errores en sus programas JavaScript.
Undefined methods
Otra causa común de errores en JavaScript es realizar una llamada a un método sin proporcionar su definición previa. Los investigadores de la UBC descubrieron que este error conduce al 4% de todos los errores de JavaScript.
Aquí hay un ejemplo:
var coder = {
name: "Peter",
age: 27,
speak() {
console.log(this.name);
}
};
coder.speakNow();Aquí está el error que se ve en la consola para desarrolladores de Chrome:
El error anterior se produce porque la función llamada, speakNow (), no se ha definido en el código JavaScript.
Improper usage of the return statement
En JavaScript, el retorno La sentencia se utiliza para detener la ejecución de una función para que se pueda generar su valor. Si se usa erróneamente, la declaración de devolución puede afectar el desempeño óptimo de las aplicaciones. Según el estudio, el uso incorrecto de la declaración de devolución conduce al 2% de todos los errores en las aplicaciones JavaScript.
Por ejemplo, algunos programadores de JavaScript suelen cometer el error de romper la declaración de retorno de forma incorrecta.
Si bien puede dividir una declaración de JavaScript en dos líneas y aún así obtener el resultado requerido, romper la declaración de retorno está invitando al desastre a su aplicación.
Aquí hay un ejemplo:
function number(n) {
var add = 5;
return;
n + add;
}
console.log(number(10));Cuando se ejecuta el código anterior, se ve un error indefinido en la consola de desarrollador de Chrome:
Por tanto, debes desistir de romper retorno declaraciones en su código JavaScript.
Conclusión
El lenguaje de programación JavaScript del lado del cliente viene con excelentes capacidades extensivas para potenciar las funcionalidades de las aplicaciones web modernas. Sin embargo, si no comprende las peculiaridades que hacen que el lenguaje funcione, el rendimiento de sus aplicaciones puede verse afectado.
Además, Desarrolladores de JavaScript requieren herramientas versátiles para solucionar problemas de rendimiento de sus aplicaciones y detectar errores y errores rápidamente.
Por lo tanto, con un conjunto completo de herramientas de prueba, puede identificar con confianza las anomalías que perjudican el rendimiento de su sitio web. Es lo que necesita para mejorar el rendimiento de su sitio y lograr una experiencia de usuario óptima.
¡Feliz programación de JavaScript sin errores!
Artículo escrito por Alfrick Opidi
