O JavaScript é uma linguagem versátil, que nos permite escrever código sem muitos padrões/paradigmas específicos. Isso pode nos trazer vantagens e desvantagens.
Podemos codificar do jeito que julgarmos melhor para o projeto. Por outro lado, se faltar organização, isso pode se tornar um problema.
Aproveitando o lado bom da liberdade do JavaScript, listei cinco dicas rápidas que gosto de utilizar no dia a dia, e que podem tornar o código um pouco mais limpo:
1 – Simplifique condições Boolean
Em alguns casos específicos como no exemplo abaixo, desejamos retornar um valor booleano de acordo com uma condição também booleana da seguinte forma:
function isLogged(user) { if (user.logged === true) { return true } else { return false } }
O resultado da avaliação de user.logged será true ou false. Isso já é exatamente o retorno que queremos, certo? Se user.logged é true, retornaremos true. Se for falso, retornaremos false.
Então podemos obter o mesmo efeito economizando linhas:
function isLogged(user) { return user.logged // Essa avaliação retorna true ou false }
2 – Simplifique condições de quantidade
Se nossa condição estiver lidando com números, também podemos simplificá-la. Imagine que temos uma função onde verificaremos se o telefone do usuário foi preenchido:
function phoneIsValid(user.phone) { if (user.phone.length > 0) { return true } else { return false } } if (phoneIsValid(user)) { ... }
Dentro de uma condicional, o valor 0 é avaliado como false, e valores maiores que zero são avaliados como true. Isso nos permite escrever a função dessa forma:
function phoneIsValid(user.phone) { return user.phone.length }
Assim como na dica 1, nossa avaliação já é o retorno que queremos! Se quisermos manter o tipo do retorno (Boolean), devemos retornar da seguinte forma:
function phoneIsValid(user.phone) { return !!user.phone.length }
Utilizando o operador de negação duas vezes, forçamos o JavaScript a converter o valor em true ou false.
3 – Receba parâmetros utilizando destructuring (ES6)
O ES6 (Ecmascript 6, ou ES2015) nos trouxe várias facilidades. Uma delas é o destructuring assignment. Essa funcionalidade nos permite extrair dados de arrays ou objetos, e pode ser utilizada direto no recebimento de parâmetros de uma função.
Podemos reescrever a função acima da seguinte maneira:
function phoneIsValid({ phone }) { return !!phone.length }
4 – Use Arrow Functions
Também trazida pelo ES2015, as arrow functions nos dão a possibilidade de ocultar a palavra return, e as chaves:
const phoneIsValid = ({ phone }) => phone.length
O código acima continua fazendo a mesma coisa que na dica 3, agora em apenas uma linha!
5 – Use OR para condições
Novamente sobre condicionais, há casos em que podemos utilizar o OR para simplificar o código. Imagine que queremos verificar o nome do usuário. Caso ele exista, iremos retorná-lo, caso contrário retornamos um valor padrão:
function getUserName(user) { if(user.name) { return user.name } else { return 'Anonymous' } }
Essa função pode ser reescrita da seguinte forma:
function getUserName(user) { return user.name || 'Anonymous' }
Retornamos user.name (caso exista), senão, o retorno será a string padrão. Juntando algumas dicas anteriores, podemos chegar no seguinte resultado:
const getUserName = ({ name }) => name || 'Anonymous'
Uma linha! Repare como simplificamos nossa função getUserName, comparando com a primeira implementação!
Conclusão
Existem muitas formas de se escrever um mesmo código. As dicas acima são formas que gosto de implementar nos projetos que desenvolvo.
Gostou? Recomende, compartilhe, comente!
Obrigado!