Neste artigo você vai conhecer 10 erros de inciante em JavaScript que você deve evitar, para deixar os seus projetos melhores!
Fala programador(a), beleza? Bora aprender mais sobre erros comuns em JavaScript!
JavaScript é uma linguagem poderosa e versátil, mas também pode ser um pouco confusa para os iniciantes.
Aqui estão 10 erros comuns em JavaScript que você deve evitar para escrever código mais limpo e confiável:
Esquecer de colocar os parênteses nas funções de callback
Quando você passa uma função como argumento para outra função, é comum esquecer de colocar os parênteses ao final da função de callback.
Isso pode levar a erros difíceis de depurar, já que a função pode ser chamada mais tarde de forma inesperada.
Por exemplo, aqui está um código que esquece os parênteses ao chamar uma função de callback:
setTimeout(function() {
console.log("Hello, world!");
}, 1000);
Para corrigir esse erro, basta adicionar os parênteses ao final da função de callback:
setTimeout(function() {
console.log("Hello, world!");
}, 1000);
Usar uma atribuição inválida no operador in
O operador in permite que você verifique se um objeto possui uma determinada propriedade.
No entanto, é comum esquecer que ele só funciona com strings e não com variáveis.
Por exemplo, aqui está um código que usa uma atribuição inválida no operador in:
const object = {
name: "John"
};
const key = "name";
if (key in object) {
console.log("The object has a name property.");
}
Para corrigir esse erro, basta usar uma string diretamente no lugar da variável:
if ("name" in object) {
console.log("The object has a name property.");
}
Usar a palavra-chave function ao criar funções anônimas
Quando você cria uma função anônima, é comum esquecer de usar a palavra-chave function.
Isso pode levar a erros difíceis de depurar, já que o JavaScript tentará interpretar o conteúdo da função como uma expressão.
Por exemplo, aqui está um código que usa a palavra-chave function ao criar uma função anônima:
setTimeout(function() {
console.log("Hello, world!");
}, 1000);
Para corrigir esse erro, basta adicionar os parênteses ao final da função de callback:
setTimeout(function() {
console.log("Hello, world!");
}, 1000);
Esquecer de usar o await dentro de uma função async
Quando você usa a palavra-chave async para criar uma função assíncrona, é importante lembrar de usar o await na frente de todas as chamadas de função assíncronas.
Caso contrário, a função retornará imediatamente e não esperará pelo resultado da chamada assíncrona.
Por exemplo, aqui está um código que esquece o await ao chamar uma função assíncrona:
async function getData() {
const response = fetch("https://example.com/data.json");
const data = await response.json();
return data;
}Para corrigir esse erro, basta adicionar o await na frente da chamada de função assíncrona:
async function getData() {
const response = await fetch("https://example.com/data.json");
const data = await response.json();
return data;
}
Este é um dos erros de inciante em JavaScript mais comuns quando o programador começa a trabalhar com programação assíncrona.
Usar o operador de igualdade dupla (==) em vez do triplo (===)
O operador de igualdade dupla (==) permite que você verifique se dois valores são iguais, mas ele não leva em consideração o tipo de cada valor.
Isso pode levar a comparações inesperadas e erros difíceis de depurar.
Por exemplo, aqui está um código que usa o operador de igualdade dupla (==) para comparar dois valores:
if (1 == "1") {
console.log("The values are equal.");
}
Para corrigir esse erro, basta usar o operador de igualdade triplo (===), que leva em consideração o tipo de cada valor:
if (1 === "1") {
console.log("The values are equal.");
}Usar o operador de atribuição de adição (+=) em vez do operador de adição (+)
O operador de atribuição de adição (+=) é usado para adicionar um valor a uma variável existente e atribuir o resultado de volta à mesma variável.
No entanto, é comum esquecer de usar o operador de adição (+) para concatenar strings.
Por exemplo, aqui está um código que usa o operador de atribuição de adição (+=) para concatenar strings:
let str = "Hello, "; str += "world!"; console.log(str); // "Hello, world!"
Para corrigir esse erro, basta usar o operador de adição (+) para concatenar as strings:
let str = "Hello, " + "world!"; console.log(str); // "Hello, world!"
Esquecer de usar o break em um switch
Quando você usa a estrutura de controle switch, é importante lembrar de adicionar um break ao final de cada caso, a menos que você queira que o código caia no próximo caso.
Caso contrário, o código continuará a ser executado até encontrar um break ou até o final do switch.
Por exemplo, aqui está um código que esquece o break em um switch:
const x = 3;
switch (x) {
case 1:
console.log("x is 1");
case 2:
console.log("x is 2");
case 3:
console.log("x is 3");
default:
console.log("I don't know what x is.");
}
O código acima imprimirá todas as mensagens, já que não há nenhum break para interromper a execução do código.
Para corrigir esse erro, basta adicionar um break ao final de cada caso:
const x = 3;
switch (x) {
case 1:
console.log("x is 1");
break;
case 2:
console.log("x is 2");
break;
case 3:
console.log("x is 3");
break;
default:
console.log("I don't know what x is.");
}
Esquecer de usar o const ou o let ao declarar variáveis
O JavaScript possui três palavras-chave para declarar variáveis: var, let e const.
É importante escolher a palavra-chave correta de acordo com o que você quer fazer com a variável.
O var é uma palavra-chave antiga e deve ser evitada, pois ela permite que você redeclare a mesma variável várias vezes e possui escopo de função ao invés de escopo de bloco.
O let é uma palavra-chave mais recente que permite que você redeclare a mesma variável dentro do mesmo escopo de bloco, mas não permite que você redeclare a mesma variável em escopos de bloco diferentes.
O const é uma palavra-chave mais recente que não permite que você redeclare a mesma variável e exige que você atribua um valor imediatamente após a declaração.
Por exemplo, aqui está um código que esquece de usar o const ou o let ao declarar uma variável:
x = 10; console.log(x); // 10
Para corrigir esse erro, basta adicionar a palavra-chave let ou const antes da declaração da variável:
const x = 10; console.log(x); // 10
Esquecer de usar o new ao criar instâncias de objetos
Quando você cria uma nova instância de um objeto em JavaScript, é importante lembrar de usar a palavra-chave new antes do construtor do objeto.
Caso contrário, a instância não será criada corretamente e poderá levar a erros difíceis de depurar.
Por exemplo, aqui está um código que esquece o new ao criar uma instância de um objeto:
const person = Person("John", "Doe");
console.log(person); // undefined
Para corrigir esse erro, basta adicionar o new antes do construtor do objeto:
const person = new Person("John", "Doe");
console.log(person); // Person { name: "John", surname: "Doe" }
Esquecer de fechar as chaves de um bloco de código
Quando você cria um bloco de código em JavaScript, é importante lembrar de fechar as chaves ao final do bloco.
Caso contrário, o código poderá continuar sendo executado e poderá levar a erros difíceis de depurar.
Por exemplo, aqui está um código que esquece de fechar as chaves de um bloco de código:
if (true) {
console.log("This code will run.");
console.log("This code will also run.");
console.log("This code will not run.");
Para corrigir esse erro, basta adicionar as chaves ao final do bloco:
if (true) {
console.log("This code will run.");
console.log("This code will also run.");
}
console.log("This code will run.");
Este está entre os erros de inciante em JavaScript que mais ocorrem com quem está iniciando na linguagem.
Deixe um comentário contando o que achou deste artigo 🙂
Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:
Conclusão
Neste artigo você conheceu 10 erros de inciante em JavaScript, qual deles você já cometeu?
Esses são alguns dos erros mais comuns em JavaScript que você deve evitar.
Ao seguir essas dicas, você poderá escrever código mais limpo e confiável e evitar problemas difíceis de depurar.
Lembre-se de testar o seu código sempre que possível e de usar a documentação do JavaScript como guia para aprender a usar as diversas funcionalidades da linguagem de maneira correta.
Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.
Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!
Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!