Alphabetic Array Sort in JavaScript

1. Array sort()

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

Syntax

array.sort(compareFunction)

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);

Output

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

---

Sorting Numbers in Ascending Order

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

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

console.log(numbers);

Output

[8, 25, 50, 100]

---

Sorting Numbers in Descending Order

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

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

console.log(numbers);

Output

[100, 50, 25, 8]

---

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()

---

Example

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

values.reverse();

console.log(values);

Output

[40, 30, 20, 10]

---

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);

Output

[50, 30, 20, 10]

---

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)

---

Example

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

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

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

Output

[10, 20, 30, 50]

[50, 10, 30, 20]

---

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()

---

Example

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

const reversedValues =
    values.toReversed();

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

Output

[40, 30, 20, 10]

[10, 20, 30, 40]

---

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 }
];

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
);

Output

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

---

Sorting by Number Property (Descending)

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

Output

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

---

Sorting by String Property

For string properties, localeCompare() is commonly used.

Ascending Order (A–Z)

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

Output

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

---

Descending Order (Z–A)

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

Output

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

---

Common Object Sorting Examples

Sort Employees by Salary

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

Sort Products by Price

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

Sort Users by Name

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

---

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