Mastering JavaScript's Sort Method: Practical Examples and Custom Sort

Introduction

Sorting is a fundamental operation in programming, and JavaScript provides a versatile tool for this task—the sort method. In this article, we'll explore the sort method, unraveling its intricacies through practical examples and engaging exercises.

Understanding the Sort Method

Similar to the filter and map methods, the sort method operates on arrays, facilitating the arrangement of elements based on specific criteria. Unlike the other methods, sort directly modifies the array in place, making it a powerful and efficient tool for organizing data.

How it works ?

const numbers = [5, 2, 8, 1, 9];

// Use the sort method to arrange numbers on your convenient
numbers.sort(sortingMethod);

sortingMethod is a callback you will use to define the manner your want to sort the items in the array. In other words, you use it to define which item is comming before another. But how to define that 🤔?

It is simple!

Consider that we have the following array:

const numbers = [5, 2, 8, 1, 9];

We want to sort this numbers from the smallest to the largest. That means that the smallest numbers should be placed before the largest numbers. Your callback should say to the sort method: 'Hey sort when you have two element a and b, if a is small than b, place a before b, but if a is greater than b place b before a and if there are equal, place them side by side'.

To do it, your callback return three values:

a negative value if a should be placed before b,
a positive value if a should be placed after b ,
and 0 if the order is not important.

So, let's pratice it with the previous list:

const numbers = [5, 2, 8, 1, 9];

numbers.sort((a, b) => {
    if (a < b)
        return -1;
    else if (a > b)
        return 1;
    return 0;
});

console.log(numbers) //[1, 2, 5, 8, 9]

So with the negative value, you define what are the first elements and the positive value define the last elements.

💡

Since the value are eighter negative or positive(not only -1 or 1), we can write the previous exemple like that:

const numbers = [5, 2, 8, 1, 9];

numbers.sort((a, b) => {
    return a - b;
});

console.log(numbers) //[1, 2, 5, 8, 9]

a < b so a - b < 0,
a > b so a - b > 0 and
a == b so a - b = 0.

Custom Sorting Criteria

You can customize the sorting criteria to accommodate complex data structures, as shown in the example below:

const students = [
  { name: 'Alice', age: 22 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 20 },
  // ... (additional student objects)
];

// Sort students based on age in ascending order
students.sort((a, b) => a.age - b.age);

console.log(students);

Here, the sort method is applied to an array of student objects, arranging them based on their age attribute. The callback function compares the age values, ensuring a sorted array by age in ascending order.

Descending Order and String Sorting

To sort elements in descending order or handle string-based sorting, slight modifications to the callback function are required:

const words = ['apple', 'banana', 'orange', 'grape'];

// Sort words in descending order
words.sort((a, b) => b.localeCompare(a));

console.log(words); // ['orange', 'grape', 'banana', 'apple']

In this example, the localeCompare method is used for string comparison, resulting in a descending order of the words array.

💡

The localeCompare method is a JavaScript function used to compare strings based on the user's localization. In this example, the localeCompare method is used to sort the elements of an array of words in descending order. The general syntax of this method is as follows: string.localeCompare(compareString). It returns a negative number if the current string is sorted before the comparison string, a positive number if the current string is sorted after the comparison string, and zero if the two strings are equivalent. In the last example, by using b.localeCompare(a), the words are sorted in descending order, meaning that the word "orange" will be ranked before "grape", "banana", and "apple" in the final array.

Challenges Ahead: Let's Practice

Now, let's put your skills to the test. Consider an array of books with the following structure:

const books = [
  { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald', pages: 200 },
  // ... (additional book objects)
];

Your mission is to sort the books based on the number of pages in ascending order. Implement the sort method with a suitable callback function to achieve this goal.

Conclusion

The sort method in JavaScript provides a robust solution for arranging elements within an array, offering flexibility in sorting criteria. Whether you're working with numbers, strings, or complex objects, the sort method proves to be a valuable asset in your programming toolkit.

Stay tuned for the next part of this series, where we'll delve into the implementation of our own sorting method. Happy coding!

The Power of Sorting with JavaScript's Sort Method