/Desenvolvimento

voltar
/Desenvolvimento

5 dicas de JavaScript para um código mais limpo

PorRaphael Guastaferro em

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!

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

 

Deixe um comentário! 7

leia mais
Este projeto é oferecido pelas empresas:
Este projeto é mantido pelas empresas:
Este projeto é apoiado pelas empresas: