Sort an object array by its property in JavaScript

This post will discuss how to sort an array of objects in JavaScript given an array and a property to sort by.

1. Using a compare function

This is a common technique that works in any version of JavaScript. It involves passing a custom compare function to the sort() function, which defines how to compare two elements in the array. The compare function should return a negative, zero, or positive value, depending on whether the first element is less than, equal to, or greater than the second element. For example, if we have an array of employee objects and we want to sort it by age in ascending order, we can do:

var employees = [

{ name: "Olivia", age: 30 },

{ name: "Jack", age: 20 },

{ name: "Kate", age: 40 }

];

employees.sort(function(a, b) {

// compare two elements by subtracting their salaries

return a.age - b.age;

});

console.log(employees);

Download Run Code

Output:

[
  { name: ‘Jack’, age: 20 },
  { name: ‘Olivia’, age: 30 },
  { name: ‘Kate’, age: 40 }
]

2. Using ES6 arrow function

The arrow function is a newer feature of JavaScript that allows writing concise functions with a shorter syntax. It involves using an arrow (=>) to define a compare function for the sort() function. We can use the same logic as the previous example, but with a simpler syntax. For example, if we want to sort the employees by name in alphabetical order, we can do:

var employees = [

{ name: "Olivia", age: 30 },

{ name: "Jack", age: 20 },

{ name: "Kate", age: 40 }

];

// compare two elements by their locale-specific order

employees.sort((a, b) => a.name.localeCompare(b.name));

console.log(employees);

Download Run Code

Output:

[
  { name: ‘Jack’, age: 20 },
  { name: ‘Olivia’, age: 30 },
  { name: ‘Kate’, age: 40 }
]

3. Using `Intl.Collator` object

This is another newer feature of JavaScript that allows sorting arrays according to the language and locale settings. It involves creating an instance of the Intl.Collator object with the desired options and using its compare function as the compare function for the sort() function. For example, if we want to sort the employees by name in descending order according to the German language rules, we can do:

var employees = [

{ name: "Olivia", age: 30 },

{ name: "Jack", age: 20 },

{ name: "Kate", age: 40 }

];

// create a collator object for German language with base sensitivity

var collator = new Intl.Collator('de', { sensitivity: 'base' });

// use the collator's compare function as the compare function

employees.sort((a, b) => collator.compare(b.name, a.name));

console.log(employees);

Download Run Code

Output:

[
  { name: ‘Kate’, age: 40 },
  { name: ‘Olivia’, age: 30 },
  { name: ‘Jack’, age: 20 }
]

That’s all about sorting arrays of objects in JavaScript.

Sort an object array by its property in JavaScript

1. Using a compare function

2. Using ES6 arrow function

3. Using Intl.Collator object

Share this:

3. Using `Intl.Collator` object