Boa noite! Estou no capítulo 4 do curso, e fiquei com 3 dúvidas a respeito do código ao final do capítulo:
function tocaSom (idElementoAudio) {
document.querySelector(idElementoAudio).play();
}
const listaDeTeclas = document.querySelectorAll('.tecla');
for (let contador = 0; contador < listaDeTeclas.length; contador++) {
const tecla = listaDeTeclas[contador];
const instrumento = tecla.classList[1];
const idAudio = `#som_${instrumento}`; //template string
tecla.onclick = function() {
tocaSom(idAudio);
}
}
A primeira dúvida é: Por que declaramos as variáveis dentro do loop como "const" ao invés de "let", sendo que elas mudam de valor a cada iteração? Ou seja, eu entendo que a cada repetição do loop durante a execução do código a variável "tecla", por exemplo, recebe um valor diferente ocupado na memória.
A segunda dúvida é: Qual é a necessidade de utilizar a função anônima? Não funcionaria se eu simplesmente chamasse a função "tocaSom" passando o parâmetro "idAudio" recebendo esse valor na "tecla.onclick"? Exemplo:
function tocaSom (idElementoAudio) {
document.querySelector(idElementoAudio).play();
}
const listaDeTeclas = document.querySelectorAll('.tecla');
for (let contador = 0; contador < listaDeTeclas.length; contador++) {
const tecla = listaDeTeclas[contador];
const instrumento = tecla.classList[1];
const idAudio = `#som_${instrumento}`; //template string
tecla.onclick = tocaSom(idAudio);
}
- A terceira dúvida, e a mais complexa pra mim, cheguei até a ver ela aqui no fórum, mas ainda não consegui entender o funcionamento, é a seguinte: Eu sei que ao reiniciar a página da web, ela renderiza executando o documento main.js, tanto que se vc colocar um "console.log" no final do bloco do loop do for, ele registra no console todas as iterações (do 0 ao 8). Mas na minha cabeça, a repetição do for já acabou após renderizar a página, e quando clicamos no botão de cada som, ele ainda sim consegue identificar o som respectivo, ou seja, entendo que ele consegue passar o "idAudio" correto respectivo a cada som que foi passado na iteração do for, mas como ele faz isso sendo que a repetição terminou e alterou a variável "idAudio" com todos os id's correspondentes de cada repetição do loop? Eu também entendo que a "tecla.onclick" por estar dentro do for ela só funcionaria caso a repetição ainda estivesse acontecendo, mas como ela ja foi finalizada, não entendo como é possível ela funcionar atribuindo o id corresponde ao idAudio quando o usuário clica no botão. Essa é a minha dúvida.
Peço desculpas pelo texto enorme, tentei ser o mais explícito possível com a minha dúvida, ainda que eu tenha sido bastante prolixo. Se alguem puder me ajudar a sanar essas dúvidas ficaria imensamente grato!
