Javascript – How to sort an Array

  • by
javascipt-sort-array-object-sample
Post Views: 261

JavaScript Array.sort() method is used to sort an Array object. We can sort an array in both Ascending and Descending order. Array.sort() is used to sort in ascending order and Array.reverse() to sort in descending order. Here we will see an example for sorting a String array, Number array and an array containing both Numbers and Letters. JavaScript Sort Array:

Sorting a String Array in Javascript:

Array.sort()

var words = ['partner','beam','soup','efflux','ethnic','account','battle','suffer','environment','chaos','virtue','policy','vision','torch','position','allocation','specimen','trolley'];

document.getElementById("pWordsAsc").innerHTML = '<ol>'
words.sort().forEach(element => {
document.getElementById("pWordsAsc").innerHTML += '<li>'+element.toLocaleUpperCase()+'</li>'
});
document.getElementById("pWordsAsc").innerHTML += '</ol>'

Output:

  • ACCOUNT
  • ALLOCATION
  • BATTLE
  • BEAM
  • CHAOS
  • EFFLUX
  • ENVIRONMENT
  • ETHNIC
  • PARTNER
  • POLICY
  • POSITION
  • SOUP
  • SPECIMEN
  • SUFFER
  • TORCH
  • TROLLEY
  • VIRTUE
  • VISION

Array.reverse()

var words = ['partner','beam','soup','efflux','ethnic','account','battle','suffer','environment','chaos','virtue','policy','vision','torch','position','allocation','specimen','trolley'];

document.getElementById("pWordsReverse").innerHTML = '<ol>'
words.reverse().forEach(element => {
document.getElementById("pWordsReverse").innerHTML += '<li>'+element.toLocaleUpperCase()+'</li>'
});
document.getElementById("pWordsReverse").innerHTML += '</ol>'

Output:

  • VISION
  • VIRTUE
  • TROLLEY
  • TORCH
  • SUFFER
  • SPECIMEN
  • SOUP
  • POSITION
  • POLICY
  • PARTNER
  • ETHNIC
  • ENVIRONMENT
  • EFFLUX
  • CHAOS
  • BEAM
  • BATTLE
  • ALLOCATION
  • ACCOUNT
Sorting an Numeric Array in Javascript:

For sorting an Numeric Array in Javascipt we have to use Array.sort(function(a,b){ return a-b}), because if we were to take an Array with [90,100,500] and treat each object like a string than “100” will come before “90”, because 1 comes before 9. So we have to Array.sort(function(a,b){ return a-b}). This will compare 100 & 90 and return 90,100 if sort is in asc.
NumberArray.sort()

var num = [545,989,1,70,100,90,6456,9989,74,121,233,45,78789,52454,212,465,8787,1212,25545,3546,656,89,4456646];
document.getElementById("pNumSorted").innerHTML = '<ol>'
num.sort(function(a,b){ return a-b}).forEach(element => {
document.getElementById("pNumSorted").innerHTML += '<li>'+element+'</li>'
});
document.getElementById("pNumSorted").innerHTML += '</ol>'

Output:

  • 1
  • 45
  • 70
  • 74
  • 89
  • 90
  • 100
  • 121
  • 212
  • 233
  • 465
  • 545
  • 656
  • 989
  • 1212
  • 3546
  • 6456
  • 8787
  • 9989
  • 25545
  • 52454
  • 78789
  • 4456646

NumberArray.reverse()

var num = [545,989,1,70,100,90,6456,9989,74,121,233,45,78789,52454,212,465,8787,1212,25545,3546,656,89,4456646];
document.getElementById("pNumReversed").innerHTML = '<ol>'
num.reverse(function(a,b){ return a-b}).forEach(element => {
document.getElementById("pNumReversed").innerHTML += '<li>'+element+'</li>'
});
document.getElementById("pNumReversed").innerHTML += '</ol>'

Output:

  • 4456646
  • 78789
  • 52454
  • 25545
  • 9989
  • 8787
  • 6456
  • 3546
  • 1212
  • 989
  • 656
  • 545
  • 465
  • 233
  • 212
  • 121
  • 100
  • 90
  • 89
  • 74
  • 70
  • 45
  • 1
Sorting an Array with String and Number combination in Javascript:

Most of the times we will have an Array with string and numbers objects. Like var baz = [‘Apple’,’Orange’,’Mango’, 70, 5, 91, 65,265] . To Sort this kind of arrays in Javascript we can use array.slice() method.

