5 Boas Práticas que irão Melhorar seu Código em JavaScript

Victor De Carli — Mon, 23 Sep 2024 15:30:00 +0000

Se você já começou sua jornada com JavaScript, sabe que dominar a linguagem é só o primeiro passo. A qualidade do código que você escreve pode fazer toda a diferença, tanto para facilitar a manutenção quanto para evitar problemas a longo prazo. Seguir boas práticas não só melhora a legibilidade do código, como também ajuda na colaboração com outros desenvolvedores e reduz o risco de bugs.

Neste artigo, vou compartilhar 5 boas práticas essenciais que todo desenvolvedor deve adotar ao escrever JavaScript. Essas dicas vão desde o uso correto de variáveis até a modularização do código, para garantir que seu código seja mais eficiente, organizado e fácil de entender. Vamos lá?

1. Use `const` e `let` ao invés de `var`:

Você já deve ter ouvido isso inúmeras vezes, mas acredite, essa é uma dica essencial para adotar no seu dia a dia.

Pense no var como aquela pessoa que não respeita limites, ele tem permissão para circular por todo o código, ignorando barreiras como se elas não existissem (no caso, o escopo de bloco). Imagine declarar uma variável dentro de um loop e, de repente, ela aparece fora dele como se nada tivesse acontecido — caos total.

Agora, com const e let, você impõe essas barreiras. Let se comporta como aquele colega que sabe respeitar os limites, enquanto const é aquele amigo teimoso que nunca muda de opinião. Isso significa que, além de melhorar a organização do seu código, você evita bugs difíceis de rastrear que acontecem por causa dessa “liberdade” do var.

Então, utilizar o var em navegadores modernos é basicamente pedir para criar bugs!

// Com var (confusão garantida)
for (var i = 0; i < 3; i++) {
    console.log(i); // 0, 1, 2
}
console.log(i); // 3 (Você esperava que o i ficasse apenas dentro do loop? Pois é... surpresa!)


// Com let (tudo nos seus devidos lugares)
for (let i = 0; i < 3; i++) {
    console.log(i); // 0, 1, 2
}
console.log(i); // Erro: i is not defined (como deveria ser!)

Dica: Use const para variáveis que não vão mudar de valor, e let para aquelas que podem ser reatribuídas.

Exemplo:

// Usando const (valor constante)
const pi = 3.14159;
console.log(pi); // 3.14159

// Tentar reatribuir um valor a pi causará erro
// pi = 3.14; // Erro: Assignment to constant variable.

// Usando let para valores que mudam
let totalPedidos = 0;
totalPedidos += 1; // Novo pedido chegou
console.log(`Total de pedidos: ${totalPedidos}`); // Total de pedidos: 1

// Um novo pedido chegou, então podemos atualizar a variável
totalPedidos += 1;
console.log(`Total de pedidos: ${totalPedidos}`); // Total de pedidos: 2

2. Destruturar Objetos e Arrays

Destruturar objetos e arrays é como abrir um presente e pegar direto o que te interessa, sem ter que vasculhar tudo. Em vez de acessar cada propriedade ou item individualmente, com a destruturação você pega exatamente o que precisa de forma rápida e elegante. — Muito mais prático, né?

// Sem destruturação (muito trabalho)
const pessoa = { nome: 'João', idade: 30, profissão: 'Engenheiro' };
const nome = pessoa.nome;
const idade = pessoa.idade;
console.log(nome, idade); // João 30

// Com destruturação (muito mais simples)
const { nome, idade } = pessoa;
console.log(nome, idade); // João 30

E a mesma mágica acontece com arrays. Vamos supor que você tem uma lista de valores e só quer os primeiros elementos. Você não precisa ficar pegando item por item. Com a destruturação, você pode pegar o que quiser de forma direta.

// Sem destruturação
const numeros = [10, 20, 30, 40];
const primeiro = numeros[0];
const segundo = numeros[1];
console.log(primeiro, segundo); // 10 20

// Com destruturação
const [primeiro, segundo] = numeros;
console.log(primeiro, segundo); // 10 20

Dica:

Use a destruturação sempre que precisar acessar múltiplos valores em um objeto ou array. Isso deixa o código mais limpo e legível.

3. Evite o uso excessivo de funções anônimas

Usar funções anônimas pode parecer conveniente, mas é como dar instruções sem dizer quem é o responsável. Quando tudo está funcionando corretamente, é mil maravilhas. Mas quando algo dá errado, quem você vai culpar? Fica difícil encontrar o problema. Nomear suas funções dá clareza ao código e facilita a depuração.

Nomeie suas funções e tenha controle total sobre o que cada uma faz.

// Função anônima (sem nome, sem controle)
setTimeout(function() {
    console.log('Função anônima em ação');
}, 1000);

// Função nomeada (muito mais organizado)
function exibeMensagem() {
    console.log('Função com nome');
}
setTimeout(exibeMensagem, 1000);

Dica:
Sempre que possível, nomeie suas funções de forma clara e descritiva. Um código mais legível é muito mais fácil de realizar manutenção.

4. Prefira `===` ao invés de `==`

Sabe aquele ditado de "Nem tudo que reluz é ouro"? Isso é exatamente o que acontece com ==. Ele faz conversões implícitas, mas acaba trazendo resultados inesperados.

Já o === não tem essa de "vamos dar um jeitinho". Ele faz uma comparação estrita, garantindo que o valor e o tipo sejam exatamente iguais.

Se == fosse um detetive, ele aceitaria qualquer pista, mesmo que não fosse confiável. Já o === só trabalha com provas sólidas. Ele garante que não haverá confusões no caminho.


// Comparação com == (pode ser traiçoeiro)
console.log(1 == '1'); // true (conversão implícita de tipo)

// Comparação com === (comparação estrita)
console.log(1 === '1'); // false (os tipos são diferentes e não são convertidos)

Dica:
Use sempre === para garantir que você está comparando tanto o valor quanto o tipo corretamente. Evita "surpresas" e ajuda a prevenir bugs.

5. Modularize seu código

Modularizar seu código é como organizar suas ferramentas em caixas separadas. Em vez de ter tudo jogado em um só lugar, você separa cada parte em "caixas" (ou módulos), e só pega o que vai utilizar. Isso deixa seu projeto mais organizado, fácil de manter e até mais rápido de entender.

Em vez de ter um arquivo gigantesco com funções e variáveis espalhadas, você pode dividir tudo em módulos reutilizáveis. É como ter uma oficina bem organizada, onde cada ferramenta tem seu devido lugar.


// Criando um módulo (operacoes.js)
export function soma(a, b) {
    return a + b;
}

export function subtracao(a, b) {
    return a - b;
}

// Usando o módulo em outro arquivo (app.js)
import { soma, subtracao } from './operacoes.js';
console.log(soma(5, 3)); // 8
console.log(subtracao(5, 3)); // 2

Dica:
Mantenha seu código organizado separando funcionalidades em módulos. Isso facilita a manutenção, o reuso e a colaboração em projetos maiores, onde várias partes do código precisam se comunicar de forma clara.

Boas práticas em JavaScript não só melhoram a organização e clareza do código, como também facilitam a manutenção. Aplicar essas cinco dicas pode fazer uma grande diferença positiva no seu código.

DEV Community: Victor De Carli