JavaScript | Errores comunes

JavaScript es un lenguaje fácil para comenzar, pero dominarlo requiere mucho esfuerzo, tiempo y paciencia. Los principiantes a menudo cometen algunos errores bien conocidos que vuelven y los muerden. En este artículo, cubriremos algunos de los errores de aprendizaje más comunes que cometen las personas y descubriremos cómo superarlos. Muchos de estos consejos serán aplicables fuera de JavaScript o incluso del desarrollo web.

Sensibilidad de mayúsculas y minúsculas

Los nombres de variables y funciones distinguen entre mayúsculas y minúsculas. Y recuerde que la función javascript nativa y las propiedades CSS en javascript son camelCase.

Ejemplo:

// it should be 'Id' not 'ID'
getElementById('geeksforgeeks') != getElementByID('geeksforgeeks'); 
  
// 'geeksforgeeks' again does not equal 'GeeksForGeeks'
getElementById('geeksforgeeks') != getElementById('GeeksForGeeks');

Uso incorrecto del operador de comparación de declaraciones ‘IF’

Estamos hablando del operador “==” y el operador “=”. El primero hace una comparación y el segundo asigna un valor a una variable. El error creado depende del idioma. Algunos idiomas arrojarán un error, pero JavaScript realmente evaluará la declaración y devolverá verdadero o falso.

Ejemplo:

// This if statement returns false (as expected) because x is not equal to 5:
var x = 0;
if (x == 5);
  
// This if statement returns true (not expected) and Assigns 5 to x:
var x = 0;
if (x = 5);

Javascript se escribe libremente, excepto en las declaraciones de cambio. JavaScript NO se escribe libremente cuando se trata de comparaciones de casos.
Ejemplo:

var myVar = 5;
if(myVar == '5'){ 
  // returns true since Javascript is loosely typed
  alert('Welcome to GeeksforGeeks'); 
}
  
switch(myVar){
  case '5':
  // this alert will not show since the data types don't match
  alert('Welcome to GeeksforGeeks'); 
}

Olvidar usar ‘esto’

Otro error común es olvidarse de usar ‘esto’. Las funciones definidas en un objeto de JavaScript acceden a las propiedades de ese objeto de JavaScript y no pueden usar el identificador de referencia ‘this’.
Ejemplo:

// the following is incorrect:
  
function myFunction() {
  var myObject = {
     objProperty: "GeeksforGeeks welcomes you",
     objMethod: function() {
        alert(objProperty);
        }
     };
  myObject.objMethod();
} 
myFunction();
  
// the following is correct:
  
function myFunction() {
  var myObject = {
     objProperty: "GeeksforGeeks welcomes you",
     objMethod: function() {
        alert(this.objProperty);
        }
     };
  myObject.objMethod();
} 
myFunction();

Indefinido != nulo

En JavaScript, indefinido significa que se ha declarado una variable pero aún no se le ha asignado un valor, nulo es un valor de asignación. Se puede asignar a una variable como una representación sin valor.
Ejemplo:

// undefined
let TestVar;
console.log(TestVar); // shows undefined
console.log(typeof TestVar); // shows undefined
  
// null
let TestVar = null;
console.log(TestVar); // shows null
console.log(typeof TestVar); // shows object
  
// it is clear that undefined and null are two distinct types:
// undefined is a type itself (undefined) while null is an object.
  
null === undefined // false
null == undefined // true
null === null // true

Adición y concatenación confusas

Una adición se trata de agregar números y la concatenación se trata de agregar strings. En JavaScript, ambas operaciones usan el mismo operador ‘+’. Debido a esto, agregar un número como un número producirá un resultado diferente de agregar un número como una string y muchos principiantes tienen confusión al respecto.

Ejemplo:

// the result in x is 30
var x = 5 + 25;  
  
// the result in x is '525'
var x = 5 + '25';  

No entender cómo funcionan los alcances :

Un concepto difícil de entender para los principiantes son las reglas de alcance y los cierres de JavaScript. Las funciones conservan la visibilidad de las variables en sus ámbitos principales. Pero debido a que estamos retrasando la ejecución con un setTimeout, cuando llega el momento de que las funciones se ejecuten, el ciclo ya ha terminado y la variable I se incrementa a 6.

La función autoejecutable en el comentario funciona porque copia la variable I por valor y mantiene una copia privada para cada función de tiempo de espera.

Ejemplo:

// Output will be 6
for(var i = 0; i < 5; i++){
    setTimeout(function(){
        console.log(i+1);
    }, 100*i);
}

Conclusión

Cuanto mejor comprenda por qué y cómo JavaScript funciona y no funciona, más sólido será su código y más podrá aprovechar de manera efectiva el verdadero poder del lenguaje y mejorar. Por el contrario, la falta de una comprensión adecuada de los paradigmas y conceptos de JavaScript es, de hecho, donde se encuentran muchos problemas de JavaScript.