10 Exemplos Práticos de Código Limpo em JavaScript para Desenvolvedores

Escrever código limpo em JavaScript não é apenas uma questão de estética, mas um pilar fundamental para a manutenibilidade, colaboração e eficiência no desenvolvimento de software. Código legível e bem estruturado reduz a complexidade, facilita o debugging e permite que equipes trabalhem de forma mais coesa. Inspirado por uma análise perspicaz de Ibeh Ubachukwu, compartilhada na plataforma Dev.to, este artigo explora dez exemplos práticos que demonstram como transformar trechos de código JavaScript comuns em versões mais limpas e eficientes. A seguir, detalharemos cada exemplo, mostrando o "antes" e o "depois", e analisando os benefícios da abordagem otimizada.

Exemplo 1: Atribuição Condicional com Operadores Ternários em JavaScript

Operadores ternários são uma forma concisa de escrever instruções if-else. No entanto, seu uso inadequado pode levar à redundância.

Código JavaScript Menos Eficiente:

// a e b são variáveis previamente definidas
// foo é a variável que receberá o valor
a > b ? foo = 'apple' : foo = 'ball';

Código JavaScript Otimizado:

// a e b são variáveis previamente definidas
// foo é a variável que receberá o valor
foo = a > b ? 'apple' : 'ball';

Análise e Vantagens da Abordagem Otimizada em JavaScript:

A versão otimizada elimina a repetição da atribuição foo =. Ao invés de atribuir foo em cada ramificação do operador ternário, o valor resultante da condição é diretamente atribuído a foo uma única vez. Isso torna o código mais enxuto, mais fácil de ler e segue o princípio DRY (Don't Repeat Yourself - Não se Repita), crucial em programação.

Exemplo 2: Atribuição Condicional a Propriedades de Objeto em JavaScript

Quando precisamos definir uma propriedade de um objeto ou seu valor com base em uma condição, podemos cair em redundâncias ou em código verboso.

Código JavaScript Menos Eficiente:

// c e d são variáveis previamente definidas
// a é um objeto
// Queremos definir a propriedade 'foo' OU 'bar' de 'a' como 'apple'
c > d ? a.foo = 'apple' : a.bar = 'apple'; 
// Ou, se a chave é condicional e o valor é o mesmo:
// if (c > d) { a.foo = 'apple'; } else { a.bar = 'apple'; }

Código JavaScript Otimizado:

// c e d são variáveis previamente definidas
// a será um novo objeto
a = { [c > d ? 'foo' : 'bar']: 'apple' };

Análise e Vantagens da Abordagem Otimizada em JavaScript:

A versão otimizada utiliza nomes de propriedade computados (computed property names), uma funcionalidade do ES6. A expressão [c > d ? 'foo' : 'bar'] dentro das chaves do objeto determina dinamicamente o nome da chave ('foo' ou 'bar') com base na condição. O valor 'apple' é então atribuído a essa chave dinamicamente definida. Isso resulta em um código significativamente mais conciso e expressivo para este cenário específico de JavaScript.

Exemplo 3: Exportando Múltiplas Variáveis em Módulos JavaScript

Em JavaScript moderno, especialmente ao trabalhar com módulos (por exemplo, em ambientes como Node.js ou frameworks como React e Vue.js), exportar múltiplas constantes ou funções é uma tarefa comum.

Código JavaScript Menos Eficiente:

export const foo = 1;
export const bar = 2;
export const kip = 3;

Código JavaScript Otimizado:

const foo = 1;
const bar = 2;
const kip = 3;

export { foo, bar, kip };
// Ou, se forem declaradas e exportadas na mesma linha (como no vídeo):
// export const foo = 1, bar = 2, kip = 3; (Menos comum para múltiplas, mas válido)
// A forma do vídeo era `export const foo, bar, kip;` que é para declaração sem inicialização imediata, o que pode ser menos prático. 
// A versão com chaves é a mais recomendada para agrupar múltiplos exports nomeados.

Análise e Vantagens da Abordagem Otimizada em JavaScript:

Agrupar múltiplos exports nomeados em uma única declaração export { ... } no final do módulo (ou do bloco de declarações) melhora a legibilidade. Fica claro de imediato quais variáveis ou funções estão sendo expostas pelo módulo. A versão do vídeo, export const foo, bar, kip;, implica que essas constantes são declaradas mas não necessariamente inicializadas ali, o que é menos comum. A forma export { nome1, nome2 }; é geralmente preferida para clareza em JavaScript.

Exemplo 4: Declaração e Atribuição de Variáveis a partir de Propriedades de Objetos JavaScript

Extrair propriedades de um objeto para variáveis locais é uma operação frequente em JavaScript.

Código JavaScript Menos Eficiente:

const foo = { x: 10, y: 20 };
const a = foo.x;
const b = foo.y;

Código JavaScript Otimizado (Desestruturação de Objetos):

const foo = { x: 10, y: 20 };
const { x: a, y: b } = foo;

Análise e Vantagens da Abordagem Otimizada em JavaScript:

A desestruturação de objetos (object destructuring) permite extrair dados de objetos de forma mais concisa e legível. Na sintaxe { x: a, y: b }, estamos dizendo: pegue a propriedade x de foo e atribua-a a uma nova variável chamada a, e pegue a propriedade y de foo e atribua-a a uma nova variável chamada b. Se os nomes das variáveis locais fossem os mesmos das propriedades (x e y), a sintaxe seria ainda mais simples: const { x, y } = foo;.

Exemplo 5: Declaração e Atribuição de Variáveis a partir de Índices de Arrays JavaScript

Similar à desestruturação de objetos, podemos extrair elementos de arrays de forma elegante.

Código JavaScript Menos Eficiente:

const foo = ['maçã', 'banana'];
let a = foo;
let b = foo;

Código JavaScript Otimizado (Desestruturação de Arrays):

const foo = ['maçã', 'banana'];
let [a, b] = foo;

Análise e Vantagens da Abordagem Otimizada em JavaScript:

A desestruturação de arrays (array destructuring) simplifica a atribuição de elementos de um array a variáveis individuais. O primeiro elemento do array foo é atribuído a a, e o segundo a b. Esta sintaxe é muito mais limpa e direta do que acessar elementos por seus índices numericamente, especialmente útil em JavaScript para desenvolvimento web.

Exemplo 6: Obtendo Múltiplos Elementos do DOM em JavaScript

Ao interagir com o Document Object Model (DOM) em JavaScript, frequentemente precisamos referenciar múltiplos elementos HTML.

Código JavaScript Menos Eficiente:

const a = document.getElementById('a');
const b = document.getElementById('b');
const c = document.getElementById('c');
const d = document.getElementById('d');

Código JavaScript Otimizado:

const elementIds = ['a', 'b', 'c', 'd'];
const elements = {};

elementIds.forEach(id => {
  elements[id] = document.getElementById(id);
});

// Agora você pode acessar os elementos como elements.a, elements.b, etc.
// Ou, para ter variáveis separadas como no exemplo original:
const { a, b, c, d } = elements;

Análise e Vantagens da Abordagem Otimizada em JavaScript:

Para um pequeno número de elementos, a abordagem menos eficiente pode ser aceitável. No entanto, se você tiver muitos elementos para buscar, a repetição de document.getElementById torna o código verboso e propenso a erros. A abordagem otimizada cria um array de IDs, itera sobre ele, e armazena os elementos em um objeto elements. As chaves do objeto correspondem aos IDs, facilitando o acesso. A desestruturação final é opcional, mas espelha o resultado desejado de ter variáveis separadas. Esta técnica de programação JavaScript é mais escalável e organizada.

Exemplo 7: Uso de Operadores Lógicos para Condicionais Simples em JavaScript

Para condicionais que executam uma única ação se uma condição for verdadeira, podemos usar operadores lógicos para uma sintaxe mais breve.

Código JavaScript Menos Eficiente:

let foo = true;
function doSomething() { console.log('Ação executada!'); }

if (foo) {
  doSomething();
}

Código JavaScript Otimizado (Short-circuiting com &&):

let foo = true;
function doSomething() { console.log('Ação executada!'); }

foo && doSomething();

Análise e Vantagens da Abordagem Otimizada em JavaScript:

O operador lógico AND (&&) em JavaScript exibe um comportamento conhecido como "short-circuiting". Se a primeira expressão (foo) for `true` (ou "truthy"), a segunda expressão (doSomething()) será avaliada (e executada, no caso de uma função). Se foo for `false` (ou "falsy"), a segunda expressão não é avaliada. Isso oferece uma maneira concisa de executar uma ação baseada em uma condição simples.

Exemplo 8: Passando Parâmetros Condicionalmente em Funções JavaScript

É comum precisar passar um valor padrão para uma função se um determinado parâmetro não estiver definido ou for considerado "falsy".

Código JavaScript Menos Eficiente:

let foo; // foo é undefined, um valor "falsy"
const kip = 'exemplo';

function bar(param1, param2) {
  console.log(param1, param2);
}

if (!foo) {
  foo = 'apple';
}
bar(foo, kip); // Saída: apple exemplo

Código JavaScript Otimizado (Short-circuiting com ||):

let foo; // foo é undefined
const kip = 'exemplo';

function bar(param1, param2) {
  console.log(param1, param2);
}

bar(foo || 'apple', kip); // Saída: apple exemplo

Análise e Vantagens da Abordagem Otimizada em JavaScript:

O operador lógico OR (||) também utiliza "short-circuiting". Se a primeira expressão (foo) for "truthy", seu valor é usado. Se for "falsy" (como undefined, null, 0, '', NaN, ou false), o valor da segunda expressão ('apple') é usado. Esta é uma forma elegante e comum em JavaScript para fornecer valores padrão a parâmetros de função ou variáveis.

Exemplo 9: Lidando com Muitos Zeros em Números JavaScript (Notação Exponencial e Separadores Numéricos)

Números grandes com muitos zeros podem ser difíceis de ler e propensos a erros de digitação.

Código JavaScript Menos Eficiente:

const SALARY = 150000000; // 150 milhões
const TAX = 15000000;    // 15 milhões

Código JavaScript Otimizado:

// Usando notação exponencial
const SALARY_E = 15e7; // Equivale a 15 * 10^7 = 150,000,000
const TAX_E = 15e6;    // Equivale a 15 * 10^6 = 15,000,000

// Usando separadores numéricos (ES2021+)
const SALARY_SEP = 150_000_000;
const TAX_SEP = 15_000_000;

Análise e Vantagens da Abordagem Otimizada em JavaScript:

A notação exponencial (e) permite representar números grandes de forma mais compacta. 15e7 significa 15 seguido de 7 zeros. Uma adição mais recente ao JavaScript (ES2021) são os separadores numéricos (_), que podem ser usados para agrupar dígitos, melhorando drasticamente a legibilidade de literais numéricos sem afetar seu valor. Ambas as abordagens tornam o código JavaScript mais claro.

Exemplo 10: Atribuindo o Mesmo Valor a Múltiplas Variáveis em JavaScript

Quando múltiplas variáveis precisam ser inicializadas com o mesmo valor, existe uma forma mais concisa do que atribuições individuais.

Código JavaScript Menos Eficiente:

let a, b, c;
const d = 100;

a = d;
b = d;
c = d;

Código JavaScript Otimizado:

let a, b, c;
const d = 100;

a = b = c = d;

Análise e Vantagens da Abordagem Otimizada em JavaScript:

A atribuição encadeada (chained assignment) permite definir múltiplas variáveis para o mesmo valor em uma única linha. A avaliação ocorre da direita para a esquerda. Primeiro, c recebe o valor de d. Então, b recebe o valor de c (que agora é d), e finalmente a recebe o valor de b. Isso é seguro e eficiente para tipos primitivos em JavaScript. É importante notar que, se d fosse um objeto, a, b, e c todas apontariam para a mesma referência do objeto, e não para cópias independentes.

Conclusão: A Jornada Contínua por um Código JavaScript Mais Limpo

Adotar práticas de código limpo em JavaScript é um investimento que compensa a longo prazo. Os exemplos discutidos, inspirados no trabalho de Ibeh Ubachukwu, demonstram que pequenas alterações na forma como escrevemos nosso código podem resultar em grandes melhorias na legibilidade, manutenibilidade e eficiência. A busca por um código melhor é uma jornada contínua para todo desenvolvedor JavaScript, e incorporar essas técnicas é um passo significativo nessa direção, contribuindo para um ecossistema de desenvolvimento web mais robusto e colaborativo.