5 dicas de JavaScript para economizar tempo!

JavaScript é uma linguagem extremamente flexível e poderosa, mas, sem boas práticas, o código pode rapidamente se tornar confuso e difícil de manter. No dia a dia do desenvolvimento, pequenos ajustes e técnicas podem fazer uma grande diferença na produtividade, reduzindo o tempo gasto em tarefas repetitivas e tornando o código mais limpo e eficiente. Seja evitando verificações desnecessárias, utilizando métodos mais modernos ou simplificando operações comuns, há sempre formas de otimizar o trabalho. Neste artigo, vou compartilhar cinco dicas práticas que ajudam a economizar tempo no desenvolvimento com JavaScript, permitindo que você escreva código mais conciso, legível e performático.

1. Use Optional Chaining para evitar verificações desnecessárias

Se você já se deparou com o erro “Cannot read properties of undefined”, sabe o quanto pode ser frustrante tentar acessar uma propriedade que não existe. Em projetos maiores, isso se torna ainda mais problemático, exigindo várias verificações antes de acessar um dado aninhado.

Antes da introdução do Optional Chaining (?.), era comum escrever verificações encadeadas para evitar esses erros:

const usuario = {
  nome: "Carlos",
  endereco: {
    cidade: "São Paulo"
  }
};

// Verificação manual antes de acessar a propriedade
const cidade = usuario && usuario.endereco && usuario.endereco.cidade;
console.log(cidade); // "São Paulo"

Esse tipo de código pode rapidamente se tornar um pesadelo de leitura, especialmente quando há muitas camadas de objetos. Com Optional Chaining, podemos simplificar essa lógica drasticamente:

const cidade = usuario?.endereco?.cidade;
console.log(cidade); // "São Paulo"

Se qualquer uma das propriedades no caminho não existir, o JavaScript simplesmente retorna undefined ao invés de gerar um erro. Isso reduz a necessidade de verificações manuais e torna o código mais limpo e legível.

O Optional Chaining é especialmente útil quando lidamos com dados de APIs, onde nem sempre podemos garantir que todas as propriedades estarão disponíveis. Em vez de tratar vários if, basta usar ?. e seguir em frente. Menos código repetitivo, menos erro, mais produtividade.

Leia Também: React Javascript: Guia para Iniciantes

2. Desestruturação para extrair dados rapidamente

Trabalhar com objetos e arrays é algo comum em JavaScript, mas percorrer suas propriedades manualmente pode ser trabalhoso e tornar o código menos intuitivo. A desestruturação, ou destructuring, permite extrair dados de forma mais rápida e organizada, evitando repetições desnecessárias.

Antes da desestruturação, acessar propriedades exigia atribuições manuais:

const usuario = {
  nome: "Ana",
  idade: 28,
  cidade: "Rio de Janeiro"
};

const nome = usuario.nome;
const idade = usuario.idade;
const cidade = usuario.cidade;

console.log(nome, idade, cidade);

Esse código funciona, mas pode ser simplificado com desestruturação:

const { nome, idade, cidade } = usuario;
console.log(nome, idade, cidade);

O mesmo princípio pode ser aplicado a arrays:

const numeros = [10, 20, 30];

// Sem desestruturação
const primeiro = numeros[0];
const segundo = numeros[1];

// Com desestruturação
const [primeiroNumero, segundoNumero] = numeros;

console.log(primeiroNumero, segundoNumero);

Além de deixar o código mais limpo, a desestruturação permite definir valores padrão para evitar undefined quando a propriedade não existir:

const { pais = "Brasil" } = usuario;
console.log(pais); // "Brasil"

Com essa abordagem, conseguimos extrair dados de objetos e arrays com menos código e mais clareza, facilitando a manutenção e melhorando a legibilidade do código.

3. Use Array Methods em vez de loops tradicionais

