JavaScript é uma linguagem muito forte e adaptável, mas também tem potencial para problemas que podem ser difíceis de detectar. Neste artigo do blog, veremos cinco das falhas mais comuns que os desenvolvedores encontram ao trabalhar com JavaScript, bem como os motivos e soluções para esses problemas. Quer você seja um desenvolvedor experiente ou esteja apenas começando, conhecer esses perigos comuns economizará horas de solução de problemas.

Este artigo do blog foi escrito por Rupesh Sharma, também conhecido como @hackyrupesh.

1. Variáveis ​​globais não intencionais

O problema

JavaScript permite que variáveis ​​sejam definidas sem declará-las explicitamente, o que pode levar a variáveis ​​globais não intencionais. Isso é particularmente problemático em grandes bases de código ou ao trabalhar com vários desenvolvedores, pois pode levar a conflitos e erros difíceis de depurar.

Exemplo

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

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

No exemplo acima, userName é declarado sem var, let ou const, tornando-se automaticamente uma variável global. Isso pode levar a um comportamento inesperado, especialmente se userName for usado posteriormente em outro lugar no código.

A solução

Sempre declare variáveis ​​usando let, const ou var. Isso deixa claro se uma variável é local ou global e evita variáveis ​​globais acidentais.

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

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

Referências

• Mozilla Developer Network (MDN): variáveis ​​JavaScript

2. Uso indevido desta palavra-chave

O problema

O valor disso em JavaScript pode mudar dependendo do contexto em que uma função é chamada. Isso pode levar a um comportamento inesperado, especialmente ao usar retornos de chamada ou manipuladores de eventos.

Exemplo

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

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

Neste exemplo, a palavra-chave this dentro de greet refere-se ao objeto global (ou indefinido no modo estrito) quando passado como um retorno de chamada para setTimeout, em vez do objeto do usuário.

A solução

Use funções de seta ou bind() para garantir que isso permaneça vinculado ao objeto correto.

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

Alternativamente, o uso de funções de seta também pode resolver o problema, uma vez que elas não possuem seu próprio 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"

Referências

• MDN: isso em JavaScript

3. Confusão indefinida e nula

O problema

JavaScript possui indefinido e nulo, o que pode causar confusão e bugs quando usados ​​de forma intercambiável ou não verificados corretamente.

Exemplo

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"

Aqui, user.age é nulo, mas a condição if o trata como falso. Isso pode causar problemas se null for um estado válido.

A solução

Sempre verifique indefinido e nulo explicitamente se ambos forem valores válidos em seu aplicativo.

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

Usar igualdade estrita (===) também pode ajudar a distinguir entre indefinido e nulo.

Referências

• MDN: Nulo
• MDN: indefinido

4. Inferno de retorno de chamada

O problema

As funções de retorno de chamada são uma maneira comum de lidar com operações assíncronas em JavaScript. No entanto, quando estão aninhados uns nos outros, podem criar estruturas profundamente aninhadas, muitas vezes referidas como "inferno de retorno de chamada". Isso torna o código difícil de ler, manter e depurar.

Exemplo

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

Essa estrutura profundamente aninhada é difícil de seguir e ainda mais difícil de depurar.

A solução

Use Promises ou async/await para nivelar a estrutura e tornar o código mais legível.

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

Ou, 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();

Referências

• MDN: Promessas
• MDN: assíncrono/aguardar

5. Problemas de precisão de ponto flutuante

O problema

JavaScript usa o padrão IEEE 754 para representar números, o que pode levar a problemas de precisão, especialmente com aritmética de ponto flutuante. Isso pode causar resultados inesperados nos cálculos.

Exemplo

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

O resultado de 0,1 0,2 não é exatamente 0,3 devido a erros de precisão de ponto flutuante.

A solução

Para evitar isso, você pode arredondar o resultado para um número fixo de casas decimais.

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



Como alternativa, trabalhe com números inteiros dimensionando os números antes de executar as operações e depois reduzindo-os novamente.


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





  
  
  Referências

• MDN: Número.EPSILON
• O problema com aritmética de ponto flutuante

Conclusão

JavaScript é uma linguagem cheia de idiossincrasias e riscos ocultos, mas conhecer as falhas mais frequentes e como evitá-las permite desenvolver um código mais limpo e confiável. Desde variáveis ​​globais indesejadas até preocupações com precisão de ponto flutuante, cada uma dessas falhas pode criar grandes dificuldades se não for resolvida. No entanto, com métodos de codificação adequados e as ferramentas corretas, você pode reduzir essas preocupações e tornar seu código JavaScript mais resiliente.

este blog escrito por Chatgpt ??