Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Utilização de var, let e const

Referente ao curso JavaScript para Web: Crie páginas dinâmicas, no capítulo Iterando em listas e atividade Textos dinâmicos

por Sérgio Mendes Filho
| 71.4k xp | 10 posts
function tocaSom(idDoAudio) {
    document.querySelector(idDoAudio).play();
}

var listaDeTeclas = document.querySelectorAll(".tecla");

for (var index = 0; index < listaDeTeclas.length; index++) {
    var tecla = listaDeTeclas[index];
    var instrumento = tecla.classList[1];
    var idAudio = `#som_${instrumento}`;  //Dúvida nesta linha//

    console.log(instrumento);

    tecla.onclick = function() {
        tocaSom(idAudio);
    }

}

Minha dúvida está na linha que coloquei em destaque, eu tentando mudar a forma de resolver o problema descobri que a variável idAudio não funciona como planejado, ao executar o clique no botão só sai o som do "TOM"(o último da lista de teclas) em qualquer tecla, mas se eu alterar de var para let ou const o som sai normalmente para cada tecla respectiva, gostaria de entender pq funciona com let e const e não com var. Obrigado!

2 respostas
solução!
por Vinicius Reis
| 70.1k xp | 52 posts

Este vídeo tem exatamente a resposta para sua pergunta: https://www.youtube.com/watch?v=QVrrqgDhhu4

Mas, basicamente, o que está acontecendo é a transformação que é feita no seu código antes de ser executado. Por padrão, o Javascript declara todas as funções e variáveis var no início do script. Portanto, o código que está sendo executado é algo do tipo:

var listaDeTeclas = undefined;
var index = undefined;
var tecla = undefined;
var instrumento = undefined;
var idAudio = undefined;

function tocaSom(idDoAudio) {
    document.querySelector(idDoAudio).play();
}

listaDeTeclas = document.querySelectorAll(".tecla");

for (index = 0; index < listaDeTeclas.length; index++) {
    tecla = listaDeTeclas[index];
    instrumento = tecla.classList[1];
    idAudio = `#som_${instrumento}`;  //Dúvida nesta linha//

    console.log(instrumento);

    tecla.onclick = function() {
        tocaSom(idAudio);
    }
}

Deste modo, o loop irá atualizar a variável idAudio normalmente, mas quando a função onclick for ser executada, o valor de idAudio será sempre o último que foi atribuído, pois a função será chamada após a execução do loop.

Como o let cria uma variável para cada passo do loop, cada tecla possuirá uma variável idAudio única. Sendo assim, a função onclick será executada com o valor da tecla correspondente.

Obs.: por bugs como estes que a comunidade hoje em dia sempre recomenda o uso de const para declarar variáveis. E caso o valor da variável precise ser alterado em algum ponto do código, utiliza-se o let.

por Sérgio Mendes Filho
| 71.4k xp | 10 posts

Agora entendi perfeitamente, ficou bem claro, agradeço muito! Excelente vídeo também!