Sort an array of objects by property in JavaScript

Need to sort an array of objects based on a text property? JavaScript gives you a few great ways to do it. Let’s look at the main methods with simple examples and the actual output you’ll see.

1. Using Array.prototype.sort() with a Compare Function

The sort() method changes the original array and puts its items in order . For objects, you give it a special function that tells it how to compare two items. This function looks at two objects (let’s call them a and b) and decides which one should come first.

• If the function returns a number less than 0, a comes before b.
• If it returns 0, a and b are considered equal in order.
• If it returns a number greater than 0, b comes before a.

Here’s how you sort a list of people by their name:

// Our list of people
const people = [
  { name: 'John', age: 25 },
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 20 }
];

// Sort them by name using the compare function
people.sort((personA, personB) => {
  if (personA.name < personB.name) {
    return -1; // Put personA first
  }
  if (personA.name > personB.name) {
    return 1; // Put personB first
  }
  return 0; // Order doesn't change
});

// Look at the sorted list
console.log(people);

Output:

[
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 20 },
  { name: 'John', age: 25 }
]

2. Using sort() with localeCompare() (Recommended)

The localeCompare() method is built for comparing strings properly. It handles uppercase/lowercase, special characters, and different languages better than simple < or > checks . This makes it the preferred way for sorting strings.

// Our list of people (reset to original order)
const people2 = [
  { name: 'John', age: 25 },
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 20 }
];

// Sort them by name using localeCompare
people2.sort((personA, personB) => {
  return personA.name.localeCompare(personB.name);
  // Shorter version: personA.name.localeCompare(personB.name)
});

// Look at the sorted list
console.log(people2);

Output:

[
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 20 },
  { name: 'John', age: 25 }
]

3. Super Short Version with Arrow Functions

You can make the localeCompare version even shorter using arrow functions, which are great for simple operations .

// Our list of people (reset again)
const people3 = [
  { name: 'John', age: 25 },
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 20 }
];

// Sort with a very concise arrow function
people3.sort((a, b) => a.name.localeCompare(b.name));

// Look at the sorted list
console.log(people3);

Output:

[
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 20 },
  { name: 'John', age: 25 }
]

4. Using Lodash (If You Have It)

If your project uses the Lodash library, it offers a very simple _.sortBy() function . This doesn’t change the original array; instead, it creates a new sorted one.

First, make sure you have Lodash installed (npm install lodash). Then you can use it like this:

// Import Lodash (if using modules)
// import _ from 'lodash';
// Or if using CommonJS (like Node.js)
const _ = require('lodash');

// Our list of people
const people4 = [
  { name: 'John', age: 25 },
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 20 }
];

// Create a new sorted array using Lodash
const sortedPeople = _.sortBy(people4, 'name'); // 'name' is the property to sort by

// Look at the NEW sorted list
console.log(sortedPeople);
// Original list is unchanged
console.log(people4);

Output for sortedPeople:

[
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 20 },
  { name: 'John', age: 25 }
]

Output for original people4 (unchanged):

[
  { name: 'John', age: 25 },
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 20 }
]

Summary

In summary, for basic sorting by a string property, array.sort((a, b) => a.property.localeCompare(b.property)) is usually the best pure JavaScript approach. Use Lodash’s _.sortBy if it’s already part of your project for its simplicity.