[Inspiração] Fugindo do If e Else

Gostaria de abrir essa conversa mais como forma de abranger um conhecimento técnico que muitas vezes vai impactar no nosso dia a dia.

Estava eu assistindo o vídeo do Deschamps https://www.youtube.com/watch?v=Lf3ZV0UsnEo que me passou um insight incrível.

No vídeo ele explica um tipo de arquitetura que ele fez pro seu código que pra mim foi muito interessante. Claro, pode ser muito simples, mas achei muito massinha.

Vou explicar o que fiz no meu código utilizando a técnica que ele empregou pra mostrar o poder de simplificar:

Primeiramente, criei meu html de forma simples, somente para testar essa ideia.

        <div class="valores">
            <input type="number" placeholder="valor 1..." id="val1">
            <input type="number" placeholder="valor 2..." id="val2">
        </div>
        <div class="botoes">
            <input type="button" value="+" id="somar">
            <input type="button" value="-" id="subtr">
        </div>

De início, como vocês podem ver, criei dois botões, um que se refere a soma, e outro que se refere a subtração.

Após isso, fui pro JS.

calculadora = {
    somar: function(val1, val2){return val1+val2},
    subtr: function(val1, val2){return val1-val2}
};

Iniciei criando um objeto chamado calculadora que irá receber duas funções dentro dela, a que retornará a soma de dois valores e a que vai subtrair os mesmos. Até aqui, simples demais.

let vals = document.querySelectorAll('.valores input[type="number"]');
let buttons = document.querySelectorAll('.botoes input[type="button"]');

Após isso, declarei duas variáveis, uma que irá receber os valores dentro dos campos de insert(vals) e uma que irá se referir a todos os botões de cálculo que foram criados(buttons), ou seja o '+' e o '-'.

E aqui está a mágica que torna esse código tão simples mas pra mim tão bacana:

buttons.forEach((button) => {
    button.addEventListener('click', () => {
            alert(calculadora[button.id](parseFloat(vals[0].value), parseFloat(vals[1].value)));
    });
});

Simplesmente um forEach, que percorrerá por todos os botões adicionando um evento de clique, que quando clicado, irá receber o valor do id desse botão, que se você for ver no html é o mesmo nome dos itens do objeto calculadora.

<input type="button" value="+" id="somar">

<input type="button" value="-" id="subtr">

Tendo o id do botão, agora você referencia ele com a função dentro do objeto calculadora e passa os parâmetros, que como vocês podem ver, são os índices da variável 'vals'. E pronto, isso tudo dentro de um alert e o resultado está na mesa.

Achei um conhecimento muito bacana de compartilhar, porque nos mostra como esses simples ajustes de arquitetura deixam nosso código cada vez melhor.

Se você não conhecia essa forma de codar, recomendo cada vez mais se aprofundar nesses conceitos.

Filipe, teu conteúdo é muito delicinha!!!

Deixa aqui no comentário mais conhecimentos como esse, que vou ler com gosto.