Melhores Práticas na Programação em JavaScript

Este artigo explica as melhores práticas na programação em JavaScript.

Vamos apresentar as principais práticas recomendadas em JavaScript, juntamente com exemplos de código concretos.

YouTube Video

Melhores Práticas na Programação em JavaScript

Em programação, não é importante apenas escrever "código que funciona", mas escrever código que seja manutenível, eficiente e confiável. Seguindo as "boas práticas", seu código se torna mais fácil de entender por outros desenvolvedores, mais simples de manter e estender e, em última análise, leva a menos bugs e melhor desempenho.

Com exemplos de código, vamos ver as principais boas práticas em JavaScript.

Use Nomes de Variáveis e Funções Claros e Descritivos

Torne possível entender o que uma variável ou função significa apenas lendo o código. Prefira nomes descritivos em vez de nomes abreviados ou siglas.

Exemplo ruim

1/* Bad Example */
2let x = 10;
3function fn() {
4    // ...
5}

• Nomes como x ou fn obscurecem a intenção do código.

Bom exemplo

1/* Good Example */
2let totalItems = 10;
3function calculateDiscount(price) {
4    // ...
5}

• Usar nomes com significado como totalItems ou calculateDiscount ajuda os leitores a entender o código.

Use const / let e evite var

Como var é propenso a problemas de escopo e de redeclaração, recomenda-se sempre usar const ou let.

Exemplo ruim

1/* Bad Example */
2var count = 5;

• var tem escopo de função e pode causar redeclarações não intencionais e elevação (hoisting).

Bom exemplo

1/* Good Example */
2let count = 5; // Reassignable
3const MAX_COUNT = 10; // Not reassignable

• let e const têm escopo de bloco e são mais seguros de usar, resultando em um código mais previsível e estável.

Use Comentários Apropriados

{^ i18n_speak 単にコードの動作をそのまま繰り返すコメントではなく、コードの「目的」や「理由」を説明するためにコメントを使います。^}

Exemplo ruim

1/* Bad Example */
2let a = 100; // assign 100 to a

Bom exemplo

1/* Good Example */
2// Initialize the maximum value to 100
3let maxItems = 100;

• Prefira comentários que expliquem o porquê de algo ser feito, em vez do que está sendo feito. Isso é especialmente útil quando a lógica é complexa.

Siga o Princípio DRY (Não se Repita)

Em vez de repetir a mesma lógica, fatore-a em funções ou classes. Reduzir a duplicação melhora a manutenibilidade e ajuda a prevenir bugs.

Exemplo ruim

1/* Bad Example */
2let totalPrice = price * quantity;
3let discountedPrice = (price * 0.9) * quantity;

Bom exemplo

1/* Good Example */
2function calculatePrice(price, quantity, discount = 0) {
3    return (price * (1 - discount)) * quantity;
4}
5
6let totalPrice = calculatePrice(price, quantity);
7let discountedPrice = calculatePrice(price, quantity, 0.1);

• Ao consolidar a lógica duplicada em uma função, alterações e correções podem ser feitas em um só lugar. Isso é especialmente importante em desenvolvimento em larga escala.

Mantenha as funções com responsabilidade única e minimize efeitos colaterais

Cada função deve ter um propósito claro. Evite mutar variáveis globais ou estado externo para manter os efeitos colaterais no mínimo.

Exemplo ruim

1/* Bad Example */
2let total = 0;
3function addItem(price) {
4    total += price; // modifies external state
5    console.log('Item added');
6}

Bom exemplo

1/* Good Example */
2function calculateTotal(items) {
3    return items.reduce((sum, item) => sum + item.price, 0);
4}

• Projetar funções para serem puras — retornando o mesmo resultado para a mesma entrada — as torna mais fáceis de testar e mais confiáveis. Isso também melhora a reutilização e facilita a depuração.

Realizar Tratamento de Erros

Garanta que o aplicativo não falhe com entradas inesperadas ou exceções. Use a sintaxe try...catch para tratar erros adequadamente.

Exemplo ruim

1/* Bad Example */
2let data = JSON.parse(inputData);

Bom exemplo

1/* Good Example */
2try {
3    let data = JSON.parse(inputData);
4} catch (error) {
5    console.error('Failed to parse JSON:', error);
6}

• Como JSON.parse() pode lançar exceções, trate-o com segurança usando try-catch. Um tratamento de erros completo ajuda a construir aplicações robustas.

Produza logs estruturados

Emita logs em um formato consistente para facilitar o rastreamento do comportamento do sistema. Usar logs formatados em JSON facilita o trabalho com eles em ferramentas de análise e monitoramento.

Exemplo ruim

1/* Bad Example */
2console.log('Error occurred!');

Bom exemplo

1/* Good Example */
2console.log(JSON.stringify({
3    level: 'error',
4    message: 'Database connection failed',
5    timestamp: new Date().toISOString()
6}));

• Logs como strings simples podem perder informações; logs estruturados tornam a análise de logs, a visualização e o monitoramento mais fáceis. Isso é especialmente eficaz em JavaScript do lado do servidor (Node.js).

Aumentar a Legibilidade do Código

O código é lido por outras pessoas (ou por você no futuro). Use indentação, quebras de linha e espaçamento adequados para tornar o código fácil de ler.

Exemplo ruim

1/* Bad Example */
2if(a===b){doSomething();}

Bom exemplo

1/* Good Example */
2if (a === b) {
3    doSomething();
4}

• Código bem formatado e legível é mais rápido de entender e facilita identificar bugs. Não comprima tudo em uma única linha; torne a estrutura visualmente clara.

Considere sempre a segurança

Como o JavaScript frequentemente é executado em ambientes web, a conscientização sobre segurança é essencial. Sempre valide a entrada do usuário, proteja-se contra XSS e CSRF e mantenha as dependências atualizadas.

Exemplo ruim

1/* Bad Example */
2// Directly inserting user input into HTML (vulnerable to XSS)
3element.innerHTML = userInput;

Bom exemplo

1/* Good Example */
2// Use textContent to prevent XSS attacks
3element.textContent = userInput;

• Tratar a entrada do usuário como está pode introduzir vulnerabilidades como injeção de scripts. Use APIs seguras e crie o hábito de sempre validar e sanitizar os dados.

Realizar Testes de Código

Introduzir testes automatizados torna mais fácil detectar e prevenir bugs. Em JavaScript, frameworks de teste como Jest e Mocha são comumente usados.

Exemplo

1// Simple test using Jest
2function sum(a, b) {
3    return a + b;
4}
5
6test('adds 1 + 2 to equal 3', () => {
7    expect(sum(1, 2)).toBe(3);
8});

• Ter testes garante que bugs não reapareçam ao adicionar funcionalidades ou fazer alterações. Testes são indispensáveis para a garantia contínua de qualidade.

Conclusão

Seguir boas práticas pode melhorar muito a qualidade, a manutenibilidade e a confiabilidade do código. Ao aprender JavaScript, é importante criar hábitos não apenas em torno da sintaxe, mas também sobre "como escrever um bom código.". Aprendendo continuamente, você pode tornar seu código mais legível, seguro e eficiente.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video