Escrevendo melhores condicionais no JavaScript

Por ser uma linguagem extremamente flexível, o JavaScript nos dá literalmente várias possibilidades de se resolver um mesmo problema: desde a construção das funções, atribuições às variáveis, hierarquia dos objetos através do prototype e até um condicional (if).

Neste artigo, veremos algumas técnicas para escrever melhores condicionais no JavaScript. Para entender completamente o que será mostrado, é importante ter uma boa noção das melhorias trazidas no ES6 (ES2015). Se não for o caso, te convido a dar uma olhada no meu curso na Udemy e meu livro publicado na Casa do Código.

1 – Use o array.includes() para validar múltiplos critérios

A melhor maneira de entender o que isso quer dizer é através de um exemplo prático, então imagine a seguinte situação: dentro do nosso código, precisamos validar se dada string é um morango ou uma laranja. Se for qualquer um dos dois, ele deve passar no fluxo positivo do if. Caso contrário, não.

Isso, no código, seria algo como:

function isMorangoOuLaranja(fruta) {
  if (fruta === 'morango' || fruta === 'laranja') {
    console.log('sou um morango ou laranja!');
  }
}

A princípio este código não apresenta nenhum problema, certo? No entanto, vamos imaginar que essa verificação irá escalar e, ao invés de verificarmos somente duas frutas, validaremos dez frutas. No modelo atual este código não ficaria muito interessante, certo? É aí que entra o array.includes().

function isFrutaValida(fruta) {
  const frutasValidas = ['uva','pêra','maçã', 'melancia','abacate'];
  if(frutasValidas.includes(fruta)) {
    console.log('sou uma fruta válida!');
  }
}

Bem mais interessante, não é mesmo?

2 – Valores padrões de funções

Quem nunca se frustrou com uma mensagem undefined is not a function ao trabalhar com o JavaScript não sabe o que é ter uma dor de cabeça das grandes. Para evitar fugir deste problema, muitas vezes precisamos validar se os valores que estamos recebendo não são null e nem undefined.

function testaFrutas(fruta, quantidade) {
  if (!fruta) return;
  const q = quantidade || 1;

  console.log(`Nós temos ${q} ${fruta}(s)!`);
}

// teste
test('banana'); // Nós temos 1 banana(s)!
test('pêra', 2); // Nós temos 2 pêra(s)!

Repare no que tivemos que fazer para garantir que esta função não quebrasse. Primeiramente, fizemos uma verificação logo no início para validar se realmente tínhamos uma fruta como parâmetro (não era igual a null/undefined).

Logo abaixo utilizamos um outro truque para saber se havia quantidade descrita. Caso não exista, colocamos o valor 1 como padrão.

Para este código podemos utilizar os valores de padrões para remover uma dessas verificações (ou até mesmo as duas?). Podemos fazer o mesmo procedimento que define a variável q apenas com isso:

function testaFrutas(fruta, quantidade = 1) {
  if (!fruta) return;
  console.log(`Nós temos ${q} ${fruta}(s)!`);
}

// teste
test('banana'); // Nós temos 1 banana(s)!
test('pêra', 2); // Nós temos 2 pêra(s)!

E dessa dica, o que achou?

3 – Mapas ao invés de switch-case

O switch-case é uma estrutura que a princípio nos ajuda a organizar múltiplos casos possíveis de forma organizada. Então vejamos um exemplo de utilização desta estrutura. Para este caso, queremos devolver as frutas correspondentes a uma cor determinada.

function frutasDaCor(cor) {
  switch (cor) {
    case 'vermelho':
      return ['maçã', 'morango'];
    case 'amarelo':
      return ['banana', abacaxi];
    case 'roxo':
      return ['uva'];
    default:
      return [];
  }
}

// teste
test(null); // []
test('yellow'); // ['banana', 'abacaxi'];

Até aí sem problemas, certo? No entanto, com os Mapas conseguimos ter este mesmo comportamento de forma mais elegante, legível e até mesmo eficaz. Veja:

const coresEFrutas = new Map()
    .set('vermelho', ['maçã', 'morango'])
    .set('amarelo', ['banana', 'abacaxi'])
    .set('roxo', ['uva']);

function frutasDaCor(cor) {
  return fruitColor.get(cor) || [];
}

Repare bem no que fizemos: ao invés de criarmos várias entradas dentro de uma estrutura de switch-case, passamos as opções para dentro de uma estrutura de Mapa. Nesta estrutura, cada chave é associada a um valor. No nosso caso, cada cor é associada a um array de frutas.

Dentro do método frutasDaCor(), usamos o método get() para buscar a chave. Caso a chave não exista dentro do Mapa, a verificação que fizemos voltará um Array vazio. Elegante, não?

Conclusão

O JavaScript é uma linguagem tão dinâmica que nos permite resolver um mesmo problema de várias formas distintas. Neste artigo vimos três maneiras de otimizar os nossos condicionais dentro do código. Com a evolução da linguagem, a tendência é que mais opções apareçam com o decorrer do tempo.

Referências

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

Powered by: