Answers by Sentry

Sort array of objects by string property value in JavaScript

David Y.

The Problem

Given an array of similar JavaScript objects, how can I sort them by the value of a string property? For example, I would like to sort this array by the lastname property:

const people = [
  { firstname: "John", lastname: "Smith" },
  { firstname: "Jane", lastname: "Doe" },
  { firstname: "Zinedine", lastname: "Zidane" },
  { firstname: "Aaron", lastname: "Aaronovitch" },
];

The Solution

JavaScript’s Array.sort method takes an optional comparison function, which we can define however we like. This function takes two elements, a and b, and should return a negative number if a < b, a positive number if a > b, and zero if they are equal.

We can use this to sort our array as follows:

const people = [
  { firstname: "John", lastname: "Smith" },
  { firstname: "Jane", lastname: "Doe" },
  { firstname: "Zinedine", lastname: "Zidane" },
  { firstname: "Aaron", lastname: "Aaronovitch" },
];

function compare(a, b) {
  const aln = a.lastname.toLowerCase();
  const bln = b.lastname.toLowerCase();

  if (aln < bln) {
    return -1;
  }

  if (aln > bln) {
    return 1;
  }

  return 0;
}

people.sort(compare)

console.log(people)
// will print:
// [
//     { firstname: "Aaron", lastname: "Aaronovitch" },
//     { firstname: "Jane", lastname: "Doe" },
//     { firstname: "John", lastname: "Smith" },
//     { firstname: "Zinedine", lastname: "Zidane" },
// ]

Our comparison works by comparing the first letter of both strings passed to it, according to their position in the character set, for example A < Z. We convert both of the lastname strings to lowercase before comparing them. This is because string comparisons work with the position of characters in character sets, and so lowercase letters will always be sorted after uppercase letters. While this wouldn’t have presented a problem for this data set, it’s worth keeping in mind when sorting strings.

Get Started With Sentry

Get actionable, code-level insights to resolve JavaScript performance bottlenecks and errors.

  1. Create a free Sentry account

  2. Create a JavaScript project and note your DSN

  3. Grab the Sentry JavaScript SDK

<script src="https://browser.sentry-cdn.com/7.112.2/bundle.min.js"></script>
  1. Configure your DSN
Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

learn more about sentryjoin our discord
Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

Try Sentry For FreeRequest a Demo
    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.