JavaScript: Como ordenar um array (ascendente e desc.)

Neste artigo vamos aprender como ordenar um array, de form ascendente e descendente, na linguagem JavaScript.

 E aí programador(a), tudo certo? Bora aprender coisa nova então?

Ordenar arrays é uma tarefa bem simples com JavaScript, nós podemos utilizar o método sort para isso

Mas nem sempre somente ele é o  suficiente, por isso há uma possibilidade de adicionar uma função como parâmetro

E com esta função podemos fazer uma comparação entre os valores e ordenar os elementos de um array

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Tanto de forma ascendente como descendente

Então vamos ver na prática o código de como ordenar arrays:

let numbers = [5,32,1,838,34,2,5,9,8,2,98,42,64];

let numbersAsc = numbers.sort(function(a, b) {
    return a - b;
});

console.log(numbersAsc); // [1, 2, 2, 5, 5, 8, 9, 32, 34, 42, 64, 98, 838]

Neste exemplo criamos um array com números aleatórios

Após isso aplicamos o método sort com a função anônima que eu comentei anteriormente

A função serve para fazer uma comparação entre os dois valores, a e b, assim ela vai vendo qual dos dois é maior ou menor e organizando o array, legal né? 😀

Assim conseguimos ordernar o array de forma crescente, que eu inseri em um nova variável e imprimi no console

E se quisermos ordenar um array de forma descendente?

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Podemos aproveitar quas e mesma estrutura para isso, só apenas um detalhe a mais resolverá o problema

Em vez de compararmos a – b, vamos fazer b – a

Isso garantirá que o maior número venha para o início e o menor para o final, fazendo com que ordene o array de forma descendente, veja:

let numbers = [5,32,1,838,34,2,5,9,8,2,98,42,64];

let numbersDesc = numbers.sort(function(a, b) {
    return b - a;
});

console.log(numbersDesc); // [838, 98, 64, 42, 34, 32, 9, 8, 5, 5, 2, 2, 1]

Quando eu vi essa forma simples de ordenar array pela primeira vez, também pensei que era mágica

Mas realmente funciona, faça os testes 🙂

Conclusão

Vimos que podemos ordenar arrays no JavaScript de forma muito simples

Utilizamos o método sort para isso, com uma função para nos auxiliar a comparar os valores do array

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

Por que o sort() sozinho bagunça os números?

Antes de decorar a função de comparação, vale entender o porquê dela existir

Se você chamar o sort sem nada dentro, o JavaScript não compara os valores como número, ele converte cada item pra texto e ordena caractere por caractere

É que nem a lista de contatos do celular, que põe "Ana" antes de "Bruno" olhando letra por letra

Aí acontece isso:

console.log(numeros.sort())

Estranho né? 😅

O 9 foi parar lá no fim porque, como texto, "9" vem depois de "1" e de "100"

É exatamente por isso que a gente passa aquela função de comparação: ela força a comparação numérica de verdade

Tome cuidado: o sort altera o array original!

Esse é o detalhe que pega quase todo mundo desprevenido

O sort não devolve um array novo, ele reordena o array que você já tinha e devolve ele mesmo

Ou seja, nos exemplos acima o numbers e o numbersAsc são a MESMA coisa

let ordenados = numeros.sort(function(a, b) {
return a - b
})

ordenados.push(99)

Mexeu num, mexeu no outro

Se você precisa manter o array original intacto, copia ele antes de ordenar:

return a - b
})

Aqueles três pontinhos são o spread operator, ele espalha os itens do array dentro de um array novinho

É o tipo de coisa que faz a gente caçar bug no lugar errado por meia hora, se liga nisso

Como ordenar um array de strings em ordem alfabética?

Com texto a lógica muda um pouco, porque não dá pra subtrair uma palavra da outra

Aqui o localeCompare resolve: ele compara duas strings e já devolve o número que o sort espera

return a.localeCompare(b)
})

console.log(nomesOrdenados)

E pra ordem decrescente, mesmo truque do exemplo com números: inverte quem chama

return b.localeCompare(a)
})

Pra quem escreve em português isso ajuda demais, porque palavra com acento não fica jogada no fim da fila

Como ordenar um array de objetos por uma propriedade?

Na vida real o array quase nunca é um monte de número solto, geralmente é uma lista de produtos, de usuários, de posts

