Olá, estou apenas com dúvida nesse const idAudio = #som_${instrumento};, afinal, o que esse $ e o instrumento entre chaves indica? Apenas quero entender a lógica por trás, se alguém puder me explicar melhor, agradeceria
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Olá, estou apenas com dúvida nesse const idAudio = #som_${instrumento};, afinal, o que esse $ e o instrumento entre chaves indica? Apenas quero entender a lógica por trás, se alguém puder me explicar melhor, agradeceria
Olá Ana, tudo bem?
Respondendo à sua pergunta, o $ é um caractere especial em JavaScript que indica que o que vem a seguir é uma variável. No caso do seu código, instrumento é uma variável que contém o nome do instrumento que você está usando.
Ao utilizar o $ junto com as chaves {}, você está criando uma template string, que permite que você insira variáveis dentro de uma string de forma mais fácil e legível. Dessa forma, o valor da variável instrumento é inserido na string, formando o valor final de idAudio.
Espero ter ajudado a esclarecer sua dúvida. Se ainda tiver alguma pergunta, é só falar! Bons estudos!
Nessa parte do código foi utilizado uma Template String, que é uma das formas de criar Strings (Strings são utilizadas para representarem textos) no JS.
Antes de explicar essa parte mais profundamente, é necessário voltar algumas linhas no código para entender de onde surgiu o "{instrumento}".
while (contador < listaDeTeclas.length){
const tecla = listaDeTeclas[contador];
const instrumento = tecla.classList[1];
Acima, é visto que "instrumento" é uma constante que está recebendo os valores de tecla.classList[1] através do laço de repetição. classList é uma propriedade do JS utilizada para acessar as listas de classe atreladas a um atributo, neste caso, ao atributo "teclas". O índice 1 indica que está sendo acessada a segunda classe dos atributos teclas, que neste caso são: tecla_pom, tecla_clap, tecla_tim, tecla_puff, tecla_splash, tecla_toim, tecla_psh, tecla_tic, tecla_tom. Ou seja, conforme a estrutura de repetição é sendo executada, é atribuído a constante "instrumento" o nome das teclas do piano.
Agora, observe no código index.html que os sons de cada tecla possui um id único, mas todos compartilham entre si a característica de começarem por "#som_"
<audio src="sounds/keyq.wav" id="**som_**tecla_pom"></audio>
<audio src="sounds/keyw.wav" id="**som_**tecla_clap"></audio>
<audio src="sounds/keye.wav" id="**som_**tecla_tim"></audio>
<audio src="sounds/keya.wav" id="**som_**tecla_puff"></audio>
<audio src="sounds/keys.wav" id="**som_**tecla_splash"></audio>
<audio src="sounds/keyd.wav" id="**som_**tecla_toim"></audio>
<audio src="sounds/keyz.wav" id="**som_**tecla_psh"></audio>
<audio src="sounds/keyx.wav" id="**som_**tecla_tic"></audio>
<audio src="sounds/keyc.wav" id="**som_**tecla_tom"></audio>
Como já dito anteriormente, a constante "instrumento" está recebendo o nome das teclas do piano, sendo elas: tecla_pom, tecla_clap, tecla_tim, tecla_puff, tecla_splash, tecla_toim, tecla_psh, tecla_tic, tecla_tom.
Se você observar, verá que o id é formado por #som_+o nome da tecla. Ou seja: #som_instrumento = id correto de uma tecla, e assim poderá atribuí-la a constante idAudio:
const idAudio = `#som_${instrumento}`;
O cifrão é utilizado para interpolar a constante "instrumento" dentro da template String, ou seja: para permitir que o valor da constante seja inserido diretamente na String e os colchetes representam o "valor" da constante "instrumento".
Ou seja, na primeira repetição, a const idAudio terá o valor de: #som_tecla_pom e, consequentemente, terá, de fato, o áudio da tecla como valor.