Alphabetic Array Sort in JavaScript

1. Array sort()

The sort() method sorts the elements of an array.

Syntax

array.sort(compareFunction)

Enter fullscreen mode Exit fullscreen mode

The compareFunction determines the sorting order.

Sorting Strings

When no compare function is provided, JavaScript sorts values alphabetically (lexicographically).

const fruits = ["Banana", "Apple", "Orange", "Mango"];

fruits.sort();

console.log(fruits);

Enter fullscreen mode Exit fullscreen mode

Output

["Apple", "Banana", "Mango", "Orange"]

Enter fullscreen mode Exit fullscreen mode

Sorting Numbers in Ascending Order

const numbers = [100, 25, 8, 50];

numbers.sort((a, b) => a - b);

console.log(numbers);

Enter fullscreen mode Exit fullscreen mode

Output

[8, 25, 50, 100]

Enter fullscreen mode Exit fullscreen mode

Sorting Numbers in Descending Order

const numbers = [100, 25, 8, 50];

numbers.sort((a, b) => b - a);

console.log(numbers);

Enter fullscreen mode Exit fullscreen mode

Output

[100, 50, 25, 8]

Enter fullscreen mode Exit fullscreen mode

Important Characteristics

• Modifies the original array.
• Returns the same array after sorting.
• Supports custom sorting through a compare function.
• Can sort numbers, strings, dates, and objects.

2. Array reverse()

The reverse() method reverses the order of elements in an array.

Syntax

array.reverse()

Enter fullscreen mode Exit fullscreen mode

Example

const values = [10, 20, 30, 40];

values.reverse();

console.log(values);

Enter fullscreen mode Exit fullscreen mode

Output

[40, 30, 20, 10]

Enter fullscreen mode Exit fullscreen mode

Important Characteristics

• Modifies the original array.
• Returns the same reversed array.
• Does not create a new array.
• Useful for displaying data in reverse order.

Combining sort() and reverse()

const numbers = [50, 10, 30, 20];

numbers.sort((a, b) => a - b);
numbers.reverse();

console.log(numbers);

Enter fullscreen mode Exit fullscreen mode

Output

[50, 30, 20, 10]

Enter fullscreen mode Exit fullscreen mode

3. Array toSorted()

toSorted() is a modern array method introduced in ES2023.

It creates a sorted copy of the array without changing the original array.

Syntax

array.toSorted(compareFunction)

Enter fullscreen mode Exit fullscreen mode

Example

const numbers = [50, 10, 30, 20];

const sortedNumbers =
    numbers.toSorted((a, b) => a - b);

console.log(sortedNumbers);
console.log(numbers);

Enter fullscreen mode Exit fullscreen mode

Output

[10, 20, 30, 50]

[50, 10, 30, 20]

Enter fullscreen mode Exit fullscreen mode

Important Characteristics

• Does not modify the original array.
• Returns a new sorted array.
• Useful when immutability is required.
• Commonly used in React and modern JavaScript applications.

sort() vs toSorted()

Feature sort() toSorted() Modifies Original Array Yes No Returns Same Array Yes No Returns New Array No Yes

4. Array toReversed()

toReversed() is another ES2023 method.

It creates a reversed copy of the array while preserving the original array.

Syntax

array.toReversed()

Enter fullscreen mode Exit fullscreen mode

Example

const values = [10, 20, 30, 40];

const reversedValues =
    values.toReversed();

console.log(reversedValues);
console.log(values);

Enter fullscreen mode Exit fullscreen mode

Output

[40, 30, 20, 10]

[10, 20, 30, 40]

Enter fullscreen mode Exit fullscreen mode

Important Characteristics

• Does not modify the original array.
• Returns a new reversed array.
• Ideal when original data must remain unchanged.

reverse() vs toReversed()

Feature reverse() toReversed() Modifies Original Array Yes No Returns Same Array Yes No Returns New Array No Yes

5. Sorting Object Arrays

In real-world applications, arrays often contain objects rather than simple values.

Example:

const students = [
    { name: "Saravanan", year: 12 },
    { name: "Raj", year: 20 },
    { name: "Priya", year: 5 }
];

Enter fullscreen mode Exit fullscreen mode

Object arrays are sorted using a compare function that specifies which property should be used for comparison.

Sorting by Number Property (Ascending)

students.sort(
    (a, b) => a.year - b.year
);

Enter fullscreen mode Exit fullscreen mode

Output

[
  { name: "Priya", year: 5 },
  { name: "Saravanan", year: 12 },
  { name: "Raj", year: 20 }
]

Enter fullscreen mode Exit fullscreen mode

Sorting by Number Property (Descending)

students.sort(
    (a, b) => b.year - a.year
);

Enter fullscreen mode Exit fullscreen mode

Output

[
  { name: "Raj", year: 20 },
  { name: "Saravanan", year: 12 },
  { name: "Priya", year: 5 }
]

Enter fullscreen mode Exit fullscreen mode

Sorting by String Property

For string properties, localeCompare() is commonly used.

Ascending Order (A–Z)

students.sort(
    (a, b) =>
        a.name.localeCompare(b.name)
);

Enter fullscreen mode Exit fullscreen mode

Output

[
  { name: "Priya", year: 5 },
  { name: "Raj", year: 20 },
  { name: "Saravanan", year: 12 }
]

Enter fullscreen mode Exit fullscreen mode

Descending Order (Z–A)

students.sort(
    (a, b) =>
        b.name.localeCompare(a.name)
);

Enter fullscreen mode Exit fullscreen mode

Output

[
  { name: "Saravanan", year: 12 },
  { name: "Raj", year: 20 },
  { name: "Priya", year: 5 }
]

Enter fullscreen mode Exit fullscreen mode

Common Object Sorting Examples

Sort Employees by Salary

employees.sort(
    (a, b) => a.salary - b.salary
);

Enter fullscreen mode Exit fullscreen mode

Sort Products by Price

products.sort(
    (a, b) => a.price - b.price
);

Enter fullscreen mode Exit fullscreen mode

Sort Users by Name

users.sort(
    (a, b) =>
        a.name.localeCompare(b.name)
);

Enter fullscreen mode Exit fullscreen mode

References:
https://www.w3schools.com/js/js_array_sort.asp
https://www.geeksforgeeks.org/javascript/javascript-array-methods/