Skip to content

WebDevHubs

  • Home
  • JavaScript
  • Toggle search form

JavaScript Array toSorted() Method

Posted on December 31, 2024December 31, 2024 By Admin No Comments on JavaScript Array toSorted() Method

The Array.toSorted() method is a new addition to JavaScript, introduced in ECMAScript 2023 (ES14). It returns a new array with the elements sorted in the specified order, leaving the original array unchanged.

Syntax

let newArray = arr.toSorted(compareFunction);

Parameters

ParameterDescription
compareFunction(Optional) A function that defines the sort order. If omitted, elements are converted to strings and sorted lexicographically in ascending order.

Return Value

The toSorted() method returns a new array with elements sorted as per the specified order in the compareFunction.

Example 1: Default Lexicographic Sorting

let arr = ['HTML', 'CSS', 'JavaScript', 'jQuery'];
let sortedArr = arr.toSorted();
console.log(sortedArr); // Output: [ 'CSS', 'HTML', 'JavaScript', 'jQuery' ]
console.log(arr);       // Output: [ 'HTML', 'CSS', 'JavaScript', 'jQuery' ]

By default, toSorted() arranges elements lexicographically without modifying the original array.

Example 2: Sorting Numbers

let arr = [10, 1, 25, 3];

let sortedArr = arr.toSorted((a, b) => a - b);
console.log(sortedArr); // Output: [1, 3, 10, 25]
console.log(arr);       // Output: [10, 1, 25, 3]

Using a custom compareFunction, the numbers are sorted in ascending order.

Example 3: Sorting in Descending Order

let arr = [10, 1, 25, 3];

let sortDescending = arr.toSorted((a, b) => b - a);
console.log(sortDescending); // Output: [25, 10, 3, 1]
console.log(arr);            // Output: [10, 1, 25, 3]

The compareFunction is customized to sort numbers in descending order.

Example 4: Sorting an Array of Objects

let users = [
    { name: 'John', age: 25 },
    { name: 'Alice', age: 30 },
    { name: 'Bob', age: 20 }
];

let sortedByAge = users.toSorted((a, b) => a.age - b.age);
console.log(sortedByAge);

/* Output:
 [
   { name: 'Bob', age: 20 },
   { name: 'John', age: 25 },
   { name: 'Alice', age: 30 }
] */
console.log(users);
// Output: Original array remains unchanged

Supported Browsers

BrowserSupport
Chrome110+
Firefox109+
Safari16.4+
Edge110+
Opera96+
Internet ExplorerNot Supported
JavaScript, Web Technologies Tags:JavaScript-Array, JavaScript-Array-Method, JavaScript-Method

Post navigation

Previous Post: JavaScript Array toReversed() Method
Next Post: JavaScript Array toSpliced() Method

More Related Articles

JavaScript Array concat() Method JavaScript
How to Replace an Item in an Array in JavaScript? JavaScript
How to Create Two-Dimensional Array in JavaScript? JavaScript
How Can I Check if an Object is an Array in JavaScript? JavaScript
How to Merge (Flatten) an Array of Arrays in JavaScript? JavaScript
JavaScript Array reduceRight() Method JavaScript

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Archives

  • May 2025
  • March 2025
  • February 2025
  • January 2025
  • December 2024

Categories

  • CSS
  • HTML
  • JavaScript
  • Lodash
  • PHP
  • Python
  • Uncategorized
  • Web Technologies
  • Web Templates

Recent Posts

  • How to Center Text in HTML?
  • Design a Simple HTML Page | First HTML Project
  • Best Way to Initialize an Empty Array in PHP
  • HTML Description Lists
  • HTML Ordered Lists

Recent Comments

No comments to show.

Copyright © 2025 WebDevHubs.

Powered by PressBook Green WordPress theme