Sentry Answers>JavaScript>

Sort array of objects by string property value in JavaScript

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:

Click to Copy
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:

Click to Copy
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.

  • ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns
  • SentryJavascript Error Monitoring & Tracing
  • ResourcesJavaScript Frontend Error Monitoring 101
  • Syntax.fmListen to the Syntax Podcast
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,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
© 2024 • Sentry is a registered Trademark of Functional Software, Inc.