Example:

var combo = ['Apple','Orange','Mango', 70, 5, 91, 65,265];
const sortedcombo = combo.slice(0, combo.length).sort(function(a,b){ return a-b});
document.getElementById("pBaz").innerHTML = '<ol>'
sortedcombo.forEach(element => {
document.getElementById("pBaz").innerHTML += '<li>'+element+'</li>'
});
document.getElementById("pBaz").innerHTML += '</ol>'
Output:
  • Apple
  • Orange
  • Mango
  • 5
  • 65
  • 70
  • 91
  • 265
Javacript – Sort an Array in Asc and Desc order Example:

Index.html:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<title>Javascript - Sort Arrays</title>
</head>
<style>
body
{
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding:5px !important;
background-color: black;
color:white;
}
</style>
<body>
<div class='row'>
<div class='col-lg-2'>
Parent-Array
<p id="pWords">
</p>
</div>
<div class='col-lg-2'>
Array Sorted
<p id="pWordsAsc">
</p>
</div>
<div class='col-lg-2'>
Array Reversed
<p id="pWordsReverse">
</p>
</div>
<div class='col-lg-2'>
Parent-Array-Num
<p id="pNum">
</p>
</div>
<div class='col-lg-2'>
Array-Num Sorted
<p id="pNumSorted">
</p>
</div>
<div class='col-lg-2'>
Array-Num Reversed
<p id="pNumReversed">
</p>
</div>
</div>
<div class='row'>
<p id='pCombo'></p>
</div>

<script>
var words = ['partner','beam','soup','efflux','ethnic','account','battle','suffer','environment','chaos','virtue','policy','vision','torch','position','allocation','specimen','trolley'];

var num = [545,989,1,70,100,90,6456,9989,74,121,233,45,78789,52454,212,465,8787,1212,25545,3546,656,89,4456646];
var combo = ['Apple','Orange','Mango', 70, 5, 91, 65,265];

function printWords()
{
document.getElementById("pWords").innerHTML = '<ol>'
words.forEach(element => {
document.getElementById("pWords").innerHTML += '<li>'+element.toLocaleUpperCase()+'</li>'
});
document.getElementById("pWords").innerHTML += '</ol>'

document.getElementById("pWordsAsc").innerHTML = '<ol>'
words.sort().forEach(element => {
document.getElementById("pWordsAsc").innerHTML += '<li>'+element.toLocaleUpperCase()+'</li>'
});
document.getElementById("pWordsAsc").innerHTML += '</ol>'

document.getElementById("pWordsReverse").innerHTML = '<ol>'
words.reverse().forEach(element => {
document.getElementById("pWordsReverse").innerHTML += '<li>'+element.toLocaleUpperCase()+'</li>'
});
document.getElementById("pWordsReverse").innerHTML += '</ol>'

document.getElementById("pNum").innerHTML = '<ol>'
num.forEach(element => {
document.getElementById("pNum").innerHTML += '<li>'+element+'</li>'
});
document.getElementById("pNum").innerHTML += '</ol>'

document.getElementById("pNumSorted").innerHTML = '<ol>'
num.sort(function(a,b){ return a-b}).forEach(element => {
document.getElementById("pNumSorted").innerHTML += '<li>'+element+'</li>'
});
document.getElementById("pNumSorted").innerHTML += '</ol>'

document.getElementById("pNumReversed").innerHTML = '<ol>'
num.reverse(function(a,b){ return a-b}).forEach(element => {
document.getElementById("pNumReversed").innerHTML += '<li>'+element+'</li>'
});
document.getElementById("pNumReversed").innerHTML += '</ol>'

const sortedcombo = combo.slice(0, combo.length).sort(function(a,b){ return a-b});
document.getElementById("pCombo").innerHTML = '<ol>'
sortedcombo.forEach(element => {
document.getElementById("pCombo").innerHTML += '<li>'+element+'</li>'
});
document.getElementById("pCombo").innerHTML += '</ol>'

}
printWords();
</script>
</body>
</html>

Output:

Also see:
How to create a digital clock using Javascript?

Javascript – Get Current System Date and Time in different Formats.

JQuery – Styling the DatePicker with custom CSS

Bootstrap – How to create Modal PopUps?

Bootstrap – Create a Responsive Bootstrap Carousel.


Tags: