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.
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:
JavaScript1let friends = ["Tom", "Jerry", "Mickey", "Donald"]; 2friends.sort(); 3 4console.log(friends); 5// Output: ["Donald", "Jerry", "Mickey", "Tom"]
Interestingly, sorting numbers in JavaScript is different. Let's unravel this:
JavaScript1let 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.
JavaScript1let 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]
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:
JavaScript1let 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.
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:
JavaScript1let 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:
JavaScript1students.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.
As a result, our students array gets sorted first by grade, then by name within each grade. Fantastic work!
JavaScript1console.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*/
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.