3 maneiras 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.
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);
}
}// ouif (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
.
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!