Os loops for e while são amplamente utilizados em JavaScript, mas muitas vezes acabam tornando o código mais verboso e difícil de manter. Métodos de array como .map(), .filter() e .reduce() oferecem uma abordagem mais declarativa e eficiente para manipular listas de dados, deixando o código mais legível e conciso.

Comparando for com .map()

Imagine que precisamos dobrar os números de um array. Com um for, o código seria algo assim:

const numeros = [1, 2, 3, 4, 5];
const dobrados = [];

for (let i = 0; i < numeros.length; i++) {
  dobrados.push(numeros[i] * 2);
}

console.log(dobrados); // [2, 4, 6, 8, 10]

Agora, usando .map(), conseguimos reduzir a complexidade:

const dobrados = numeros.map(num => num * 2);
console.log(dobrados); // [2, 4, 6, 8, 10]

Menos código, mais clareza. O .map() retorna um novo array transformado sem a necessidade de criar variáveis adicionais ou manipular índices.

Filtrando valores com .filter()

Se precisarmos, por exemplo, de um novo array apenas com números pares, o código tradicional ficaria assim:

const pares = [];

for (let i = 0; i < numeros.length; i++) {
  if (numeros[i] % 2 === 0) {
    pares.push(numeros[i]);
  }
}

console.log(pares); // [2, 4]

Já com .filter(), fazemos isso de forma bem mais simples:

const pares = numeros.filter(num => num % 2 === 0);
console.log(pares); // [2, 4]

Reduzindo valores com .reduce()

Agora, suponha que queremos somar todos os números de um array. O método tradicional seria:

let soma = 0;

for (let i = 0; i < numeros.length; i++) {
  soma += numeros[i];
}

console.log(soma); // 15

Com .reduce(), o mesmo resultado é alcançado de forma mais elegante:

const soma = numeros.reduce((total, num) => total + num, 0);
console.log(soma); // 15

Por que usar métodos de array?

Além de deixarem o código mais limpo, esses métodos são otimizados internamente pelo JavaScript e tornam o código mais expressivo. Em vez de se preocupar com a estrutura de um loop, o foco fica na lógica da transformação dos dados. Isso facilita a manutenção e melhora a legibilidade do código.

Ao adotar essa abordagem, evitamos código repetitivo e garantimos que nosso JavaScript seja mais moderno e eficiente.

4. Operador || e ?? para valores padrão

Atribuir valores padrão a variáveis é algo comum em JavaScript, principalmente quando lidamos com dados que podem ser undefined ou null. Tradicionalmente, isso era feito com um if, mas operadores como || e ?? tornam essa tarefa mais simples e elegante. Embora pareçam semelhantes, há uma diferença importante entre eles.

O operador || (OR lógico)

O operador || é utilizado para definir um valor padrão quando a variável é um valor falsy (ou seja, false, 0, "", null, undefined, NaN):

const nome = "" || "Usuário Padrão";
console.log(nome); // "Usuário Padrão"

Aqui, como "" é um valor falsy, o JavaScript atribui "Usuário Padrão". O mesmo acontece se a variável fosse false ou 0:

const idade = 0 || 18;
console.log(idade); // 18

Isso pode ser um problema se 0 for um valor válido no contexto, como idade ou quantidade. Para resolver esse caso, existe o operador ??.

O operador ?? (Nullish Coalescing)

O ?? foi introduzido para lidar melhor com valores nullish (null e undefined), sem considerar outros valores falsy como 0 ou "":

const nome = "" ?? "Usuário Padrão";
console.log(nome); // ""

const idade = 0 ?? 18;
console.log(idade); // 0

Dessa forma, ?? só atribui o valor padrão quando a variável for null ou undefined, mantendo valores como 0 e "".

Comparação entre if, || e ??

Antes desses operadores, a atribuição de valores padrão exigia if:

let nome;
if (nome === null || nome === undefined) {
  nome = "Usuário Padrão";
}

Com ||, o código fica mais curto, mas pode causar atribuições indesejadas:

const nome = "" || "Usuário Padrão"; // Retorna "Usuário Padrão", mesmo que "" possa ser válido

