JavaScript Limpo: 10 boas práticas para elevar seu código

Quando se trata de programação em JavaScript, seguir boas práticas pode ser a diferença entre um código que flui sem problemas e um que constantemente causa frustração. Para alguém que vive e respira programação por anos, a importância dessas práticas torna-se claramente aparente.

Durante minha jornada como programador, experimentei em primeira mão os desafios e as recompensas de seguir essas práticas. Cada lição aprendida, cada bug corrigido, revelou a real essência do que significa adotar uma abordagem disciplinada para o desenvolvimento de aplicações em JavaScript.

O JavaScript é uma linguagem notoriamente flexível. Essa flexibilidade, embora poderosa, pode ser uma espada de dois gumes, levando facilmente a um código desordenado se não for bem gerenciado. Neste artigo, compartilharei insights valiosos adquiridos ao longo de minha carreira, permitindo que você eleve a qualidade do seu código e alcance melhores resultados em seus projetos.

1. Nomes de variáveis e funções significativos

A chave para códigos legíveis

Na jornada de um programador, a escolha de nomes de variáveis e funções não deve ser subestimada. Pode parecer trivial para alguns, mas na verdade é um elemento central para criar um código limpo e eficiente. Durante minha experiência como programador, vi muitos projetos complicados simplesmente devido à escolha imprudente de nomes.

Exemplo de código:

let a = 10; // ❌ Não claro
let idade = 10; // ✅ Mais claro

No exemplo acima, a não dá qualquer indicação sobre o que representa. Em contraste, idade é instantaneamente reconhecível e autoexplicativo.

As funções também se beneficiam de uma nomeação cuidadosa e devem descrever a ação que realizam ou o valor que retornam.

Exemplo de código:

function p(x, y) { return x + y; } // ❌ Não claro
function somar(x, y) { return x + y; } // ✅ Mais claro

Manter a consistência é crucial, se você começou a nomear variáveis relacionadas a preços como precoProduto, precoServico, continue neste padrão. Evite mudanças abruptas para valorArtigo ou custoTarefa.

Tendo dito isso, a brevidade também é valiosa. No entanto, brevidade não deve sacrificar a clareza. Um nome como calc pode ser curto, mas calcularDesconto oferece muito mais contexto.

Exemplo de código:

function calc(d, p) { ... } // ❌ Menos claro
function calcularDesconto(desconto, preco) { ... } // ✅ Mais claro

Lembre-se, o tempo que você gasta nomeando corretamente pode economizar horas de depuração no futuro. É uma prática que beneficia tanto o autor original quanto qualquer outro desenvolvedor que possa trabalhar no código depois.

2. Evite variáveis globais

No universo da programação JavaScript, o uso indiscriminado de variáveis globais é uma armadilha comum que muitos desenvolvedores, inclusive eu em minha jornada inicial, costumam cair. Se você já se deparou com conflitos inesperados de variáveis ou funções em seus projetos, há uma boa chance de as variáveis globais estarem por trás disso.

O perigo das variáveis globais

Em minha experiência como programador, aprendi que o escopo global é uma área vulnerável, variáveis definidas globalmente estão acessíveis em todo o programa, tornando mais fácil para diferentes partes do código interferirem umas nas outras sem intenção.

var globalVar = "Eu sou global!";

function exampleFunction() {
    globalVar = "Eu fui alterada!";
}

A consequência disso? Bugs difíceis de rastrear e um código menos previsível. Para quem lê o código, também fica mais difícil determinar a origem e a utilização das variáveis.

3. Prefira const e let a var

Desde a introdução do ES6 (ECMAScript 2015), a forma como definimos variáveis em JavaScript sofreu uma evolução significativa. Se, no início da minha jornada como programador, eu me familiarizei majoritariamente com a declaração var, rapidamente percebi a superioridade e os benefícios de utilizar const e let em projetos mais recentes.

