Sorting

We need to be able sort:

Sorting Strings

There are two sorting methods that will sort an array of strings:

The array can contain strings or objects.

sort()

The some() method sorts an array of strings in ascending order. The sort() method does not work on arrays of numbers.

sort() applied to an array of strings

let names = ["Allen", "Mary", "Betty", "John"];

let sortedNames = names.sort();

alert(sortedNames[0] + "  " + sortedNames[1] + "  " + sortedNames[2] + "  " + sortedNames[3]);  // will display "Allen" "Betty" "John" "Mary"

Write code to implement the above sort.

reverse()

The reverse() method sorts an array of strings in decending order. The reverse() method does not work on arrays of numbers.

reverse() applied to an array of strings

let names = ["Allen", "Mary", "Betty", "John"];

let reverseSortedNames = names.reverse();

alert(reverseSortedNames[0] + "  " + reverseSortedNames[1] + "  " + reverseSortedNames[2] + "  " + reverseSortedNames[3]);  // will display "Mary" "John" "Betty" "Allen

Write code to implement the above reverse sort.

Sorting Numbers

The default sort() method sorts by ASCII value, so it cannot be used to sort numbers. In order to sort numbers, we pass a function into the sort() method.

Use the code below to sort an array of numbers in ascending or decending order:

var arrayOfNumbers = [400, 20, 32, 5, 25, 3];

// Sort in ascending order
let ascendingOrder = arrayOfNumbers.sort((a, b) => a < b?-1:1); alert("ascendingOrder: " + ascendingOrder); // Sort in decending order let descendingOrder = arrayOfNumbers.sort((a, b) => a > b?-1:1); alert("descendingOrder: " + descendingOrder);

Write code to implement the above two sorts.

We can use the above sort() inline function to sort strings. Write code to do this, as shown here.

Sorting Objects

We can use the same sort() inline function to sort object arrays, based on either a string or numerical value.

Example of an object being sorted on a string value (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>Sort object in ascending order based on numerical value example</title>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <meta http-equiv="Content-Language" content="en" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <p>Sort object in ascending order based on string value example</p>
        <script>
            var arrayOfObjects = [{name: "Cathy", age: 25}, {name: "Anne", age: 22}, {name: "Dermot", age: 20}, {name: "Bill", age: 21}, {name: "Eric", age: 19}]

            document.write(`BEFORE:<br>
                            ${arrayOfObjects[0].name}: ${arrayOfObjects[0].age}<br>
                            ${arrayOfObjects[1].name}: ${arrayOfObjects[1].age}<br>
                            ${arrayOfObjects[2].name}: ${arrayOfObjects[2].age}<br>     
                            ${arrayOfObjects[3].name}: ${arrayOfObjects[3].age}<br>
                            ${arrayOfObjects[4].name}: ${arrayOfObjects[4].age}<br><br><br>`);

            // Sort in ascending order based on name
            
            let  ascendingOrder = arrayOfObjects.sort((a, b) => a.name < b.name?-1:1);
        
            document.write(`AFTER:<br>
                            ${ascendingOrder[0].name}: ${ascendingOrder[0].age}<br>
                            ${ascendingOrder[1].name}: ${ascendingOrder[1].age}<br>
                            ${ascendingOrder[2].name}: ${ascendingOrder[2].age}<br>     
                            ${ascendingOrder[3].name}: ${ascendingOrder[3].age}<br>
                            ${ascendingOrder[4].name}: ${ascendingOrder[4].age}`);
        </script>
    </body>
</html>

Write code to sort the array of objects from the example above, based on age, as shown here.
Use this array of objects [{name:"Cathy", age:25},{name:"Anne", age:22},{name:"Dermot", age:20},{name:"Bill", age:21},{name:"Eric", age:19}]

 

 
<div align="center"><a href="file:///C|/Users/Derek/Documents/Notes/versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>