Como ordenar um array de objetos em JavaScript

Neste artigo você vai aprender a como ordenar um array de objetos em JavaScript, utilizando a função sort, para organizar seus dados

Conteúdo disponível em vídeo também:

Fala programador(a), beleza? Bora aprender mais sobre arrays, objetos e ordenação dos mesmos em JavaScript!

Para realizar a ordenação de um array de objetos vamos utilizar o método sort

Esta função pode receber como parâmetro uma função, que auxilia na ordenação dos valores dos objetos

Podemos então criar uma ordenação personalizada!

Veja um exemplo prático:

var pessoas = [
	{
  	nome: "Matheus",
    idade: 29
  },
  {
  	nome: "Pedro",
    idade: 18
  },
  {
  	nome: "Maria",
    idade: 40
  },
  {
  	nome: "Alan",
    idade: 63
  }
];

pessoas.sort(function(a, b) {
  if(a.nome < b.nome) {
    return -1;
  } else {
    return true;
  }
});

console.log(pessoas);

O resultado será:

[{
  idade: 63,
  nome: "Alan"
}, {
  idade: 40,
  nome: "Maria"
}, {
  idade: 29,
  nome: "Matheus"
}, {
  idade: 18,
  nome: "Pedro"
}]

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Neste caso estamos ordenando os nomes em ordem alfabética, veja que passamos uma função anônima para sort

Que tem como objetivo retornar os nomes do “maior” para o “menor”, poderíamos inverter para ter em ordem decrescente ou mudar a propriedade

Veja como ordenar o mesmo array por idade e de forma decrescente:

pessoas.sort(function(a,b) {
    return a.idade < b.idade;
});

console.log(pessoas);

O resultado será:

[{
  idade: 63,
  nome: "Alan"
}, {
  idade: 40,
  nome: "Maria"
}, {
  idade: 29,
  nome: "Matheus"
}, {
  idade: 18,
  nome: "Pedro"
}]

E para idade crescente:

pessoas.sort(function(a,b) {
    return a.idade > b.idade;
});

console.log(pessoas);

Teremos o seguinte resultado:

[{
  idade: 18,
  nome: "Pedro"
}, {
  idade: 29,
  nome: "Matheus"
}, {
  idade: 40,
  nome: "Maria"
}, {
  idade: 63,
  nome: "Alan"
}]

Desta forma, não há limites de tipos de ordenação que você pode criar, basta simplesmente criar uma função que manipule os dados do jeito que você precisa

Outro ponto interessante é que sorte muda a estrutura original dos dados, ou seja, altera o valor da variável com base na ordenação

Se você deseja manter uma cópia original, crie outra variável com o valor antes da modificação por sort

Conclusão

Neste artigo aprendemos a ordenar um array de objetos em JavaScript

Utilizamos a função sort para realizar esta tarefa

Ela aceita uma função como parâmetro, que pode realizar uma ordenação customizada

Ou seja, podemos criar qualquer tipo de ordenação sem depender das que já existem no JavaScript

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

O comparador precisa devolver número, não true/false:

Aqui mora a pegadinha que derruba a maioria das ordenações

O sort não quer saber de verdadeiro ou falso, ele quer um NÚMERO:

negativo, o primeiro item vem antes

zero, empate, fica como está

positivo, o segundo item vem antes

Quando você devolve true ou false, o JavaScript converte isso pra 1 e 0

Percebeu o problema? nunca sai um valor negativo, então o sort nunca recebe o recado de "esse aqui vem primeiro"

Em array pequeno até parece que funcionou, em lista maior a ordem sai bagunçada

O jeito certo pra número é uma subtração:

[bloco de código] pessoas.sort(function(a, b) { return a.idade – b.idade; });

Decrescente? inverte a subtração:

[bloco de código] pessoas.sort(function(a, b) { return b.idade – a.idade; });

Uma subtração já te entrega o negativo, o zero e o positivo de graça 🙂

Como ordenar sem alterar o array original:

O sort ordena no próprio array, ele não devolve um array novo

Ou seja: depois de rodar, a sua variável original já era, a ordem antiga se foi

Se você precisa dos dois (o original e o ordenado), copie antes de ordenar:

[bloco de código] return a.idade – b.idade; });

console.log(pessoas); // segue na ordem original console.log(ordenadas); // ordenado por idade

Se o teu código é mais antigo e você prefere não usar spread, o slice faz o mesmo serviço:

[bloco de código] var ordenadas = pessoas.slice().sort(function(a, b) { return a.idade – b.idade; });

Tome cuidado com isso em tela de listagem: ordenar direto no array que veio da API costuma bagunçar outro trecho que esperava a ordem original

Já me ferrei uma vez por causa disso haha

Como ordenar nomes com acento e maiúscula do jeito certo:

Comparar texto com < e > usa a ordem dos caracteres, não a ordem do dicionário

Aí acontece o que você não quer: "Ágata" cai depois de "Zé", e "ana" cai depois de "Bruno", porque minúscula vem depois de maiúscula nessa tabela

Pra comparar texto como gente, use localeCompare:

[bloco de código] pessoas.sort(function(a, b) { return a.nome.localeCompare(b.nome, "pt-BR"); });

Ele já devolve negativo, zero ou positivo, que é exatamente o que o sort pede

E de quebra resolve o Á, o Ç e o ê sem gambiarra 😀

Como ordenar por dois campos (o critério de desempate):

E quando duas pessoas têm a mesma idade? quem vem primeiro?

A lógica é: tenta o primeiro critério, se der empate cai pro segundo

[bloco de código] pessoas.sort(function(a, b) { if (a.idade !== b.idade) { return a.idade – b.idade; }

return a.nome.localeCompare(b.nome, "pt-BR"); });

Lembra do zero lá do começo? é ele que representa o empate

Por isso o if: só quando a subtração daria zero é que a gente parte pro desempate

Dá pra empilhar quantos critérios você quiser, é só ir descendo os if

Massa, né?

Como ordenar um array de objetos por data:

Esse é o caso que mais aparece na vida real: lista de posts, pedidos, mensagens

Data em texto não se compara com subtração direto, primeiro você transforma em Date:

[bloco de código] var posts = [ { titulo: "Post A", data: "2021-03-10" }, { titulo: "Post B", data: "2019-11-02" }, { titulo: "Post C", data: "2020-07-21" } ];

posts.sort(function(a, b) { return new Date(a.data) – new Date(b.data); });

Do mais novo pro mais antigo? inverte:

[bloco de código] posts.sort(function(a, b) { return new Date(b.data) – new Date(a.data); });

Tome cuidado! se a sua data vier no formato brasileiro, tipo 10/03/2021, converta os pedaços antes de jogar no Date, porque nesse formato a interpretação não é confiável

Quebra em dia, mês e ano e monta a data você mesmo, aí não tem surpresa