Lesson 6

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:

JavaScript`1let 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:

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]`

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.

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`

.

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*/`

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.