Entrar Ainda não tem acesso?
1
resposta

[Sugestão] Nome de parâmetro incorreto - gera confusão

Referente ao curso JavaScript: manipulando elementos no DOM

por Helder Pinheiro Rodrigues
| 139.9k xp | 4 posts
Engenheiro Software

No projeto Fokus, quando se introduz o código para remover a aparência de botão ativo com a remoção da classe active, é falado que já se sabe o contexto e é passado como parâmetro para a função anónima.

    function alterarContexto(contexto) {
    
    html.setAttribute('data-contexto', contexto);
    banner.setAttribute('src', `/imagens/${contexto}.png`);

    alert(contexto);
    botoes.forEach(function (contexto) {
        alert(contexto)
        contexto.classList.remove("active");
    })

Na verdade o que é passado para a função anónima é o botão extraido pelo forEach, que não tem nada a ver com o parâmetro contexto passado para a função alterarContexto. O primeiro alert retorna: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

enquanto que os três seguintes:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Fazendo na mão para o primeiro botão o que o forEach faz:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Acho que o parâmetro tem um nome infeliz e a referência ao contexto para essa situação acho que não está correta, já que o que se faz é "zerar" a classe active em todas as 3 listas de classes associadas aos três botões, independentemente do contexto.

1 resposta
por Renan Lima
| 3201.2k xp | 6765 posts
Alura Scuba Team Apoio Educacional - Alura

Olá Helder.

Tudo bem?

Você levantou um ponto muito válido sobre a dúvida que pode ser gerada pelo uso do mesmo nome de parâmetro "contexto" em diferentes escopos dentro da função alterarContexto. Isso realmente pode levar a um entendimento equivocado do que cada parte do código está fazendo, especialmente para quem está aprendendo ou revisando o material.

No código que você mencionou, o parâmetro contexto na função forEach é um novo escopo local que se refere a cada elemento iterado (neste caso, cada botão), e não ao contexto original passado para alterarContexto. Uma maneira de tornar isso mais claro seria renomear o parâmetro dentro do forEach para algo mais descritivo, como botao, para indicar claramente que se refere aos elementos botões e não ao contexto da aplicação. Aqui está como poderia ser reescrito o código:

function alterarContexto(contexto) {
    html.setAttribute('data-contexto', contexto);
    banner.setAttribute('src', `/imagens/${contexto}.png`);

    alert(contexto);
    botoes.forEach(function (botao) {
        alert(botao)
        botao.classList.remove("active");
    })
}

Com essa alteração, fica mais claro que botao refere-se a cada botão individual no array botoes, e contexto é o parâmetro que define o contexto geral da função.

Espero que essa sugestão ajude a esclarecer a dúvida e melhore a clareza do código no projeto Fokus. Obrigado por apontar essa questão, é sempre importante buscar a clareza no código para facilitar a manutenção e o aprendizado. Eu vou encaminhar esse feedback para a equipe responsável pelo conteúdo. Valeu! :)

Espero ter ajudado e bons estudos!