Como simplificar instruções if em JavaScript

As instruções condicionais são uma parte essencial do JavaScript. Eles permitem que você execute o código com base no fato de uma determinada condição ser verdadeira ou falsa, e você pode aninhar várias caso contrário declarações (e um outro) para avaliar mais de uma condição.

Mas aqui está o problema - ao escrever complexos se... senão cadeias, as coisas podem ficar confusas rapidamente e você pode facilmente acabar com um código difícil de ler e entender.

Vamos aprender como refatorar longos e complexos se... senão se... senão cadeias condicionais em uma versão mais concisa, limpa e fácil de entender.

Cadeias if...else complexas

Ao escrever instruções if...else complexas em JavaScript, é essencial que você escreva código limpo, conciso e compreensível. Por exemplo, dê uma olhada no se... senão cadeia condicional dentro da função abaixo:

funçãopodebeber(pessoa) {
se(pessoa?.idade != nulo) {
se(pessoa.idade < 18) {





instagram viewer


console.registro("Ainda muito jovem")
 } outrose(pessoa.idade < 21) {
console.registro("Não nos EUA")
 } outro {
console.registro("Permitido beber")
 }
 } outro {
console.registro("Você não é uma pessoa")
 }
}
const pessoa = {
 idade: 22
}
podeBeber (pessoa)

A lógica aqui é simples. O primeiro se declaração garante que o pessoa objeto tem um idade propriedade (caso contrário ele ou ela não é uma pessoa). dentro disso se bloco, você adicionou um se... senão... se cadeia que basicamente diz:

Se a pessoa tem menos de 18 anos, é muito jovem para beber. Se tiverem menos de 21 anos, ainda estão abaixo da idade legal para beber nos Estados Unidos. Caso contrário, eles podem beber legalmente.

Embora o código acima seja válido, o aninhamento dificulta a compreensão do código. Felizmente, você pode refatorar o código para ser conciso e fácil de ler usando um cláusula de guarda.

Cláusulas de guarda

Sempre que você tiver um se declaração que envolve todo o seu código, você pode usar um cláusula de guarda para remover todo o aninhamento:

funçãopodeBeberMelhor() {
se(pessoa?.idade == nulo) retornarconsole.registro("Você não é uma pessoa") 
se(pessoa.idade < 18) {
console.registro("Ainda muito jovem")
 } outrose(pessoa.idade < 21) {
console.registro("Não nos EUA")
 } outro {
console.registro("Permitido beber")
 }
}

No início da função, você definiu uma cláusula de guarda informando que, se essa condição específica não for atendida, você deseja sair do podeBeberMelhor() funcione imediatamente (e registre "Você não é uma pessoa" no console).

Mas se a condição for atendida, você avalia o se... senão cadeia para ver qual bloco é aplicável. A execução do código fornece o mesmo resultado do primeiro exemplo, mas esse código é mais fácil de ler.

Não use um único retorno

Você pode argumentar que a técnica acima não é uma bom princípio de programação porque estamos usando vários retornos na mesma função e você acredita que é melhor ter apenas uma declaração de retorno (também conhecida como política de retorno único).

Mas essa é uma maneira terrível de escrever código porque força você às mesmas situações malucas de aninhamento que vimos no primeiro exemplo de código.

Com isso dito, você pode usar vários retornar declarações para simplificar ainda mais seu código (e se livrar do aninhamento):

funçãopodeBeberMelhor() {
se(pessoa?.idade == nulo) retornarconsole.registro("Você não é uma pessoa") 
se(pessoa.idade < 18) {
console.registro("Ainda muito jovem")
retornar
 } 
se(pessoa.idade < 21) {
console.registro("Não nos EUA")
retornar
 }
console.registro("Permitido beber") 
}

Esse código funciona da mesma forma que os dois exemplos anteriores e também é um pouco mais limpo.

Funções de extração para código mais limpo

Nosso último bloco de código foi mais limpo do que os dois primeiros, mas ainda não é tão bom quanto poderia ser.

Em vez de ter um longo se... senão cadeia dentro de uma função, você pode criar uma função separada canDrinkResult() que faz a verificação para você e retorna o resultado:

funçãocanDrinkResult(idade) {
se(idade < 18) retornar"Ainda muito jovem"
se(idade < 21) retornar"Não nos EUA"
retornar"Permitido beber"
}

Então, dentro da função principal, tudo o que você precisa fazer é primeiro aplicar a cláusula de guarda antes de chamar o canDrinkResult() função (com a idade como parâmetro) para obter o resultado:

funçãopodeBeberMelhor() { 
se(pessoa?.idade == nulo) retornarconsole.registro("Você não é uma pessoa") 
deixar resultado = canDrinkResult (pessoa.idade)
console.log (resultado)
}

Portanto, neste caso, você delegou a tarefa de verificar a idade para beber a uma função separada e só a chamou quando necessário. Isso torna seu código conciso e mais simples de trabalhar do que todos os exemplos anteriores.

Mantenha mais longe de declarações condicionais

Você aprendeu como refatorar cadeias condicionais aninhadas complexas em cadeias mais curtas e fáceis de ler usando cláusulas de guarda e a técnica de extração de função.

Tente manter o outro declaração longe de seus condicionais, tanto quanto possível, usando cláusulas de guarda e a técnica de extração de função.

Se você ainda é novo no uso do JavaScript se... senão declaração, comece com o básico.