JavaScript es un lenguaje muy potente y adaptable, pero también tiene el potencial de generar problemas que pueden ser difíciles de detectar. En este artículo de blog, veremos cinco de los fallos más comunes que encuentran los desarrolladores al trabajar con JavaScript, así como los motivos y las soluciones a estos problemas. Ya sea que sea un desarrollador experimentado o esté comenzando, conocer estos peligros comunes le ahorrará horas de resolución de problemas.

Este artículo de blog fue escrito por Rupesh Sharma, también conocido como @hackyrupesh.

1. Variables globales no deseadas

El problema

JavaScript permite definir variables sin declararlas explícitamente, lo que puede generar variables globales no deseadas. Esto es particularmente problemático en bases de código grandes o cuando se trabaja con varios desarrolladores, ya que puede generar conflictos y errores difíciles de depurar.

Ejemplo

function setUserName() {
    userName = "Alice"; // userName is now a global variable
}

setUserName();
console.log(userName); // Outputs: "Alice"

En el ejemplo anterior, el nombre de usuario se declara sin var, let o const, por lo que automáticamente se convierte en una variable global. Esto puede provocar un comportamiento inesperado, especialmente si el nombre de usuario se utiliza posteriormente en otra parte del código.

La solución

Declare siempre variables usando let, const o var. Esto deja claro si una variable es local o global y evita variables globales accidentales.

function setUserName() {
    let userName = "Alice"; // userName is now a local variable
}

setUserName();
console.log(userName); // ReferenceError: userName is not defined

Referencias

• Red de desarrolladores de Mozilla (MDN): variables de JavaScript

2. Uso indebido de esta palabra clave

El problema

El valor de this en JavaScript puede cambiar según el contexto en el que se llama una función. Esto puede provocar un comportamiento inesperado, especialmente cuando se utilizan devoluciones de llamada o controladores de eventos.

Ejemplo

const user = {
    name: "Alice",
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

setTimeout(user.greet, 1000); // Outputs: "Hello, my name is undefined"

En este ejemplo, la palabra clave this dentro de greet se refiere al objeto global (o indefinido en modo estricto) cuando se pasa como una devolución de llamada a setTimeout, en lugar del objeto de usuario.

La solución

Utilice funciones de flecha o bind() para asegurarse de que permanezca vinculado al objeto correcto.

setTimeout(user.greet.bind(user), 1000); // Outputs: "Hello, my name is Alice"

Como alternativa, el uso de funciones de flecha también puede resolver el problema, ya que no tienen su propio contexto.

const user = {
    name: "Alice",
    greet: function() {
        setTimeout(() => console.log(`Hello, my name is ${this.name}`), 1000);
    }
};

user.greet(); // Outputs: "Hello, my name is Alice"

Referencias

• MDN: esto en JavaScript

3. Confusión indefinida y nula

El problema

JavaScript tiene indefinido y nulo, lo que puede generar confusión y errores cuando se usan indistintamente o no se verifican correctamente.

Ejemplo

let user = {
    name: "Alice",
    age: null
};

if (user.age) {
    console.log(`User's age is ${user.age}`);
} else {
    console.log("Age is not provided");
}
// Outputs: "Age is not provided"

Aquí, user.age es nulo, pero la condición if lo trata como falso. Esto puede causar problemas si se pretende que nulo sea un estado válido.

La solución

Siempre verifique explícitamente si hay indefinido y nulo si ambos son valores válidos en su aplicación.

if (user.age !== null && user.age !== undefined) {
    console.log(`User's age is ${user.age}`);
} else {
    console.log("Age is not provided");
}

Usar igualdad estricta (===) también puede ayudar a distinguir entre indefinido y nulo.

Referencias

• MDN: nulo
• MDN: Indefinido

4. Infierno de devolución de llamada

El problema

Las funciones de devolución de llamada son una forma común de manejar operaciones asincrónicas en JavaScript. Sin embargo, cuando están anidados unos dentro de otros, pueden crear estructuras profundamente anidadas, a menudo denominadas "infierno de devolución de llamada". Esto hace que el código sea difícil de leer, mantener y depurar.

Ejemplo

doSomething(function(result1) {
    doSomethingElse(result1, function(result2) {
        doAnotherThing(result2, function(result3) {
            doFinalThing(result3, function(finalResult) {
                console.log(finalResult);
            });
        });
    });
});

Esta estructura profundamente anidada es difícil de seguir y aún más difícil de depurar.

La solución

Utilice Promises o async/await para aplanar la estructura y hacer que el código sea más legible.

doSomething()
    .then(result1 => doSomethingElse(result1))
    .then(result2 => doAnotherThing(result2))
    .then(result3 => doFinalThing(result3))
    .then(finalResult => console.log(finalResult))
    .catch(error => console.error(error));

O, usando async/await:

async function executeTasks() {
    try {
        const result1 = await doSomething();
        const result2 = await doSomethingElse(result1);
        const result3 = await doAnotherThing(result2);
        const finalResult = await doFinalThing(result3);
        console.log(finalResult);
    } catch (error) {
        console.error(error);
    }
}

executeTasks();

Referencias

• MDN: Promesas
• MDN: asíncrono/espera

5. Problemas de precisión de punto flotante

El problema

JavaScript utiliza el estándar IEEE 754 para representar números, lo que puede generar problemas de precisión, especialmente con la aritmética de punto flotante. Esto puede provocar resultados inesperados en los cálculos.

Ejemplo

console.log(0.1   0.2); // Outputs: 0.30000000000000004
console.log(0.1   0.2 === 0.3); // Outputs: false

El resultado de 0,1 0,2 no es exactamente 0,3 debido a errores de precisión de punto flotante.

La solución

Para evitar esto, puedes redondear el resultado a un número fijo de decimales.

function isEqual(a, b) {
    return Math.abs(a - b) 



Como alternativa, trabaje con números enteros escalando los números antes de realizar las operaciones y luego reduzciéndolos nuevamente.


console.log((0.1 * 10   0.2 * 10) / 10); // Outputs: 0.3





  
  
  Referencias

• MDN: Número.EPSILON
• El problema de la aritmética de coma flotante

Conclusión

JavaScript es un lenguaje lleno de idiosincrasias y riesgos ocultos, pero conocer los fallos más frecuentes y cómo evitarlos te permite desarrollar un código más limpio y fiable. Desde variables globales no deseadas hasta preocupaciones sobre la precisión del punto flotante, cada una de estas fallas puede crear dificultades importantes si no se aborda. Sin embargo, con métodos de codificación adecuados y las herramientas correctas, puedes reducir estas preocupaciones y hacer que tu código JavaScript sea más resistente.

este blog escrito por Chatgpt ??