Front End

Front End

5 dicas de JavaScript para um código mais limpo

2 mai, 2018
Publicidade

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!