var tem sua história no JavaScript. Era o modo padrão de declarar variáveis até que ES6 trouxesse novas formas que superassem suas limitações. Uma das principais questões com var é seu escopo de função, que pode causar comportamentos inesperados, especialmente para programadores vindos de outras linguagens.

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 100);
}
// Saída: 5, 5, 5, 5, 5

Ao contrário de var, let possui escopo de bloco. Isto significa que ele respeita as delimitações de loops, condicionais e blocos de código. Se eu tivesse usado let no exemplo acima, teria obtido o resultado esperado.

for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 100);
}
// Saída: 0, 1, 2, 3, 4

Enquanto let é mutável e pode ter seu valor alterado, const é imutável após a atribuição inicial. Ao longo da minha experiência como programador, adotei uma prática recomendada: sempre comece com const e só use let quando souber que a variável precisa ser reatribuída, isso traz uma camada extra de segurança ao seu código.

const greeting = "Olá, Mundo!";

greeting = "Olá, Universo!"; // Isto resultaria em um erro.

Optar por const e let não é apenas uma questão de seguir as tendências modernas é uma decisão informada que aumenta a clareza e reduz os erros potenciais no código.

4. Funções Puras e Imutabilidade

No coração da programação funcional, encontramos conceitos essenciais: funções puras e imutabilidade. Essas práticas não só elevam a qualidade do código, mas também reduzem a probabilidade de erros imprevisíveis. Durante minha trajetória como programador, percebi que a aplicação consistente desses princípios melhora significativamente a manutenibilidade do código.

Funções puras são aquelas que, para um dado input, sempre retornarão o mesmo output, sem produzir efeitos colaterais. Na minha experiência, isso simplifica a depuração e principalmente os testes dessas funções. Aqui está um exemplo simples:

function somar(a, b) {
    return a + b;
}

Neste exemplo, a função somar é pura porque, para quaisquer números a e b, ela sempre retornará a mesma soma, sem modificar nenhuma variável externa.

A imutabilidade, por outro lado, é a prática de não alterar dados depois de criados. Em vez disso, sempre que precisamos fazer uma alteração, criamos uma nova versão do dado. Isso evita muitos dos problemas comuns relacionados à mutabilidade de estado, especialmente em aplicações com muitos componentes interativos.

Imagine um cenário onde, ao desenvolver uma aplicação web uma lista de itens é compartilhada entre vários componentes. A imutabilidade garante que, se um componente modificar a lista os outros não serão afetados inesperadamente.

Aqui está um exemplo:

const itens = Object.freeze(["maçã", "banana", "cereja"]);

A função Object.freeze torna o array itens imutável, prevenindo adições, deleções ou alterações.

Ao adotar esses princípios, me deparei com menos bugs inesperados e o processo de refatoração ficou mais simplificado. Além de serem benéficas para o desenvolvimento, funções puras e imutabilidade também auxiliam no entendimento do código por outros desenvolvedores, garantindo que sua intenção original seja claramente compreendida.

5. Usar padrões de módulo

A capacidade de dividir o código em módulos é uma prática crucial em JavaScript. Durante minha carreira percebi o quão essencial é essa abordagem para manter o código limpo, organizado e facilmente mantido. Mas por que os módulos são tão fundamentais?

Módulos ajudam a encapsular o código, o que significa que cada módulo pode ter suas próprias variáveis privadas, funções e classes, reduzindo o risco de conflitos de nome. Essa separação também facilita o reuso do código em diferentes partes do projeto e facilita também na criação de testes unitários.

// Exemplo de módulo em JavaScript
export function soma(a, b) {
  return a + b;
}

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

Imaginem um grande projeto onde todas as funções e variáveis estão em um único arquivo. Seria caótico, não é? Durante meu tempo escrevendo código, sempre valorizei a organização. Módulos são sem dúvida uma das melhores práticas para conseguir isso.

Porém, não se trata apenas de organização, módulos facilitam a colaboração. Quando trabalhei em equipes, cada desenvolvedor poderia se concentrar em seu próprio módulo, sem interferir no trabalho dos outros.

Em resumo, adotar padrões de módulo em JavaScript não é apenas uma boa prática é uma necessidade e isso garante legibilidade, reutilização e uma manutenção mais eficaz do código.

6. Tratamento de erros com try-catch

Em desenvolvimento de software, imagino que você já se deparou com um aplicativo rodando perfeitamente até que, repentinamente, ocorre um erro inesperado. Mas e se houvesse uma maneira de prever e gerenciar esses erros de maneira elegante, garantindo uma experiência de usuário mais suave? A instrução try-catch em JavaScript oferece exatamente essa solução. Durante meus anos de experiência como programador, eu percebi a diferença marcante que uma manipulação de erro eficaz pode fazer em um projeto.

Como Funciona?

try-catch funciona envolvendo o código potencialmente problemático em um bloco try, e então especificando uma resposta para o erro no bloco catch.

try {
    // Código que pode lançar um erro
    let resultado = umaFuncaoQuePodeFalhar();
    console.log(resultado);
} catch (erro) {
    console.error("Ocorreu um erro:", erro.message);
}

Aqui, se umaFuncaoQuePodeFalhar lançar um erro, em vez de todo o script falhar, o código dentro do bloco catch será executado.

Por Que Usar?

A instrução try-catch não é apenas uma ferramenta para prevenir erros, mas também uma forma de aprimorar a experiência do usuário, em vez de um aplicativo falhar abruptamente, você pode fornecer feedback útil ao usuário, talvez sugerindo etapas corretivas ou apenas informando-os sobre o problema de maneira amigável.

Já vi muitos aplicativos que se beneficiariam de um tratamento de erro mais compassivo. Afinal, é uma questão de apresentar uma experiência polida e profissional para os nossos usuários.

A instrução try-catch é uma ferramenta essencial no arsenal de qualquer desenvolvedor JavaScript. Ao adotá-la em seu fluxo de trabalho, você não apenas estará criando código mais robusto, mas também estará proporcionando uma experiência de usuário mais agradável.

7. Evite comentar código

Códigos bem escritos são como contos bem redigidos: transmitem a mensagem sem ruído excessivo. Muitos devs, incluindo eu em minha jornada como programador, recorrem a comentários para esclarecer o código. Mas uma peça-chave do livro “Clean Code” que tive o privilégio de ler diz: “Se você está usando comentários para explicar o que seu código está fazendo, há espaço para refatoração.”

// Checa se o usuário é administrador
if (user.role === 'admin') { /*...*/ }

A pergunta é: esse comentário é realmente necessário? Não seria mais claro assim?

const isUserAdmin = user.role === 'admin';
if (isUserAdmin) { /*...*/ }

Ao longo de minha carreira, percebi que um código limpo e bem escrito muitas vezes elimina a necessidade de comentários. Claro, existem exceções, como explicar decisões específicas que contrariam a lógica comum ou detalhes intrincados de um algoritmo. Mas se você se encontrar frequentemente comentando seus variáveis ou funções, é hora de repensar.

Comentários podem se tornar obsoletos, enganosos ou até contraditórios ao longo do tempo. Em vez de depender deles, tente escrever um código que seja sua própria documentação. Afinal, o melhor comentário é aquele que você não precisa escrever.

8. Testes: A chave para um código de excelência

No coração de qualquer aplicativo bem-sucedido estão os testes, não é apenas uma opção é uma necessidade. Quando falamos de desenvolvimento de aplicações web, a prática de testar é muitas vezes o que separa um código medíocre de um código profissional. Durante a carreira de qualquer desenvolvedor, as lições aprendidas na fase de testes são inestimáveis. Aqui está um olhar mais atento sobre a importância do teste no JavaScript, juntamente com insights da minha experiência.

Tipos Comuns de Testes em JavaScript

1. Testes Unitários: Estes testes avaliam as menores partes de um aplicativo isoladamente (por exemplo, funções). Durante minha carreira, muitos bugs foram detectados e corrigidos graças a esses testes.
2. Testes de Integração: Aqui, interações entre unidades são testadas. Por exemplo, pode-se testar se uma função que solicita dados de uma API realmente os recebe e os processa corretamente.
3. Testes End-to-End (E2E): Estes testes avaliam o fluxo completo de uma aplicação. Imagine um e-commerce: o teste E2E certificaria que um usuário pode escolher um produto, adicioná-lo ao carrinho e finalizar a compra com sucesso.