Com ??, o código se comporta como esperado:

const nome = "" ?? "Usuário Padrão"; // Retorna "", pois não é null nem undefined

Quando usar || e ???

• Use || quando quiser um valor padrão para qualquer dado falsy (por exemplo, garantir um número positivo em uma operação matemática).
• Use ?? quando quiser um valor padrão apenas para null ou undefined, sem afetar 0, "" ou false.

Ao entender essas diferenças, é possível escrever um código mais previsível e evitar atribuições indesejadas, tornando o JavaScript mais eficiente e fácil de manter.

5. Template Literals para manipulação de strings

Manipular strings é algo comum no dia a dia de qualquer desenvolvedor JavaScript. No passado, a concatenação de strings era feita com o operador +, o que muitas vezes resultava em um código menos legível e propenso a erros. Com a introdução dos Template Literals, a sintaxe ficou mais limpa, facilitando a interpolação de variáveis e a criação de strings multilinhas.

Concatenação tradicional com +

Antes do ES6, concatenar strings exigia o uso do operador +, o que poderia tornar o código difícil de ler, especialmente quando envolvia múltiplas variáveis:

const nome = "João";
const idade = 25;
const mensagem = "Olá, meu nome é " + nome + " e eu tenho " + idade + " anos.";
console.log(mensagem);

O código acima funciona, mas adicionar mais variáveis ou modificar a estrutura da string pode torná-lo ainda mais confuso.

Uso de Template Literals

Com Template Literals, a concatenação se torna mais intuitiva e legível. Em vez de usar +, basta envolver a string com acentos graves (`) e utilizar ${} para interpolar variáveis:

const nome = "João";
const idade = 25;
const mensagem = `Olá, meu nome é ${nome} e eu tenho ${idade} anos.`;
console.log(mensagem);

Além de tornar o código mais organizado, essa abordagem evita erros comuns, como esquecer espaços entre palavras ao usar +.

Criando strings multilinhas

Outro grande benefício dos Template Literals é a facilidade para lidar com strings de múltiplas linhas. Antes, era necessário adicionar \n manualmente ou concatenar diversas strings:

const mensagem = "Olá, meu nome é João.\n"
               + "Estou aprendendo JavaScript.\n"
               + "Template Literals facilitam minha vida.";
console.log(mensagem);

Com Template Literals, basta escrever a string normalmente, sem precisar de \n:

const mensagem = `Olá, meu nome é João.
Estou aprendendo JavaScript.
Template Literals facilitam minha vida.`;
console.log(mensagem);

Quando usar Template Literals?

• Sempre que precisar concatenar variáveis dentro de strings.
• Quando for necessário criar strings multilinhas sem complicação.
• Para manter o código mais legível e evitar erros de concatenação.

Os Template Literals são uma das muitas melhorias do ES6 que tornam o JavaScript mais moderno e prático. Eles eliminam a necessidade de concatenações desajeitadas e tornam o código mais intuitivo, reduzindo a chance de erros e melhorando a produtividade.

Conclusão

O JavaScript oferece diversas maneiras de escrever um código mais eficiente e legível, e as cinco dicas apresentadas aqui são um excelente ponto de partida para otimizar seu fluxo de desenvolvimento. O uso de Optional Chaining evita verificações desnecessárias, a desestruturação facilita o acesso a dados, os métodos de array substituem loops verbosos, os operadores || e ?? ajudam na definição de valores padrão e os Template Literals tornam a manipulação de strings mais intuitiva.

Cada uma dessas técnicas tem o potencial de economizar tempo, reduzir erros e tornar o código mais fácil de manter. Aplicar essas práticas no dia a dia significa escrever menos código repetitivo e focar mais na lógica real da aplicação.

A melhor maneira de consolidar esse conhecimento é colocando em prática. Experimente refatorar trechos do seu código para adotar essas abordagens e veja como pequenas mudanças podem fazer uma grande diferença na produtividade e na clareza do seu projeto.