[Dúvida] Dúvida sobre a lógica da função

Não consegui entender a lógica de:

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

let counter = 0

function playPom () {
    document.querySelector('#som_tecla_pom').play();
}

while (counter < keysList.length) {
keysList[counter].onclick = playPom;
counter +=1;
console.log(counter);
}

O código funciona como mostrado no vídeo, porém, não entendi como o código faz com que todas as teclas(itens de uma lista) sejam capazes de reproduzir o som quando clicadas. O valor de "counter" é igual a 9 depois que o valor para de ser incrementado, sendo assim, o único item da lista que deveria responder adequadamente não seria o item "9"(que não existe na lista)? Percebi que substituir o "contador" por "9" ("...keysList[9]...") faz com que a função deixe de apresentar o resultado de antes, mesmo o valor de "counter" sendo igual a 9.

ATUALIZAÇÃO: Acredito que meu erro foi interpretar que o código contido no "while" deixaria de valer à partir do momento em que a condição apresentada tornasse falsa, porém, ainda não entendi exatamente o que acontece quando o "counter" atribui um valor ao "keysList[counter]" e como este valor é guardado.

RESOLVIDO: No momento em que o código executa "keysList[counter].onclick = playPom;", é atribuida ao item da lista correspondente ao valor de "counter", a característica "onclick = playPom", meu erro foi interpretar que que essa característica seria perdida no momento em que o código fosse executado com o próximo valor de "counter".