Incluindo Classe no JavaScript

Uma coisa interessante que aconteceu , que ainda não entendi o por quê, é que se tentarmos setar, dentro do for ou while, valores ou atributos por mrio de variaveis que não estão setads como constantes dentro do laço, o javascript não consegue entender como setagem, ou seja, eu não pude usar listaDeTeclas[x].onclick , eu tive se enviar a lista para uma constante e depois setar ela dentro do laço.

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

function tocasom(tecla) {
    document.querySelector(tecla).play();
}

const numeroTeclas = listaDeTeclas.length;


for (var n = 0; n < numeroTeclas; n++) {
    const teclar = listaDeTeclas[n];

   teclar.onclick = function () {
        tocasom(`#som_${teclar.classList[1]}`);
    }

   teclar.onkeydown = function () {
       teclar.classList.add('ativa');
    }

   teclar.onkeyup = function () {
       teclar.classList.remove('ativa');
    }
        }