3 maneiras de reduzir código JavaScript

Formas de reduzir código JavaScript

Existem diferentes formas de escrever a mesma regra de negocio no código. Além disso, cada linguagem de programação fornece diferentes sintaxes para executar uma tarefa.

Hoje vou te mostrar 3 caminhos diferentes que vão diminuir linhas de código, torná-lo menos verboso e de melhor compreensão. Mostrarei também o antes e depois de alguns códigos implementados usando os conceitos apresentados.

Operador Condicional Ternário 👩🏻‍✈️

É um operador usado frequentemente como um atalho para a instrução if. Utilizá-lo pode deixar o código mais limpo, visto que um bloco condicional if costuma a ter no mínimo cinco linhas que podem ser substituídas por apenas uma.

Sintaxe:

(condição) ? valor1 : valor2

Se a condição for verdadeira, o operador retornará o valor de valor1; se não, ele retorna o valor de valor2. Por exemplo, vamos retornar uma mensagem diferente baseada no valor da variável maiorDeIdade.

Exemplo com o bloco condicional tradicional: 😀

if (maiorDeIdade >= 18) {
   return 'Maior de idade';
} else {
   return 'Menor de idade';
}

Exemplo com o operador ternário: 🤩

(maiorDeIdade >= 18) ? 'Maior de idade' : 'Menor de idade';

Short-Circuiting 🩳

É uma maneira de encurtar verificações desnecessárias em nossas condicionais. Ela é usada quando queremos simplificar uma condição if.

Por exemplo, precisamos chamar a função buscarUsuarioPorId, apenas se a variável usuarioId tiver um valor verdadeiro.

Exemplo com a instrução if: 😀

if (usuarioId) {
   buscarUsuarioPorId(usuarioId);
}

Exemplo com a short-circuiting: 🤩

usuarioId && buscarUsuarioPorId(usuarioId);

Optional Chaining 🔗

É um operador que simplifica o acesso a valores de objetos aninhados quando é possível que uma referência ou função seja indefinida ou nula.

Saiba mais sobre ele🤌🏻

Ele vai verificar a existência das propriedades do objeto e retornar false se a propriedade não existir.

Considere o seguinte objeto: 💁🏻‍♀️

const pessoa = {
   nome: 'Gizelly',
   email: 'gi@test.com',
   endereco: {
      rua: 'Rua Z, n.10'
   }
}

Exemplo com o bloco condicional tradicional: 😀

if (pessoa.endereco) {
   if(pessoa.endereco.rua) {
      console.log(pessoa.endereco.rua);
   }
}
// ou
if (pessoa.endereco && pessoa.endereco.rua) {
   console.log(pessoa.endereco.rua);
}

Exemplo com o Optional Chaining: 🤩

console.log(pessoa?.endereco?.rua);

+Bônus 😎

Coalescência nula 👌🏻

É uma forma de retornar um valor padrão quando lidarmos com um null ou undefined.

Saiba mais sobre ele🤌🏻

Ele encurta o código em relação ao if-else, que pode tornar o código ainda mais curto. Vamos usar de exemplo o objeto pessoa criado anteriormente.

Exemplo sem o operador de coalescência nula: 😀

return pessoa?.email ? pessoa.email : 'E-mail não cadastrado!'

Exemplo com o operador de coalescência nula: 🤩

return pessoa?.email ?? 'E-mail não cadastrado!

Fim 😗🖖🏻

Com isso, encerro por aqui e espero que essas dicas te ajude a escrever um código mais limpo.

— Você pode me seguir no LinkedIn e no Github também. 💖

Referências 🧐

MDN Web Docs