Tutorial: Decompondo Condicional em JavaScript para Código Mais Limpo

Introdução

Você já se deparou com código JavaScript repleto de condicionais complexas que dificultam a leitura e manutenção? A técnica de “Decompor Condicional” pode ajudar a tornar seu código mais limpo e compreensível. Neste tutorial, exploraremos a motivação, os passos práticos e a teoria por trás dessa técnica de refatoração, usando exemplos em JavaScript.

Motivação

A complexidade em um programa muitas vezes se origina de condicionais complexas. À medida que adicionamos lógica condicional para lidar com diversas situações, o código pode rapidamente se tornar longo e confuso. O tamanho da função e as várias condições dificultam a leitura e podem ocultar o motivo por trás das decisões.

A técnica de “Decompor Condicional” tem como objetivo tornar o código mais claro, dividindo-o em partes menores, cada uma com um propósito específico. Isso não apenas facilita a leitura, mas também destaca as condições e os motivos por trás das decisões.

Exemplo Prático

Vamos começar com um exemplo prático que ilustra uma situação comum de condicional complexo.

O Problema

Suponha que você precise calcular o valor a ser cobrado por um serviço com preços distintos para o verão e o inverno, com base em uma data específica.

				
					// Dados fictícios para o objeto "plano"
const plano = {
  inicioVerao: new Date('2023-06-01'), // Data de início do verão (1º de junho de 2023)
  fimVerao: new Date('2023-08-31'),   // Data de fim do verão (31 de agosto de 2023)
  taxaVerao: 5,                       // Taxa durante o verão
  taxaRegular: 3,                     // Taxa regular
  taxaServicoRegular: 2               // Taxa de serviço regular
};

// Data fictícia para a variável "data" (15 de julho de 2023)
const data = new Date('2023-07-15');

// Quantidade fictícia para cálculos
const quantidade = 10;

if (!(data.getTime() < plano.inicioVerao.getTime()) && !(data.getTime() > plano.fimVerao.getTime())) {
  valor = quantidade * plano.taxaVerao;
} else {
  valor = quantidade * plano.taxaRegular + plano.taxaServicoRegular;
}

console.log('Valor: ' + valor);

Nota de Observação: Os comentários foram adicionados com o propósito de tornar o código mais didático e explicativo. Em situações reais de desenvolvimento, é importante manter comentários relevantes, mas evitar excessos, pois o código deve ser autoexplicativo sempre que possível.

Esse código funciona, mas é difícil de entender devido à lógica condicional embutida. Vamos aplicar a técnica de “Decompor Condicional” para melhorar a clareza.

A Solução: Refatoração “decompor condicional”

Passo 1: Extrair Condição

Começamos extraindo a condição para uma função separada. Isso ajuda a enfatizar a condição e o motivo da ramificação.

				
					// Função para verificar se data1 é posterior ou igual a data2
function dataPosteriorOuIgual(data1, data2) {
  return data1.getTime() >= data2.getTime();
}

// Função para verificar se estamos no verão
function estaNoVerao() {
  // Verifica se a data está no intervalo de início do verão e fim do verão.
  return dataPosteriorOuIgual(data, plano.inicioVerao) && dataPosteriorOuIgual(plano.fimVerao, data);
}

Passo 2: Extrair Ramos

Agora, vamos lidar com cada ramo da condicional, criando funções separadas para calcular as cobranças de verão e inverno.

				
					// Função para calcular a cobrança durante o verão
function calcularCobrancaVerao() {
  return quantidade * plano.taxaVerao;
}

// Função para calcular a cobrança durante o período regular
function calcularCobrancaRegular() {
  return quantidade * plano.taxaRegular + plano.taxaServicoRegular;
}

Passo 3: Refatorar a Condicional

Finalmente, refatoramos a condicional original usando o operador ternário para torná-la mais concisa.

				
					// Calcula o valor da cobrança com base na estação do ano
const valor = estaNoVerao() ? calcularCobrancaVerao() : calcularCobrancaRegular();

Por Que Isso Funciona

A técnica de “Decompor Condicional” baseia-se na prática de dividir um código complexo em partes menores, cada uma com uma função específica. Isso segue princípios fundamentais de Clean Code, como nomes descritivos, funções pequenas e eliminação de condicionais complexos. Agora, o código é mais legível, cada parte tem um propósito claro, e o motivo por trás das decisões está destacado.

Código Completo da Solução

Aqui está o código completo da solução após aplicarmos a técnica de “Decompor Condicional”:

				
					// Dados fictícios para o objeto "plano"
const plano = {
  inicioVerao: new Date('2023-06-01'), // Data de início do verão (1º de junho de 2023)
  fimVerao: new Date('2023-08-31'),   // Data de fim do verão (31 de agosto de 2023)
  taxaVerao: 5,                       // Taxa durante o verão
  taxaRegular: 3,                     // Taxa regular
  taxaServicoRegular: 2               // Taxa de serviço regular
};

// Data fictícia para a variável "data" (15 de julho de 2023)
const data = new Date('2023-07-15');

// Quantidade fictícia para cálculos
const quantidade = 10;

// Função para verificar se data1 é posterior ou igual a data2
function dataPosteriorOuIgual(data1, data2) {
  return data1.getTime() >= data2.getTime();
}

// Função para verificar se estamos no verão
function estaNoVerao() {
  // Verifica se a data está no intervalo de início do verão e fim do verão.
  return dataPosteriorOuIgual(data, plano.inicioVerao) && dataPosteriorOuIgual(plano.fimVerao, data);
}

// Função para calcular a cobrança durante o verão
function calcularCobrancaVerao() {
  return quantidade * plano.taxaVerao;
}

// Função para calcular a cobrança durante o período regular
function calcularCobrancaRegular() {
  return quantidade * plano.taxaRegular + plano.taxaServicoRegular;
}

// Calcula o valor da cobrança com base na estação do ano
const valor = estaNoVerao() ? calcularCobrancaVerao() : calcularCobrancaRegular();

// Exibe o valor calculado
console.log(`O valor da cobrança é: R$ ${valor}`);

Código sem os comentários

Aqui está o código completo da solução após eliminar os comentários.

				
					const plano = {
  inicioVerao: new Date('2023-06-01'),
  fimVerao: new Date('2023-08-31'),
  taxaVerao: 5,
  taxaRegular: 3,
  taxaServicoRegular: 2
};

const data = new Date('2023-07-15');
const quantidade = 10;

function dataPosteriorOuIgual(data1, data2) {
  return data1.getTime() >= data2.getTime();
}

function estaNoVerao() {
  return dataPosteriorOuIgual(data, plano.inicioVerao) && dataPosteriorOuIgual(plano.fimVerao, data);
}

function calcularCobrancaVerao() {
  return quantidade * plano.taxaVerao;
}

function calcularCobrancaRegular() {
  return quantidade * plano.taxaRegular + plano.taxaServicoRegular;
}

const valor = estaNoVerao() ? calcularCobrancaVerao() : calcularCobrancaRegular();

console.log(`O valor da cobrança é: R$ ${valor}`);

Conclusão

A técnica de “Decompor Condicional” é uma ferramenta poderosa para melhorar a clareza e a manutenibilidade do código JavaScript. Ao dividir condicionais complexos em partes menores e nomeá-las de forma descritiva, você torna seu código mais limpo e mais fácil de entender.

Lembre-se de que a refatoração é um processo contínuo, e a busca pela melhoria constante é essencial para manter um código limpo e sustentável.

Agora que você dominou a arte de “Decompor Condicional,” aplique essa técnica em seu código e experimente os benefícios de um código mais limpo e compreensível.

Observação Importante: Este exemplo foi mantido o mais simples possível com o objetivo de tornar o código didático e fácil de entender. Em cenários reais, é altamente recomendável que as funções recebam dados relevantes como parâmetros para tornar o código mais flexível e reutilizável. Considere essa simplificação como um ponto de partida para entender os princípios da refatoração e do código limpo.