Lesson 24: Sorting Arrays

Master array sorting techniques in JavaScript to organize your data efficiently.

24.1 Sorting Arrays in JavaScript

In this lesson, we'll learn how to sort arrays using JavaScript's built-in sort() method. Sorting is essential for organizing data and making it easier to analyze and present.

Key points: The sort() method sorts elements as strings by default. To sort numbers correctly, we need to provide a comparator function.

24.2 Understanding the Comparator Function

The comparator function determines the sorting order by comparing two elements:

  • Returns a negative value if the first element should come before the second
  • Returns zero if elements are equal
  • Returns a positive value if the first element should come after the second

Example 24.1: Sorting Numbers with Comparator

This example demonstrates sorting an array of student scores:

function sortScores() {
  const scores = [50, 60, 65, 75, 80, 68, 70, 85];
  
  // Create a copy to avoid modifying original
  const sortedScores = [...scores];
  
  // Sort with comparator function
  sortedScores.sort((a, b) => a - b);
  
  return sortedScores;
}
Original scores: [50, 60, 65, 75, 80, 68, 70, 85] Click the button to sort the scores

24.3 Sorting Strings

Sorting strings is straightforward as the default behavior works well for alphabetical sorting:

Example 24.2: Sorting Student Names

This example sorts an array of student names alphabetically:

function sortNames() {
  const studentNames = [
    "Alex", "Brian", "Carmen", 
    "Dave", "Graham", "Keynes", 
    "Morgan", "Olson"
  ];
  
  // Create a copy to avoid modifying original
  const sortedNames = [...studentNames];
  
  // Sort alphabetically
  sortedNames.sort();
  
  return sortedNames;
}
Original names: ["Alex", "Brian", "Carmen", "Dave", "Graham", "Keynes", "Morgan", "Olson"] Click the button to sort the names

24.4 Descending Order

To sort in descending order, we simply reverse the comparator logic:

Example 24.3: Sorting Scores Descending

This example sorts student scores from highest to lowest:

function sortScoresDescending() {
  const scores = [50, 60, 65, 75, 80, 68, 70, 85];
  
  // Create a copy to avoid modifying original
  const sortedScores = [...scores];
  
  // Sort in descending order
  sortedScores.sort((a, b) => b - a);
  
  return sortedScores;
}
Original scores: [50, 60, 65, 75, 80, 68, 70, 85] Click the button to sort in descending order

24.5 Sorting Complex Data

We can sort arrays of objects based on specific properties:

Example 24.4: Sorting Students by Score

This example sorts an array of student objects by their scores:

function sortStudentsByScore() {
  const students = [
    { name: "Alex", score: 50 },
    { name: "Brian", score: 60 },
    { name: "Carmen", score: 65 },
    { name: "Dave", score: 75 },
    { name: "Graham", score: 80 },
    { name: "Keynes", score: 68 },
    { name: "Morgan", score: 70 },
    { name: "Olson", score: 85 }
  ];
  
  // Create a copy to avoid modifying original
  const sortedStudents = [...students];
  
  // Sort by score property
  sortedStudents.sort((a, b) => a.score - b.score);
  
  return sortedStudents;
}
Click the button to sort students by their scores
Pro Tip: Always create a copy of your array before sorting if you need to preserve the original order. The sort() method modifies the original array.

24.6 Common Sorting Mistakes

Avoid these common mistakes when sorting arrays:

Example 24.5: Incorrect Number Sorting

This example shows what happens when you sort numbers without a comparator:

function incorrectSort() {
  const numbers = [10, 5, 100, 2, 1000];
  
  // Create a copy to avoid modifying original
  const sortedNumbers = [...numbers];
  
  // Sort without comparator (incorrect for numbers)
  sortedNumbers.sort();
  
  return sortedNumbers;
}
Original: [10, 5, 100, 2, 1000] Click to see incorrect sorting behavior
Without a comparator, numbers are sorted as strings, resulting in lexicographical order: [10, 100, 1000, 2, 5]