Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
sort() Method | Advanced Array Operations
course content

Зміст курсу

JavaScript Data Structures

sort() Methodsort() Method

This chapter explores the intricacies of the sort() method, including its syntax, default behaviors, and custom sorting techniques.

sort()

The sort() method modifies the original array, imbuing it with a new arrangement.

Key characteristics to remember:

  • The original array transforms, finding its elements in a new arrangement;
  • The method furnishes a modified array as its return value, allowing for further exploration;
  • By default, the sort() method arranges elements in ascending order.

Default Sorting Behavior

Default sorting unfolds seamlessly for arrays of strings, but numeric arrays might present challenges. Let's navigate through examples to illuminate this behavior:

In this example, the array of numbers is sorted in ascending order, seemingly straightforward. However, nuances emerge in the subsequent illustration:

The sort() method treats elements as strings by default, which can lead to unexpected results. For instance, 19 is sorted before 2, and 25 before 3. The solution lies in customizing the sorting process.

Custom Sort Orders

To tailor sorting to specific needs, a callback function is employed. This function, often called a compare function, dictates the sorting logic. Let's explore custom sorting for both numbers and strings. Basic syntax:

  • a is considered as the first element;
  • b is considered as the second element.

Sort Numbers

In this instance, the compare function dictates ascending and descending orders based on the relationship between elements a and b.

Code Explanation
Line 3:
  • [...numbers]: This creates a shallow copy of the original array using the spread operator. It prevents the original array (numbers) from being modified;
  • .sort((a, b) => a - b): This sorts the copied array in ascending order. The sort method takes a comparison function as an argument, and (a, b) => a - b ensures that elements are arranged in ascending order;
  • The sorted array is stored in the variable ascendingNumbers.
  • Line 6:
  • [...numbers]: Again, this creates a shallow copy of the original array to avoid modifying it;
  • .sort((a, b) => b - a): This time, the comparison function (a, b) => b - a sorts the array in descending order by returning a positive value when b should come before a;
  • The sorted array is stored in the variable descendingNumbers.
  • Sort Strings

    The localeCompare() method facilitates alphabetical sorting, allowing customization for both ascending and descending orders.

    Code Explanation
    Line 3:
  • [...employees]: This creates a shallow copy of the original array using the spread operator to avoid modifying the original array;
  • .sort((a, b) => a.localeCompare(b)): The sort method is used with a comparison function (a, b) => a.localeCompare(b). The localeCompare method is a string comparison method that returns a negative number if a should come before b in alphabetical order, 0 if they are equal, and a positive number if a should come after b;
  • The sorted array is stored in the variable inAlphabetOrder.
  • Line 6:
  • [...employees]: Another copy of the original array is created to avoid modifying it;
  • .sort((a, b) => b.localeCompare(a)): The comparison function is now (a, b) => b.localeCompare(a), which sorts the array in reverse alphabetical order;
  • The sorted array is stored in the variable inReversedOrder.
  • 1. What is a key characteristic of the `sort()` method?
    2. In the default sorting behavior of the `sort()` method, how does it treat elements?
    3. In the example below, what will be the output?

    What is a key characteristic of the sort() method?

    Виберіть правильну відповідь

    In the default sorting behavior of the sort() method, how does it treat elements?

    Виберіть правильну відповідь

    In the example below, what will be the output?

    Виберіть правильну відповідь

    Все було зрозуміло?

    Секція 5. Розділ 7
    course content

    Зміст курсу

    JavaScript Data Structures

    sort() Methodsort() Method

    This chapter explores the intricacies of the sort() method, including its syntax, default behaviors, and custom sorting techniques.

    sort()

    The sort() method modifies the original array, imbuing it with a new arrangement.

    Key characteristics to remember:

    • The original array transforms, finding its elements in a new arrangement;
    • The method furnishes a modified array as its return value, allowing for further exploration;
    • By default, the sort() method arranges elements in ascending order.

    Default Sorting Behavior

    Default sorting unfolds seamlessly for arrays of strings, but numeric arrays might present challenges. Let's navigate through examples to illuminate this behavior:

    In this example, the array of numbers is sorted in ascending order, seemingly straightforward. However, nuances emerge in the subsequent illustration:

    The sort() method treats elements as strings by default, which can lead to unexpected results. For instance, 19 is sorted before 2, and 25 before 3. The solution lies in customizing the sorting process.

    Custom Sort Orders

    To tailor sorting to specific needs, a callback function is employed. This function, often called a compare function, dictates the sorting logic. Let's explore custom sorting for both numbers and strings. Basic syntax:

    • a is considered as the first element;
    • b is considered as the second element.

    Sort Numbers

    In this instance, the compare function dictates ascending and descending orders based on the relationship between elements a and b.

    Code Explanation
    Line 3:
  • [...numbers]: This creates a shallow copy of the original array using the spread operator. It prevents the original array (numbers) from being modified;
  • .sort((a, b) => a - b): This sorts the copied array in ascending order. The sort method takes a comparison function as an argument, and (a, b) => a - b ensures that elements are arranged in ascending order;
  • The sorted array is stored in the variable ascendingNumbers.
  • Line 6:
  • [...numbers]: Again, this creates a shallow copy of the original array to avoid modifying it;
  • .sort((a, b) => b - a): This time, the comparison function (a, b) => b - a sorts the array in descending order by returning a positive value when b should come before a;
  • The sorted array is stored in the variable descendingNumbers.
  • Sort Strings

    The localeCompare() method facilitates alphabetical sorting, allowing customization for both ascending and descending orders.

    Code Explanation
    Line 3:
  • [...employees]: This creates a shallow copy of the original array using the spread operator to avoid modifying the original array;
  • .sort((a, b) => a.localeCompare(b)): The sort method is used with a comparison function (a, b) => a.localeCompare(b). The localeCompare method is a string comparison method that returns a negative number if a should come before b in alphabetical order, 0 if they are equal, and a positive number if a should come after b;
  • The sorted array is stored in the variable inAlphabetOrder.
  • Line 6:
  • [...employees]: Another copy of the original array is created to avoid modifying it;
  • .sort((a, b) => b.localeCompare(a)): The comparison function is now (a, b) => b.localeCompare(a), which sorts the array in reverse alphabetical order;
  • The sorted array is stored in the variable inReversedOrder.
  • 1. What is a key characteristic of the `sort()` method?
    2. In the default sorting behavior of the `sort()` method, how does it treat elements?
    3. In the example below, what will be the output?

    What is a key characteristic of the sort() method?

    Виберіть правильну відповідь

    In the default sorting behavior of the sort() method, how does it treat elements?

    Виберіть правильну відповідь

    In the example below, what will be the output?

    Виберіть правильну відповідь

    Все було зрозуміло?

    Секція 5. Розділ 7
    some-alt