[Sugestão] Melhoria no código do projeto Alura Midi

Completei o curso de Javascript Crie páginas dinamicas onde fizemos o projeto Alura Midi. Depois enquanto fazia o curso Manipulando o DOM percebi que poderia percorrer o array de botões de outro jeito. Vejam abaixo.

O que eu fiz:

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

tecla = (element) =>{
    let instrumento = element.textContent
    let  idAudio= `#som_tecla_${instrumento}`;

    element.onclick = function(){
    tocaSom(idAudio)

        }
    element.onkeydown = function ( event ){
        if (event.code === 'Enter' || event.code === 'Space'){
        element.classList.add('ativa');
            }
        }
    element.onkeyup = function ( event ){
        if (event.code === 'Enter' || event.code === 'Space'){
            element.classList.remove('ativa');
            }
        }
    }

listaDeTeclas.forEach(tecla);

O que fizemos na aula:

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

    const tecla = listaDeTeclas[contador];
    const instrumento = tecla.classList[1];
    const idAudio = `#som_${instrumento}`

    tecla.onclick = function () {

    tocaSom(idAudio)
    }

    tecla.onkeydown = function ( event ){
        if (event.code === 'Enter' || event.code === 'Space'){
        tecla.classList.add('ativa');
        }
    }
    tecla.onkeyup = function ( event ){
        if (event.code === 'Enter' || event.code === 'Space'){
            tecla.classList.remove('ativa');
        }
    }

}