A boa notícia: a estrutura é a mesma, você só aponta a comparação pra propriedade que interessa

let produtos = [
{ nome: "Teclado", preco: 250 },
{ nome: "Mouse", preco: 90 },
{ nome: "Monitor", preco: 900 }
]

return a.preco - b.preco
})

console.log(maisBaratos)

Trocou o a – b por b – a? Vira do mais caro pro mais barato, igualzinho ao exemplo com números

E se a propriedade for texto, é o localeCompare de novo:

return a.nome.localeCompare(b.nome)
})

Faça o teste com seus próprios dados, é sempre a mesma receita mudando o que entra na comparação

A mesma ordenação escrita com arrow function:

Os exemplos aqui usam function anônima, que é a forma clássica e continua funcionando redondo

Só que hoje você vai esbarrar muito com a arrow function, que é a versão enxuta da mesma ideia

Uma linha e acabou, massa demais

E não tem mágica nenhuma: é a MESMA função de comparação, só que sem a palavra function e sem o return escrito

Vale conhecer as duas formas, a clássica você acha em código mais antigo e a arrow aparece bastante no que se escreve hoje em dia

Por que o sort() sozinho bagunça os números?

Antes de decorar a função de comparação, vale entender o porquê dela existir

Se você chamar o sort sem nada dentro, o JavaScript não compara os valores como número, ele converte cada item pra texto e ordena caractere por caractere

É que nem a lista de contatos do celular, que põe "Ana" antes de "Bruno" olhando letra por letra

Aí acontece isso:

console.log(numeros.sort())

Estranho né? 😅

O 9 foi parar lá no fim porque, como texto, "9" vem depois de "1" e de "100"

É exatamente por isso que a gente passa aquela função de comparação: ela força a comparação numérica de verdade

Tome cuidado: o sort altera o array original!

Esse é o detalhe que pega quase todo mundo desprevenido

O sort não devolve um array novo, ele reordena o array que você já tinha e devolve ele mesmo

Ou seja, nos exemplos acima o numbers e o numbersAsc são a MESMA coisa

let ordenados = numeros.sort(function(a, b) {
return a - b
})

ordenados.push(99)

Mexeu num, mexeu no outro

Se você precisa manter o array original intacto, copia ele antes de ordenar:

return a - b
})

Aqueles três pontinhos são o spread operator, ele espalha os itens do array dentro de um array novinho

É o tipo de coisa que faz a gente caçar bug no lugar errado por meia hora, se liga nisso

Como ordenar um array de strings em ordem alfabética?

Com texto a lógica muda um pouco, porque não dá pra subtrair uma palavra da outra

Aqui o localeCompare resolve: ele compara duas strings e já devolve o número que o sort espera

return a.localeCompare(b)
})

console.log(nomesOrdenados)

E pra ordem decrescente, mesmo truque do exemplo com números: inverte quem chama

return b.localeCompare(a)
})

Pra quem escreve em português isso ajuda demais, porque palavra com acento não fica jogada no fim da fila

Como ordenar um array de objetos por uma propriedade?

Na vida real o array quase nunca é um monte de número solto, geralmente é uma lista de produtos, de usuários, de posts

A boa notícia: a estrutura é a mesma, você só aponta a comparação pra propriedade que interessa

let produtos = [
{ nome: "Teclado", preco: 250 },
{ nome: "Mouse", preco: 90 },
{ nome: "Monitor", preco: 900 }
]

return a.preco - b.preco
})

console.log(maisBaratos)

Trocou o a – b por b – a? Vira do mais caro pro mais barato, igualzinho ao exemplo com números

E se a propriedade for texto, é o localeCompare de novo:

return a.nome.localeCompare(b.nome)
})

Faça o teste com seus próprios dados, é sempre a mesma receita mudando o que entra na comparação

A mesma ordenação escrita com arrow function:

Os exemplos aqui usam function anônima, que é a forma clássica e continua funcionando redondo

Só que hoje você vai esbarrar muito com a arrow function, que é a versão enxuta da mesma ideia

Uma linha e acabou, massa demais

E não tem mágica nenhuma: é a MESMA função de comparação, só que sem a palavra function e sem o return escrito

Vale conhecer as duas formas, a clássica você acha em código mais antigo e a arrow aparece bastante no que se escreve hoje em dia