Investir tempo em testes não é apenas sobre encontrar bugs, mas sobre garantir uma experiência de usuário fluida e confiável. E embora possa parecer uma tarefa tediosa, os benefícios são claros e palpáveis. A excelência em código JavaScript ou em qualquer linguagem de programação começa com o teste.

9. Manter-se atualizado

Em um ecossistema de desenvolvimento web que avança rapidamente, estar à par das atualizações mais recentes é crucial. O JavaScript, sendo um dos pilares desse ecossistema, não é exceção. Minha experiência pessoal no campo me mostrou que os desenvolvedores que acompanham as mudanças frequentemente colhem os benefícios em produtividade, segurança e performance.

Tomemos, por exemplo, a introdução das funções assíncronas (async/await) no ECMAScript 2017. Antes de seu lançamento, lidar com operações assíncronas era frequentemente complicado e propenso a erros, mas com async/await a escrita e a leitura do código se tornaram muito mais simplificadas.

// Antes: usando Promises
function fetchData() {
  return fetch('url')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Erro:', error));
}

// Depois: usando async/await
async function fetchData() {
  try {
    const response = await fetch('url');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Erro:', error);
  }
}

Nessa jornada como programador eu aprendi que para me manter atualizado, é muito importante seguir fontes confiáveis de notícias de tecnologia, participar de eventos e também praticar regularmente com novas características, integrando-as em projetos práticos.

10. A Importância dos Livros na jornada de um programador

Os recursos online são abundantes, desde tutoriais em vídeo a fóruns e blogs. Mas os livros, com sua estrutura bem pensada e conteúdo profundo, têm o poder de transformar programadores novatos em especialistas. Nesse artigo, exploraremos a relevância duradoura dos livros no universo da programação.

Uma Experiência Pessoal

Na minha jornada tive muitos desafios e com cada problema enfrentado, a busca incessante por conhecimento tornou-se uma constante. E frequentemente, os livros mostraram-se os meus aliados mais confiáveis.

Impacto dos Livros Chave

Entre os inúmeros livros que moldaram a minha jornada como programador, gostaria de destacar três:

1. Código Limpo – Este livro forneceu uma clara compreensão de como escrever códigos de maneira eficiente e legível. Aprender a importância de um código bem escrito é como aprender a gramática de um novo idioma.
2. Estrutura de Dados e Algoritmos em JavaScript – Uma profunda imersão no mundo JavaScript, esta leitura elevou minahs habilidades para pensar logicamente e estruturar dados de maneira eficaz.
3. Entendendo Algoritmos – Este livro, embora não específico para JavaScript, revelou o universo dos algoritmos de uma maneira acessível e prática.

Estas três obras juntas formaram uma base sólida, me ajudando a superar obstáculos técnicos e a crescer exponencialmente como profissional.

Conclusão

A trajetória de um programador é repleta de descobertas, e a importância das boas práticas é uma delas. A compreensão e aplicação destas práticas transformaram completamente sua abordagem ao desenvolvimento web. A limpeza do código não é apenas uma estética é sobre eficiência, prevenção de erros e acima de tudo, respeito por aqueles que lerão ou manterão o código no futuro.

Adotar boas práticas não é uma tarefa que se conclui em um dia é uma jornada constante. A cada projeto surge a oportunidade de refinar habilidades, aprender e aplicar novos conhecimentos. No universo JavaScript isso é ainda mais evidente, a linguagem continua a evoluir e com ela, as melhores práticas também.

Neste artigo, abordamos várias práticas essenciais que todo desenvolvedor JavaScript deve ter em mente. No entanto, a verdadeira maestria é alcançada não apenas pelo conhecimento, mas pela aplicação consciente desse conhecimento no dia a dia.

Leia mais em nosso blog.