---
title: "Guide to Sorting in JavaScript | CoderPad"
description: "Sorting in JavaScript is an operation to keep items in the correct order. There are several ways to sort data types such as integers, strings, and arrays, and this article walks you through these methods."
canonical: "https://coderpad.io/blog/development/guide-to-sorting-in-javascript/"
last_modified: "2026-04-15 16:21:09"
---
[Back to blog](https://coderpad.io/blog/)

# Guide to Sorting in JavaScript

September 23, 2022 9 Minute Read

By Elijah Asaolu

[Development](https://coderpad.io/blog/development/)

Like sorting your laundry? Or cleaning up a Lego spill into neat color-coded piles?

Yeah, me neither.

Because of its repetitive nature, sorting can be a bit of a chore at times. Unfortunately, sorting is as necessary for programming as it is in our daily lives.

Fortunately for us, however, it’s much easier to do as a JavaScript developer than it is in other areas of our lives.

In this guide, we’ll look at:

- How to use JavaScript’s built in`sort`method
- How to sort integer and string arrays
- How to sort object arrays
- How to sort non-ASCII characters
- What Lodash is
  - How to use Lodash’s`sortBy`method
  - How to use Lodash’s`orderBy`method
- A comparison of performance metrics for different sorting mechanisms

## Organize your data using the JavaScript sort method

Sorting is the process of organizing data into meaningful groups so that it can be easily analyzed or processed.

JavaScript, like most other programming languages, includes a built-in sort method with the following syntax:

```
array.sort(compareFunction);Code language: CSS (css)
```

Where the`array`is an array identifier containing the elements we want to sort, and the`compareFunction`is an optional function to enhance our sorting logic further.

If a compare function is not supplied, the array elements are sorted by first converting them to strings, which are then compared and sorted in ascending order.

### How the sort function works

The`.sort()`method uses an algorithm called “in-place” to sort the elements in our array. This type of algorithm does not require extra disk space to sort the items but may require a small, non-constant amount of extra memory space to run. Once the sorting operation is complete, it will return the same array, now sorted, without creating a new array in the process.

Here’s an example of utilizing`sort()`on an array of strings:

```
let states = ["Lagos", "New York", "Toronto", "Beijing", "Amsterdam"];
states.sort();
console.log(states);

// returns: ["Amsterdam", "Beijing", "Lagos", "New York", "Toronto"]Code language: JavaScript (javascript)
```

Here, we can see that our strings are sorted using the [latin alphabet’s](https://en.wikipedia.org/wiki/Latin_alphabet) letter order. This means that “Aardvark” will come before “Zigzag”.

You can also apply`.sort()`to simple integers:

```
let luckyNumbers = [6, 1, 4, 7, 2, 5, 3];
luckyNumbers.sort();
console.log(luckyNumbers);

// returns: [1, 2, 3, 4, 5, 6, 7]Code language: JavaScript (javascript)
```

However, when we try to sort through integers with larger values, our sort function appears to fail:

```
let luckyNumbers = [100, 40, 10, 300, 20, 50, 30];
luckyNumbers.sort();
console.log(luckyNumbers);

// returns: [10, 100, 20, 30, 300, 40, 50]Code language: JavaScript (javascript)
```

So, what is causing this? As previously stated, if a compare function is not provided in the`.sort()`operation, all array elements are sorted by first converting them to strings and then comparing them.

In other words, while our`.sort()`method continues to return an array of integers, we are actually attempting to sort the following array:

```
["100", "40", "10", "300", "20", "50", "30"]Code language: JSON / JSON with Comments (json)
```

And alphabetically, “100” comes before “20”. We can quickly fix this by writing our own custom compare function instead of using JavaScript’s default.

### Use custom logic to sort your data by creating a compare function

The compare function takes two parameters, commonly named`a`and`b`, where`a`is the first element for comparison and`b`is the second. Because`b`is the second value, it is commonly referred to as the comparator. This function then runs during the`.sort()`method and assists it in determining which item in the array should come first in the results.

Furthermore, the compare function must be written in such a way that:

- It returns a negative number if the first comparator should be sorted before the second.
- It returns 0 (zero) if the comparators should be equal or maintain the same order.
- It returns a positive number if the second comparator should be sorted before the first.
`compareFn(a, b)` return value | sort order
> 0 | sort `a` after `b`
< 0 | sort `a` before `b`
=== 0 | keep original order of `a` and `b`
Table Credit: [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description)

To better understand this, imagine we have a three-element array of numbers:

```
let numList = [4, 5, 3];Code language: JavaScript (javascript)
```

And, we’d like to sort it in descending order. We could write a compare function and apply it to our array in the following way:

```
function compare(a, b) {
  return b - a;
}
numList.sort(compare);Code language: JavaScript (javascript)
```

Behind the scenes,`.sort()`will call the`compare`function repeatedly as it runs through the entire array, picking two elements at a time and using the logic in our compare function to determine which item comes before which. For example, let’s look at what happens when we sort the first two numbers in the array:

```
compare(4, 5);
```

According to our compare function, the code above will return`1`(i.e., 5 – 4), which is a positive number. Looking at our comparison table, we must return a positive number if we want the second comparator (or, value) to be sorted before the first, which translates to 5 coming before 4, so we now have [5, 4] stored in memory; it will keep doing this process for each element in the array until the desired result is obtained.

Additionally, while the preceding example used a named compare function, we’re also able to use inline functions instead.

Here’s a simplified implementation example which sorts our previous large integer array in ascending order:

```
let luckyNumbers = [100, 40, 10, 300, 20, 50, 30];
luckyNumbers.sort(function (a, b) {
  return a - b;
});
console.log(luckyNumbers);

// returns: [10, 20, 30, 40, 50, 100, 300]Code language: JavaScript (javascript)
```

And here’s an example of sorting the same array in descending order, but simplified even further by using the [ES6 arrow function](https://www.w3schools.com/js/js_arrow_function.asp):

```
let luckyNumbers = [100, 40, 10, 300, 20, 50, 30];
luckyNumbers.sort((a, b) => b - a);
console.log(luckyNumbers);

// returns: [300, 100, 50, 40, 30, 20, 10]Code language: JavaScript (javascript)
```

While using math in our compare function (eg`b-a`) to determine our comparison value works well with integers, it’s often not viable when working with other data types, such as strings and booleans. Instead, we can include logic (such as adding`if/else`statements) in our compare function. We can then return -1, 1, or 0 based on this logic.

## How to sort different data types

Now that we fully understand how the compare function works, let’s look at some examples to see where it might be helpful.

### How to sort an array of integers and strings

Let’s say that we have a list of strings and integers, like so:

```
[123, "John", "Zuck", 345, "Ben", "Alan", 678, "Mom"];Code language: CSS (css)
```

And we want to sort them such that:

- Numbers come first, sorted numerically
- Strings come second, sorted alphabetically

We could write some custom comparison code, like so, to achieve this effect:

```
let contacts = [123, "John", "Zuck", 345, "Ben", "Alan", 678, "Mom"];

contacts.sort((a, b) => {
  if (typeof a === "number" && typeof b === "number") {
    return a - b;
  }
  if (typeof a === "number") {
    return -1;
  }
  if (typeof b === "number") {
    return 1;
  } else {
    return a > b ? 1 : -1;
  }
});

console.log(contacts);Code language: JavaScript (javascript)
```

The final output of this function on the array would be:

```
[123, 345, 678, "Alan", "Ben", "John", "Mom", "Zuck"]Code language: JSON / JSON with Comments (json)
```

In our compare function, we first define an`if`statement to see if both of our comparators are integers, and then we sort them in ascending order using the previous`a - b`syntax.

We also used two more`if`statements to determine whether the first or only the second comparator is an integer and sorted them accordingly.

Finally, if our comparators are not integers, we used an`else`statement and a ternary operation to sort them by checking which string is greater than the other and returning an integer value for our preferred sort operation.

### Sorting an array of objects

We can also use a compare function to sort an array of objects. Consider the following list of popular JavaScript libraries and their GitHub star count:

```
let jsLibraries = [{
    name: "React",
    star: 194478,
  },
  {
    name: "Vue",
    star: 199199,
  },
  {
    name: "Angular",
    star: 83716,
  },
  {
    name: "Lodash",
    star: 54288,
  },
];Code language: JavaScript (javascript)
```

We can sort it by library name, ascending:

```
jsLibraries.sort((a, b) => {
  if (a.name > b.name) {
    return 1;
  } else {
    return -1;
  }
});

/* returns:
[{ name: 'Angular', star: 83716 },
  { name: 'Lodash', star: 54288 },
  { name: 'React', star: 194478 },
  { name: 'Vue', star: 199199 }
]
*/Code language: JavaScript (javascript)
```

And, because the number of stars is an integer, we can use the previous`b - a`syntax to sort in descending order (i.e., libraries with the most stars come first):

```
jsLibraries.sort((a, b) => {
  return b.star - a.star;
});

/* returns:
[{ name: 'Vue', star: 199199 },
  { name: 'React', star: 194478 },
  { name: 'Angular', star: 83716 },
  { name: 'Lodash', star: 54288 }
]
*/
Code language: JavaScript (javascript)
```

### Sorting non-ASCII characters

So far, our sort function has performed admirably with strings. However, when we attempt to sort an array of strings containing special (non-ASCII) characters, the sort method will not work as expected. Consider the following example:

```
const frenchWords = ["résumé", "premier", "communiqué", "café", "adieu", "éclair"];
frenchWords.sort();
console.log(frenchWords);

// returns: ["adieu", "café", "communiqué", "premier", "résumé", "éclair"]
Code language: JavaScript (javascript)
```

As seen in this example, the word “éclair” was the last in the array, owing to the fact that it begins with a special character. We can easily fix this by including an additional`.localCompare()`method in our sort compare function.

The`.localeCompare()`method allows us to compare the order of two different strings, i.e., which one comes first or if both strings are in the same order. We can apply this method in a custom compare function to sort non-ASCII characters, such as with languages that include accents or special characters.

This also allows for much flexibility because the`.localeCompare()`method will return a negative number if the reference string comes before the other string we’re comparing with, a negative number if it occurs after, and 0 if they are equivalent.

To fix our previous example, we can simply apply the`.localCompare()`method like below:

```
const frenchWords = ["résumé", "premier", "communiqué", "café", "adieu", "éclair"];
frenchWords.sort((a, b) => a.localeCompare(b, "fr"));
console.log(frenchWords);

// returns: ["adieu", "café", "communiqué", "premier", "résumé"]Code language: JavaScript (javascript)
```

In this example, we applied the`.localCompare()`method to compare the first comparator`a`with the second`b`so that the strings will be sorted in order accordingly.

And, as you might have noticed, there is an optional`“fr”`locale added as the second argument to the`.localeCompare()`method so that our strings will be compared by their order in the French language. In addition to the locale, the [.localeCompare()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare#parameters) method also accepts additional parameters such as case sensitivity.

## Use Lodash for advanced sorting logic

Lodash is a JavaScript library that provides utility methods for everyday programming tasks such as array, number, object, string, and other data structure manipulation. One of these utility methods helps in sorting arrays. We’ll see how this works by recreating our previous examples with the`lodash`method.

First, you can install`lodash`via npm with the following command:

```
npm i lodash
```

And once the installation process is complete, you can import the`lodash`core with:

```
const _ = require("lodash");Code language: JavaScript (javascript)
```

### Do simple sorting using Lodash’s _.sortBy()

The Lodash`_.sortBy()`method is similar to the JavaScript native`.sort()`method in that it takes the array to sort as the first parameter and the sort logic (i.e. the compare function) as the second. Unlike`.sort()`, however, the`_.sortBy()`method does not directly modify the original array and instead creates a new copy during its execution.

Furthermore, the`_.sortBy()`method can only be used to sort arrays in ascending order. However, it is more intuitive than the native`.sort()`method in that you can simply pass a sort order or the key(s) you want to sort with (when working with a collection) and avoid writing any sort logic.

Using our previous example, we can use`lodash`to sort an array of integers or strings as follows:

```
let states = ["Lagos", "New York", "Toronto", "Beijing", "Amsterdam"];
console.log(_.sortBy(states));

// returns: ["Amsterdam", "Beijing", "Lagos", "New York", "Toronto"]

/* . . . */

let luckyNumbers = [100, 40, 10, 300, 20, 50, 30];
console.log(_.sortBy(luckyNumbers));

// returns: [10, 20, 30, 40, 50, 100, 300]Code language: JavaScript (javascript)
```

You’ll also notice that we didn’t need to write any sorting logic for large numbers!

Additionally, in the case of our array of objects, where we sorted the top JavaScript libraries example from earlier, we could simply pass our preferred sorting key as follows:

```
// sort by name
console.log(_.sortBy(jsLibraries, "name"));

// sort by star
console.log(_.sortBy(jsLibraries, "star"));Code language: JavaScript (javascript)
```

### How to do complex sorting using Lodash’s _.orderBy()

Unfortunately, the`_.sortBy()`method can only be used to sort arrays in ascending order. However,`lodash`includes an additional`_.orderBy()`method that allows for more flexibility. Its syntax is pretty similar to`_.sortBy()`, except that it accepts an optional third parameter that lets us specify the sort order:

```
const _ = require("lodash");
let jsLibraries = [{
    name: "React",
    star: 194478,
  },
  {
    name: "Vue",
    star: 199199,
  },
  {
    name: "Angular",
    star: 83716,
  },
  {
    name: "Lodash",
    star: 54288,
  },
];

console.log(_.orderBy(jsLibraries, "name", "desc"));

/*
returns:
[{ name: 'Vue', star: 199199 },
  { name: 'React', star: 194478 },
  { name: 'Lodash', star: 54288 },
  { name: 'Angular', star: 83716 }
]
*/Code language: JavaScript (javascript)
```

Additionally, we could specify a different sort order for different object keys in a single sort:

```
const _ = require("lodash");
var users = [{ name: "Alex", age: 48 },
  { name: "Jane", age: 34 },
  { name: "Alex", age: 40 },
  { name: "Jane", age: 36 },
];

console.log(_.orderBy(users, ["name", "age"], ["asc", "desc"]));

/*
returns:
[{ name: 'Alex', age: 48 },
  { name: 'Alex', age: 40 },
  { name: 'Jane', age: 36 },
  { name: 'Jane', age: 34 }
]
*/Code language: JavaScript (javascript)
```

In the example above, we’ve used the`_.orderBy()`method to sort our array by name in ascending order and age in descending order.

## Comparing performance

To compare the performance of the native JavaScript`.sort()`method and the`lodash``_.sortBy()`method, I created a simple benchmark test using our previous top JavaScript libraries array. The results: the native JavaScript method performed significantly better than`lodash`.

[](https://coderpad.io/wp-content/uploads/2022/09/img_6328e905a3213.png) A benchmark of the native comparison function versus the lodash method of sortBy. The lodash method is 81.47% slower. [Benchmark hosted on JSBench.ME](https://jsbench.me/hfl7uxywf1/1)

This is not surprising given that Lodash’s method is loaded from a third-party library rather than being built directly into the JavaScript engine. Its approach also degrades performance because, unlike the native`.sort()`method, it does not directly manipulate the original array but creates a modified copy.

To make the comparison more fair, I performed a second test with the same array, but this time using the spread operator to copy the original array before sorting with the`.sort()`method.

[](https://coderpad.io/wp-content/uploads/2022/09/img_6328e9074da8d.png) The native benchmark now uses the spread operator to create a new array. Lodash is now only 68% slower than native. [Benchmark hosted on JSBench.ME](https://jsbench.me/a5l88vch8c/1)

While the native`.sort()`method remains significantly faster, the slowness of the`lodash _.sortBy()`method has decreased from 81% to 68%.

## Conclusion

This tutorial taught us how to use the`.sort()`method in JavaScript while experimenting with various data structures. We also covered how to do equivalent sorting with the`lodash``_.sortBy()`and`_.orderBy()`methods and finally compared the performance of the two options, with the JS native sort outperforming the latter.

## Subscribe for more CoderPad insights

## Trending Articles

Previous slide Next slide [Development

## What is Prompt Engineering?

Introducing AI tools such as ChatGPT and Bard helps increase the efficiency of tasks such as data generation, code generation and completion, text summarization, etc. How were these AI tools trained to answer almost every question you ask them? The answer, prompt engineering, is discussed in this blog post.

Read the post](https://coderpad.io/blog/development/what-is-prompt-engineering/) [Development

## A Guide To Using React’s useCallback() Hook

Are you looking to optimize your React applications? Have you heard of the useCallback hook? useCallback is a powerful React hook that helps you optimize your application by preventing unnecessary re-renders. In this post, we'll dive into React's useCallback() hook, define referential equality and callback functions and how to tie it all together.

Read the post](https://coderpad.io/blog/development/a-guide-to-using-reacts-usecallback-hook/) [Development

## MySQL vs. PostgreSQL: How Do They Compare?

A database is a convenient tool that allows users to access information, maintain records, and apply commonly used operations, such as insertion, modification, deletion, and data organization. Learn about MySQL vs PostgreSQL, their features, advantages, and disadvantages. Finally, check out which one is the best choice for you.

Read the post](https://coderpad.io/blog/development/mysql-vs-postgresql-how-do-they-compare/) [Development

## PostgreSQL LIKE Operator: A Detailed Guide

When using databases, searching for values that match a given pattern is a familiar necessity. Learn how you can retrieve entries with queries including a particular string using Postgres LIKE operator.

Read the post](https://coderpad.io/blog/development/postgresql-like-operator-a-detailed-guide/) [Development

## How To Use DataProvider In TestNG With Examples

When it comes to testing there are many tools and techniques available. In this post, we'll discuss how to use DataProvider with TestNG.

Read the post](https://coderpad.io/blog/development/how-to-use-dataprovider-in-testng-with-examples/) [Development

## How To Get Up And Running With Django Migrations: A Guide

Django migrations are a way of handling the application of changes to a database schema. By following the steps outlined in this guide, you can easily set up and use migrations in your Django projects.

Read the post](https://coderpad.io/blog/development/how-to-get-up-and-running-with-django-migrations-a-guide/) [Development

## Writing A Parameterized Test In JUnit With Examples

A JUnit parameterized test allows you to decouple data from structure, generating cleaner and more reliable tests. Learn more in this guide.

Read the post](https://coderpad.io/blog/development/writing-a-parameterized-test-in-junit-with-examples/) [Development

## How To Use Assert In JUnit With Examples

The JUnit Assert class is what you use to write unit testing assertions in JUnit. Learn more about it in this guide, full of examples.

Read the post](https://coderpad.io/blog/development/how-to-use-assert-in-junit-with-examples/) [Development

## A Simple Guide To TypeORM: What It Is And How To Use It

Considering current languages have object-oriented programming features, most database management systems are based on the relational model, with tables instead of objects. For these reasons, mapping relational objects is very important in development. In this article, you will learn what TypeORM, one of the main tools used today, is.

Read the post](https://coderpad.io/blog/development/a-simple-guide-to-typeorm-what-it-is-and-how-to-use-it/) [Development

## Using PreparedStatement in JDBC With Examples

In this post, we'll see why and how to work with JDBC and PreparedStatement. We will also learn along with examples using code.

Read the post](https://coderpad.io/blog/development/using-preparedstatement-in-jdbc-with-examples/) [Development

## React vs React Native: The Differences Explained

React and React Native are similar in that they both allow web developers to build applications based on the unique concept of components. But the two frameworks do this in radically different ways. In this post, we cover the key differences between react and react native frameworks, implementation, and which is an appropriate choice.

Read the post](https://coderpad.io/blog/development/react-vs-react-native-the-differences-explained/) [Development

## Logging in Django

The most challenging part of fixing a problem is identifying it. Unfortunately, this statement is exceptionally true when it comes to debugging. Learn how to use the power of logging into your Django applications to improve your debug process in this article.

Read the post](https://coderpad.io/blog/development/logging-in-django/)

## Hire with confidence.

See why engineering teams trust CoderPad to evaluate developers with realistic, AI-ready hiring workflows.

[Request a demo](https://coderpad.io/sales/)