Resultados diferentes com

Quando acesso a propriedade do objeto pelas [] a funcao funciona como esperado("a[propriedade]"). Porém, quando acesso por meio do ponto "." nao funciona conforme o esperado ("a.propriedade"). Alguém sabe me explicar o por que disso ?

function ordenar (lista, propriedade){
    const resultado = lista.sort((a, b)=> {
        if (a[propriedade] < b[propriedade]){
            return -1;
        }
        if (a[propriedade] > b[propriedade]){
            return 1;
        }
        return 0;
    })
    console.log(resultado)
}
ordenar(clientes, "nome")

Resultado fica diferente quando acesso pelo ponto:

function ordenar (lista, propriedade){
    const resultado = lista.sort((a, b)=> {
        if (a.propriedade < b.propriedade){
            return -1;
        }
        if (a.propriedade  > b.propriedade){
            return 1;
        }
        return 0;
    })
    console.log(resultado)
}
ordenar(clientes, "nome")

André,

Então... err... fiquei na dúvida ... o que é "a.propriedade"?

Para descobrir o que é, eu fiz o seguinte...

... pedi para fazer um "console.log" dentro da função anônima com "a.propriedade" e com "a[propriedade]", desta forma:

function ordenar(lista, propriedade, ordem = "crescente") {
  const resultado = lista.sort((a, b) => {
  
    console.log(a.propriedade);
    console.log(a[propriedade]);

    if (a.propriedade > b.propriedade) {
      return 1;
    } else if (a.propriedade < b.propriedade) {
      return -1;
    } else {
      return 0;
    }
  });

No caso do "a.propriedade" escreveu várias vezes "undefined" ... epa! Não dá para comparar isso! Mas não deu erro.
No caso do "a[propriedade]" escreveu os nomes corretamente. Aê sim!

Geralmente o que é colocado depois do "." (ponto) é um método.

E o que é colocado dentro dos colchetes "[]" pode ser um valor de índice da propriedade.