Lesson 6

Mastering the Sort Function: Organizing Data in JavaScript

Topic Overview and Learning Goal

Welcome back, learners! Today, we will unravel the magic of JavaScript's built-in sort() function. We will discover how this excellent tool comes into play when managing extensive customer databases or arranging products in an online store. By mastering the sort() function, you can efficiently organize arrays in your code, ensuring a smoother user experience.

Introduction to JavaScript's sort function

Have you ever observed how products in an online shop are arranged? They're sorted in a specific order: alphabetically, by price, by popularity, etc. Similarly, in JavaScript, sorting helps to arrange arrays in a particular order.

Meet the hero of our lesson — the sort() function, a built-in method in JavaScript for sorting arrays. Let's examine how it works:

JavaScript
1let friends = ["Tom", "Jerry", "Mickey", "Donald"]; 2friends.sort(); 3 4console.log(friends); 5// Output: ["Donald", "Jerry", "Mickey", "Tom"]
Sorting Numerical Arrays

Interestingly, sorting numbers in JavaScript is different. Let's unravel this:

JavaScript
1let numbers = [5, 1, 8, 3]; 2numbers.sort(); 3 4console.log(numbers); // Output: [1, 3, 5, 8]

Everything works well until you sort an array like [15, 1, 100, 3]. You'll find that sort() treats numbers as strings! That's an unexpected result. Let's tackle this using a compare function (a, b) => a - b, which sorts numbers in ascending order. If the result of the provided compare function is negative, the 1st argument goes before the 2nd, and vice versa.

JavaScript
1let numbers = [15, 1, 100, 3]; 2numbers.sort((a, b) => a - b); // This will sort numbers in ascending order 3 4console.log(numbers); // Output: [1, 3, 15, 100]
Custom Sorting with JavaScript's Sort Function

The true power of sort() reveals itself when you provide a compare function. This function determines the sorting order. Let's look at an array of scores sorted in descending order:

JavaScript
1let scores = [60, 90, 82, 100, 56]; 2scores.sort((a, b) => b - a); 3 4console.log(scores); // Output: [100, 90, 82, 60, 56]

See? The compare function (a, b) => b - a helps sort the scores in descending order.

Multi-Factor Sorting in JavaScript

Great work so far! Now, let's dive a little deeper. Like a shop sorting products first by category, then by price within each category, we can sort arrays on multiple layers using JavaScript's sort() function. This technique is called multi-factor sorting.

Consider an array of objects representing students, with each object containing the student's name and grade:

JavaScript
1let students = [ 2 { name: "Tom", grade: 90 }, 3 { name: "Jerry", grade: 95 }, 4 { name: "Mickey", grade: 90 }, 5 { name: "Donald", grade: 95 } 6];

We can sort this array by grade and name within each grade. Let's learn how to do it:

JavaScript
1students.sort((a, b) => { 2 if (a.grade < b.grade) return -1; 3 if (a.grade > b.grade) return 1; 4 5 // Here, 'grade' is the same, so we sort by 'name' 6 if (a.name < b.name) return -1; 7 if (a.name > b.name) return 1; 8 9 return 0; // a and b are equal, remain in same position 10});

Our compare function starts by checking the grade. If the grade of a is less than b, it returns -1, meaning a comes before b. If the grade of a is more than b, it returns 1, so a comes after b.

If grades are identical, our function proceeds to check name. The same principle applies: if a comes before b, it returns -1; otherwise, it returns 1.

Sorting Result

As a result, our students array gets sorted first by grade, then by name within each grade. Fantastic work!

JavaScript
1console.log(students); 2/* Output: 3[ 4 { name: 'Mickey', grade: 90 }, 5 { name: 'Tom', grade: 90 }, 6 { name: 'Donald', grade: 95 }, 7 { name: 'Jerry', grade: 95 } 8] 9*/
Lesson Summary and Next Steps

Bravo! You've expanded your knowledge of JavaScript sorting. We've sorted simple and complex arrays, discovered the importance of a compare function, and learned to deal with undefined or null values.

Now, let's put your learning into practice.

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.