O quão ruim / ineficaz é o meu código? | JavaScript: manipulando o DOM

Durante a aula 02. 04 (Funções com JavaScript) eu decidi tentar fazer o meu próprio código js de alteração de atributos (braços, pernas...). Terminei e ficou funcional. Mas, na aula 04. 02 (Alterando o elemento) o professor fez de forma bem diferente e me surgiu a dúvida: meu código é ruim?

const controle = document.querySelectorAll(".controle-contador")
const somar = document.querySelectorAll(".somar") // Criei classes para soma e subtração em seus respectivos botões
const subtrair = document.querySelectorAll(".subtrair")

const numeroDeBotoes = controle.length - 1

for (let i = 0; i <= numeroDeBotoes; i++) {
    somar[i].addEventListener("click", () => {
        controle[i].value = parseInt(controle[i].value) + 1
    })

    subtrair[i].addEventListener("click", () => {
        controle[i].value = parseInt(controle[i].value) - 1
    })
}

Olá, Daniel! Tudo ok contigo?

Primeiramente, é importante ressaltar que não há um código certo ou errado, mas sim diferentes formas de resolver um problema. O código que você criou está funcional e realiza a alteração dos atributos desejados. No entanto, o código apresentado pelo professor na aula busca uma solução mais genérica e flexível.

No seu código, você seleciona os elementos de soma e subtração através de classes específicas ("somar" e "subtrair") e realiza as operações diretamente nos elementos de controle. Já no código do professor, ele utiliza o conceito de navegação no DOM para buscar o elemento pai dos botões de controle e, a partir dele, encontra o elemento de controle específico que deve ser alterado.

Essa abordagem do professor permite que o código seja mais genérico e possa ser aplicado a diferentes elementos de controle, sem a necessidade de criar classes específicas para cada um. Além disso, o código do professor utiliza o conceito de Data Attributes para tornar a lógica mais flexível e adaptável a possíveis mudanças no HTML.

Dessa forma, o código do professor pode ser considerado mais eficiente em termos de manutenção e escalabilidade, pois é capaz de lidar com diferentes elementos de controle de forma dinâmica. No entanto, isso não significa que o seu código seja ruim. Ele está funcionando corretamente e pode ser uma solução válida dependendo do contexto em que está sendo utilizado.

Quero também parabenizá-lo por sua iniciativa de criar um código funcional para a manipulação de elementos no DOM durante o curso. É ótimo ver que você está se dedicando e praticando as habilidades aprendidas.

Espero ter esclarecido sua dúvida! Se tiver mais alguma pergunta, é só me dizer.

Espero ter ajudado e bons estudos!

Reply: Você criou três arrays, `controle`, `somar` e `subtrair`, para armazenar elementos HTML com determinadas classes. Isso é uma abordagem válida, mas pode se tornar um pouco redundante se essas classes não forem usadas em outros lugares no seu código. Considere se vale a pena manter esses arrays ou se você pode selecionar diretamente os elementos quando necessário.

O loop for que você usou para adicionar os event listeners é adequado e cumpre o propósito de associar ações de soma e subtração aos botões correspondentes. No entanto, eu gostaria de chamar a atenção para algumas considerações que podem ajudar a melhorar o código:

Eficiência: Embora o seu código funcione bem, você pode melhorar a eficiência ao evitar o uso excessivo de queries de seleção de elementos em cada iteração do loop. Você poderia armazenar as referências aos elementos fora do loop para evitar consultas repetitivas ao DOM.
Legibilidade: Uma das metas importantes ao escrever código é torná-lo legível para você e outros desenvolvedores. Nesse sentido, dar nomes mais descritivos às variáveis pode facilitar a compreensão do que o código faz. Por exemplo, em vez de controle, você poderia usar elementosControle para indicar que se trata dos elementos que estão sendo controlados.
Manutenção: Imagine que você precise adicionar mais funcionalidades ou fazer alterações no futuro. Seu código poderia se beneficiar de um pouco mais de modularidade. Separe a lógica de manipulação do DOM das ações de soma e subtração em funções diferentes para facilitar a manutenção e expansão.

function atualizarValor(elemento, valor) {
    elemento.value = valor;
}

function incrementarValor(elemento) {
    const valorAtual = parseInt(elemento.value);
    atualizarValor(elemento, valorAtual + 1);
}

function decrementarValor(elemento) {
    const valorAtual = parseInt(elemento.value);
    atualizarValor(elemento, valorAtual - 1);
}

for (let i = 0; i <= numeroDeBotoes; i++) {
    const botaoSomar = somar[i];
    const botaoSubtrair = subtrair[i];
    const elementoControle = controle[i];

    botaoSomar.addEventListener("click", () => {
        incrementarValor(elementoControle);
    });

    botaoSubtrair.addEventListener("click", () => {
        decrementarValor(elementoControle);
    });
}

Acessibilidade: Além disso, é sempre bom considerar a acessibilidade ao desenvolver interfaces web. Certifique-se de que seus elementos interativos, como os botões de soma e subtração, sejam acessíveis aos usuários que dependem de tecnologias assistivas, como leitores de tela.