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

Contenido del Curso

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?

    Selecciona la respuesta correcta

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

    Selecciona la respuesta correcta

    In the example below, what will be the output?

    Selecciona la respuesta correcta

    ¿Todo estuvo claro?

    Sección 5. Capítulo 7
    course content

    Contenido del Curso

    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?

    Selecciona la respuesta correcta

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

    Selecciona la respuesta correcta

    In the example below, what will be the output?

    Selecciona la respuesta correcta

    ¿Todo estuvo claro?

    Sección 5. Capítulo 7
    some-alt