JavaScript para Web: Crie páginas dinâmicas - Declaração de variável no código

Para meu código funcionar, precisei colocar as variáveis que recebem o id de som e o template string para seguir o padrão do id do código html dentro do for, como no código abaixo:

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

const listaDeTeclas = document.querySelectorAll('.tecla');

for (let counter = 0; counter < listaDeTeclas.length; counter++){ 

    tecla = listaDeTeclas[counter];

    let instrumento = tecla.classList[1];// <---- Declarado dentro do for

    let idAudio = `#som_${instrumento}`;// <---- Declarado dentro do for

    console.log(idAudio);

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

Entretanto, eu tentei declarar as mesmas variáveis fora do loop, mas não deu certo. Realmente precisa ser dentro do loop para funcionar ou há alguma alternativa que pode existir para a declaração antes da execução do loop?

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

const listaDeTeclas = document.querySelectorAll('.tecla');

let instrumento = ''; // <---- Declarado fora do loop
let idAudio = ``;

for (let counter = 0; counter < listaDeTeclas.length; counter++){ 

    tecla = listaDeTeclas[counter];

    instrumento = tecla.classList[1];

    idAudio = `#som_${instrumento}`;

    console.log(idAudio);

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