Dúvida - forEach(function (contexto))

Provavelmente algum instrutor vai conseguir te explicar melhor, mas se eu conseguir ajudar:

Quando você usa o forEach, tu precisa passar uma função pra ele. Daí ele chama essa função passando cada um dos elementos do array como argumento.

Na função mais interna, a que está dentro do forEach, o *contexto* é o nome do argumento. Esse argumento vai receber cada um dos elementos do array botoes. Ele está em um escopo diferente to argumento"contexto" da função alterarContexto.

Ou seja, o forEach não tá usando o valor do data-attribute em momento nenhum, foi só uma distração de usar o mesmo nome de variável pra ele.

Exatamente como o Mayck aí falou, o forEach não está usando o contexto do parâmetro! Eu, pessoalmente, em meu código, preferi usar a palavra target para evitar confusao!

  botoes.forEach((target) =>{
        target.classList.remove('active')
    })

Boa Tarde, meus Amigos!!!

Tudo bem com vocês???

Contribuindo com que eu sei, a função forEach() permite iterar sobre um array, já que temos uma variável referenciando todos os botões do timer. quando usamos o querySelectorAll, retornamos um array like (array de objetos).

Com a referência do array contendo os botões usamos o forEach (item=>{}) passando por cada item do array para cada botão dentro da função removemos a classe active.

Sucesso galera...

A função forEach() é uma função que recebe uma outra função como parâmetro, denominada "callback" por ser "chamada de volta". A função callback é executada uma vez para todos os elementos de um dado array.

No forEach(), a função callback recebe como parâmetros os valores (ou "value") e a posição (ou "index") de cada elemento de um array.

A pegada que pode gerar confusão é que você é quem determina os nomes que representarão esses parâmetros da função callback.

No exemplo que você mostrou, o parâmetro "contexto" está representando cada um dos elementos "<button>" do array "botões", e não possui nenhuma conexão com o parâmetro "contexto" da função alterarContexto. Você poderia alterar o nome "contexto" dessa função para qualquer outro sem prejudicar o funcionamento do código.

Para entender melhor, dê uma olhada nesse bloco:

//definindo a lista de "botões" a, b e c
const botoes = ['a', 'b', 'c']

/* chamando o forEach, que irá executar uma função chamada "callback".
A função "callback" recebe como parâmetros o valor de cada elemento e
sua posição no array.

Nesse exemplo, o valor é representado por "valor", e a posição, por
"posicao".*/

botoes.forEach(function callback(valor, posicao) {
  console.log(`${posicao}: ${valor}`)

//Essa função imprimirá "0: a", "1: b" e "2: c".

Espero ter ajudado!