JavaScript Sort Array of Objects by Property

To sort an array of objects by a property in JavaScript, call sort() with a compare function that looks at that property. For a number property, use list.sort((a, b) => a.price - b.price) for lowest first, or swap a and b for highest first. For a string property, use list.sort((a, b) => a.name.localeCompare(b.name, "en-GB")) so that capital letters, lower-case letters and accents are ordered the way a person expects. For dates, subtract the two dates (or two timestamps). For several properties, chain the comparisons with ||. Remember that sort() changes the original array; if you need to keep it, use toSorted() or sort a copy made with [...list].

That's the whole idea, but the details are where bugs creep in: an array of prices that sorts as 1299, 249, 2499, 99, a list of names where "adam" ends up after "Zara", UK dates in dd/mm/yyyy order that sort by the day of the month, and comparators that look fine but quietly do nothing. Below I go through each case with code I ran in Node 20.19 on 6 October 2026. The output under every example is copied straight from the terminal, not typed by hand.

How sort() and the compare function work

Array.prototype.sort() takes an optional compare function. JavaScript calls it with two items, usually called a and b, and looks only at the sign of the number you return:

Negative: a goes before b.
Positive: a goes after b.
Zero: keep their current order. Since ES2019 sorting is guaranteed to be stable, so equal items stay in the order they were in.

That's why subtraction works so neatly for numbers. If a.price is 99 and b.price is 249, a.price - b.price is negative, so the cheaper item goes first. Here's a small product list with prices stored in pence, which is how I'd store money anyway to avoid floating-point rounding:

// number.mjs: sort an array of objects by a number property
const products = [
  { name: "Notebook", price: 249 },   // prices in pence
  { name: "Gel pen", price: 99 },
  { name: "Backpack", price: 2499 },
  { name: "Calculator", price: 1299 },
];

// Ascending: cheapest first
products.sort((a, b) => a.price - b.price);
console.log("Ascending: ", products.map(p => `${p.name} ${p.price}`).join(", "));

// Descending: most expensive first (swap a and b)
products.sort((a, b) => b.price - a.price);
console.log("Descending:", products.map(p => `${p.name} ${p.price}`).join(", "));

// What happens WITHOUT a compare function
const pence = [249, 99, 2499, 1299];
console.log("No compare fn:", [...pence].sort());
console.log("With a - b:   ", [...pence].sort((a, b) => a - b));

$ node number.mjs
Ascending:  Gel pen 99, Notebook 249, Calculator 1299, Backpack 2499
Descending: Backpack 2499, Calculator 1299, Notebook 249, Gel pen 99
No compare fn: [ 1299, 249, 2499, 99 ]
With a - b:    [ 99, 249, 1299, 2499 ]

The last two lines are the trap that catches almost everyone once. With no compare function, sort() converts every value to a string and compares the strings character by character. As strings, "1299" comes before "249" because "1" comes before "2", so you get 1299, 249, 2499, 99. The array looks sorted at a glance, which is why this bug can survive for weeks. If you're sorting anything numeric, always pass a compare function.

Ascending and descending in one line

You never need a separate "reverse" step. To flip the order, swap the two sides of the subtraction:

Lowest first (ascending): (a, b) => a.price - b.price
Highest first (descending): (a, b) => b.price - a.price

You could also sort ascending and then call reverse(), but that walks the array a second time, and it also reverses the order of items that compare as equal. Swapping a and b keeps equal items in their original order, which matters when you sort by one column after another, as you'll see in the multiple-properties section.

Sort an array of objects by a string property alphabetically

For strings, subtraction doesn't work ("Ben" - "Zara" is NaN), and the < and > operators compare UTF-16 code units, not letters as a person reads them. In code-unit order every capital letter comes before every lower-case letter, and accented letters come after z. The fix is localeCompare(), or an Intl.Collator if you're sorting a lot of items. Here's a class list with mixed case and two accented names:

// strings.mjs: sort an array of objects by a string property alphabetically
const pupils = [
  { name: "zoe" }, { name: "Émile" }, { name: "Aaliyah" },
  { name: "Zara" }, { name: "adam" }, { name: "Ólafur" }, { name: "Ben" },
];
const names = arr => arr.map(p => p.name).join(", ");

// 1. Plain < and > compare UTF-16 code units: capitals first, accents last
const naive = [...pupils].sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
console.log("Code-unit order:  ", names(naive));

// 2. localeCompare with the en-GB locale
const local = [...pupils].sort((a, b) => a.name.localeCompare(b.name, "en-GB"));
console.log("localeCompare:    ", names(local));

// 3. One reusable Intl.Collator (faster for big arrays)
const collator = new Intl.Collator("en-GB", { sensitivity: "base" });
const collated = [...pupils].sort((a, b) => collator.compare(a.name, b.name));
console.log("Intl.Collator:    ", names(collated));

// 4. Z to A: swap the arguments
const zToA = [...pupils].sort((a, b) => b.name.localeCompare(a.name, "en-GB"));
console.log("Z to A:           ", names(zToA));

// 5. Strings that contain numbers
const rooms = [{ room: "Room 10" }, { room: "Room 2" }, { room: "Room 1" }, { room: "Room 21" }];
const plain = [...rooms].sort((a, b) => a.room.localeCompare(b.room, "en-GB"));
const numeric = [...rooms].sort((a, b) =>
  a.room.localeCompare(b.room, "en-GB", { numeric: true }));
console.log("Rooms, default:   ", plain.map(r => r.room).join(", "));
console.log("Rooms, numeric:   ", numeric.map(r => r.room).join(", "));

// sensitivity: "base" treats these as equal (returns 0)
console.log('collator.compare("emile", "Émile") =', collator.compare("emile", "Émile"));

$ node strings.mjs
Code-unit order:   Aaliyah, Ben, Zara, adam, zoe, Émile, Ólafur
localeCompare:     Aaliyah, adam, Ben, Émile, Ólafur, Zara, zoe
Intl.Collator:     Aaliyah, adam, Ben, Émile, Ólafur, Zara, zoe
Z to A:            zoe, Zara, Ólafur, Émile, Ben, adam, Aaliyah
Rooms, default:    Room 1, Room 10, Room 2, Room 21
Rooms, numeric:    Room 1, Room 2, Room 10, Room 21
collator.compare("emile", "Émile") = 0

Look at the first line. With plain < and >, "Zara" lands before "adam", and "Émile" and "Ólafur" are pushed to the very end. That's correct as far as the computer is concerned, but it's wrong for anyone reading the list. Both localeCompare(…, "en-GB") and the collator give the order you'd see in a school register: Aaliyah, adam, Ben, Émile, Ólafur, Zara, zoe.

A few things worth knowing about this example:

Pass the locale. localeCompare(b.name) with no locale uses whatever language the browser or server is set to. Passing "en-GB" makes the result the same for every visitor. For English text the result is usually identical to "en-US", but being explicit costs nothing and avoids surprises on a server set to another language.
Case-insensitive sorting. localeCompare already puts "adam" next to "Aaliyah" rather than after "Zara". If you also want "emile" and "Émile" to count as equal, use sensitivity: "base", which ignores case and accents. The last line of output shows the collator returning 0 for that pair.
Strings with numbers in them. "Room 10" sorts before "Room 2" by default, because the comparison happens character by character and "1" comes before "2". Adding { numeric: true } makes the collator read runs of digits as numbers, so you get Room 1, Room 2, Room 10, Room 21. This is the option you want for file names, version labels, house numbers and module codes.
Z to A. Same trick as numbers: swap a and b.

localeCompare or Intl.Collator?

They give the same results, because in modern engines localeCompare uses Intl.Collator under the hood. The difference is speed. Each call to localeCompare with a locale or options may set up the comparison rules again, while a collator you create once can be reused for every comparison in the sort. MDN's Array.prototype.sort() reference recommends Intl.Collator for large arrays for this reason. My rule of thumb: localeCompare for a few dozen items in a one-off sort, a shared collator for anything that runs on every keystroke, such as a sortable table with a search box. If that table filters as you type, pair it with a debounce function so you're not re-sorting on every single key press.

Sort an array of objects by date

How you sort by date depends on how the date is stored. There are three common cases, and one of them is a trap for anyone building something for a UK audience:

// dates.mjs: sort an array of objects by a date property
const events = [
  { title: "Mock exams",     iso: "2026-11-30", uk: "30/11/2026" },
  { title: "Open evening",   iso: "2026-10-08", uk: "08/10/2026" },
  { title: "Results day",    iso: "2027-08-12", uk: "12/08/2027" },
  { title: "Half term ends", iso: "2026-11-02", uk: "02/11/2026" },
];
const titles = arr => arr.map(e => e.title).join(" | ");

// ISO 8601 strings (YYYY-MM-DD) sort correctly as plain strings
const byIso = [...events].sort((a, b) => a.iso.localeCompare(b.iso));
console.log("ISO strings:       ", titles(byIso));

// UK dd/mm/yyyy strings do NOT: this sorts by day of the month
const wrong = [...events].sort((a, b) => a.uk.localeCompare(b.uk));
console.log("dd/mm/yyyy (wrong):", titles(wrong));

// Parse dd/mm/yyyy into a sortable number first
function ukToTime(str) {
  const [dd, mm, yyyy] = str.split("/").map(Number);
  return Date.UTC(yyyy, mm - 1, dd); // months are 0-based
}
const right = [...events].sort((a, b) => ukToTime(a.uk) - ukToTime(b.uk));
console.log("dd/mm/yyyy parsed: ", titles(right));

// Date objects: subtracting two Dates gives milliseconds
const withDates = events.map(e => ({ ...e, date: new Date(e.iso + "T00:00:00Z") }));
const newestFirst = withDates.sort((a, b) => b.date - a.date);
console.log("Newest first:      ", titles(newestFirst));

$ node dates.mjs
ISO strings:        Open evening | Half term ends | Mock exams | Results day
dd/mm/yyyy (wrong): Half term ends | Open evening | Results day | Mock exams
dd/mm/yyyy parsed:  Open evening | Half term ends | Mock exams | Results day
Newest first:       Results day | Mock exams | Half term ends | Open evening

Here's what the four lines show:

ISO 8601 strings like "2026-10-08" sort correctly as plain strings, because the most significant part (the year) comes first and every part has a fixed width. If you control the data format, store dates this way. It's also what <input type="date"> gives you and what most APIs send.
UK dd/mm/yyyy strings do not sort correctly as strings. The comparison starts with the day, so "02/11/2026" (half term) comes before "08/10/2026" (open evening) even though it's almost a month later. The output shows the events completely out of order, with Results Day in 2027 ahead of the mock exams in 2026.
The fix is to turn each dd/mm/yyyy string into a number before comparing. Date.UTC(yyyy, mm - 1, dd) returns milliseconds since 1970. Note the mm - 1: JavaScript months run from 0 to 11. I used Date.UTC rather than new Date(yyyy, mm - 1, dd) so the result doesn't depend on the computer's time zone, which avoids odd results around the clocks changing in March and October.
Date objects can be subtracted directly. b.date - a.date converts both to milliseconds, so it gives newest first; a.date - b.date gives oldest first.

If you're displaying these dates after sorting, format them for UK readers at the very end rather than storing them formatted. I used the same "keep a sortable value, format for display" approach when I wrote about counting working days with UK bank holidays, where every date is kept as an ISO string until it's shown on screen.

Sorting by date descending (newest first)

This is the most common date sort on real sites: newest blog posts, latest orders, most recent messages. With ISO strings, use b.iso.localeCompare(a.iso). With Date objects or timestamps, use b.date - a.date. Avoid new Date("08/10/2026") to parse UK dates: JavaScript's built-in parser reads that format as month/day in most engines, so it becomes 10 August, not 8 October. Parse the parts yourself, as ukToTime() does above.

Sort an array of objects by multiple properties

Sorting by two or more properties means "sort by the first property, and only if two items are equal there, look at the second". The neat way to write that is to chain comparisons with ||. A comparison that returns 0 is falsy, so || moves on to the next one; any non-zero result is returned straight away.

// multi.mjs: sort an array of objects by multiple properties
const students = [
  { surname: "Khan",   first: "Ayesha", year: 11, score: 72 },
  { surname: "Smith",  first: "Oliver", year: 10, score: 88 },
  { surname: "Khan",   first: "Adam",   year: 10, score: 72 },
  { surname: "Jones",  first: "Amelia", year: 11, score: 91 },
  { surname: "Smith",  first: "Isla",   year: 11, score: 88 },
];
const show = arr => arr.map(s => `${s.first} ${s.surname} (Y${s.year}, ${s.score})`).join("\n  ");

// Surname A to Z, then first name A to Z
const bySurname = [...students].sort((a, b) =>
  a.surname.localeCompare(b.surname, "en-GB") ||
  a.first.localeCompare(b.first, "en-GB"));
console.log("Surname, then first name:\n  " + show(bySurname));

// Score high to low, then surname A to Z for ties
const leaderboard = [...students].sort((a, b) =>
  b.score - a.score || a.surname.localeCompare(b.surname, "en-GB"));
console.log("Score desc, then surname:\n  " + show(leaderboard));

// A reusable helper: sortBy(list, ["year", "-score", "surname"])
const collator = new Intl.Collator("en-GB", { numeric: true, sensitivity: "base" });
function sortBy(list, keys) {
  const rules = keys.map(k => k.startsWith("-") ? [k.slice(1), -1] : [k, 1]);
  return [...list].sort((a, b) => {
    for (const [key, dir] of rules) {
      const x = a[key], y = b[key];
      const diff = typeof x === "number" && typeof y === "number"
        ? x - y
        : collator.compare(String(x), String(y));
      if (diff !== 0) return diff * dir;
    }
    return 0;
  });
}
console.log('sortBy(["year", "-score", "surname"]):\n  ' +
  show(sortBy(students, ["year", "-score", "surname"])));

$ node multi.mjs
Surname, then first name:
  Amelia Jones (Y11, 91)
  Adam Khan (Y10, 72)
  Ayesha Khan (Y11, 72)
  Isla Smith (Y11, 88)
  Oliver Smith (Y10, 88)
Score desc, then surname:
  Amelia Jones (Y11, 91)
  Oliver Smith (Y10, 88)
  Isla Smith (Y11, 88)
  Ayesha Khan (Y11, 72)
  Adam Khan (Y10, 72)
sortBy(["year", "-score", "surname"]):
  Oliver Smith (Y10, 88)
  Adam Khan (Y10, 72)
  Amelia Jones (Y11, 91)
  Isla Smith (Y11, 88)
  Ayesha Khan (Y11, 72)

Three patterns are shown here:

Surname, then first name. The two Khans and the two Smiths are each put in first-name order. This is the order a teacher's register or a staff list uses.
Score high to low, then surname A to Z. This is a leaderboard. Oliver and Isla Smith both scored 88, so the tie-break looks at surname, and they're still tied. Because sort() is stable, they stay in the order they were in the original array (Oliver was listed before Isla). Ayesha and Adam Khan behave the same way. If you want a fully predictable order, add one more tie-breaker, such as first name or an ID.
A reusable sortBy() helper. You pass it a list of property names, and a leading - means descending. It compares numbers with subtraction and everything else with a shared Intl.Collator, so strings with digits sort naturally too. ["year", "-score", "surname"] gives Year 10 before Year 11, and within each year the highest score first.

The helper also copies the array before sorting ([...list].sort(…)), so it never changes the list you pass in. That's a good habit for any function that other code will call, and it's essential in React, where sorting state in place means the component won't re-render. If your data comes from an API, it's usually cleanest to fetch it, store it untouched, and sort a copy for display. My fetch POST JSON example shows that fetch-then-use pattern, and map, filter and reduce covers the other array methods you'll often chain before or after a sort.

Sort by a key chosen at runtime

When the user clicks a column header, you don't know the property name in advance. Use bracket notation: list.toSorted((a, b) => collator.compare(a[key], b[key])), where key is a string such as "surname". To let them click again to reverse the order, keep a direction of 1 or -1 and multiply the comparison result by it, exactly as sortBy() does with dir.

sort() vs toSorted(): sort without mutating the array

sort() sorts the array in place and returns the same array. That surprises people, because most array methods they've learnt, like map and filter, return a new array. If two parts of your code share the array, sorting it in one place changes it everywhere.

// immutable.mjs: sort() changes the original array; toSorted() does not
const original = [{ id: 3 }, { id: 1 }, { id: 2 }];
const ids = arr => arr.map(o => o.id).join(",");

const returned = original.sort((a, b) => a.id - b.id);
console.log("after sort():     original =", ids(original), "| same array?", returned === original);

const fresh = [{ id: 3 }, { id: 1 }, { id: 2 }];
const copy1 = [...fresh].sort((a, b) => a.id - b.id);
const copy2 = fresh.toSorted((a, b) => a.id - b.id);
console.log("after [...].sort: original =", ids(fresh), "| copy =", ids(copy1));
console.log("after toSorted(): original =", ids(fresh), "| copy =", ids(copy2));

// Stable sort: equal items keep their earlier order (guaranteed since ES2019)
const orders = [
  { ref: "A1", status: "shipped" }, { ref: "A2", status: "pending" },
  { ref: "A3", status: "shipped" }, { ref: "A4", status: "pending" },
];
const byStatus = orders.toSorted((a, b) => a.status.localeCompare(b.status));
console.log("stable:", byStatus.map(o => `${o.ref}:${o.status}`).join(" "));
console.log("Node", process.version);

$ node immutable.mjs
after sort():     original = 1,2,3 | same array? true
after [...].sort: original = 3,1,2 | copy = 1,2,3
after toSorted(): original = 3,1,2 | copy = 1,2,3
stable: A2:pending A4:pending A1:shipped A3:shipped
Node v20.19.2

The first line proves the point: after original.sort(…), the original array itself is in a new order, and the return value is the very same array (same array? true). There are two ways to sort without touching the original:

[...list].sort(compare): spread the items into a new array, then sort that. It works everywhere, including old browsers.
list.toSorted(compare): added in ES2023. It returns a new sorted array and leaves the original alone. It works in Node 20 (the version I tested on) and in all current major browsers. If you have to support very old browsers, use the spread version.

Both make a shallow copy. The new array holds the same objects, so if you change copy[0].price, the object in the original array changes too, because it's the same object. That's rarely a problem for sorting, but it's worth knowing.

The last line shows sorting is stable: the two "pending" orders stay in the order A2, A4, and the two "shipped" orders stay as A1, A3. Stability is what makes "sort by status, keeping the newest first within each status" possible: sort by date first, then by status.

Common mistakes when sorting arrays of objects

These are the bugs I see most in student projects and code reviews. Every one of them produces output that looks plausible, which is why they're worth knowing in advance:

// mistakes.mjs: comparators that look right but are not
// 1. Returning a boolean instead of a number
const scores = [5, 1, 4, 2, 3, 9, 7, 8, 6, 10, 12, 11].map(n => ({ n }));
const bool = [...scores].sort((a, b) => a.n > b.n);          // wrong
const num  = [...scores].sort((a, b) => a.n - b.n);          // right
console.log("boolean comparator:", bool.map(o => o.n).join(","));
console.log("number comparator: ", num.map(o => o.n).join(","));

// 2. Missing values: undefined/null end up in odd places
const people = [{ name: "Ravi", age: 31 }, { name: "Mia" }, { name: "Tom", age: 19 }, { name: "Liv", age: null }];
const naive = [...people].sort((a, b) => a.age - b.age);
console.log("naive with gaps:   ", naive.map(p => `${p.name}:${p.age}`).join(" "));

// Fix: push missing values to the end explicitly
const missingLast = (x, y) => (x == null) - (y == null) || (x ?? 0) - (y ?? 0);
const safe = [...people].sort((a, b) => missingLast(a.age, b.age));
console.log("missing last:      ", safe.map(p => `${p.name}:${p.age}`).join(" "));

// 3. Numbers stored as strings
const prices = [{ p: "9.99" }, { p: "10.50" }, { p: "2.00" }];
console.log("string compare:    ", [...prices].sort((a, b) => a.p.localeCompare(b.p)).map(o => o.p).join(", "));
console.log("Number() compare:  ", [...prices].sort((a, b) => Number(a.p) - Number(b.p)).map(o => o.p).join(", "));

$ node mistakes.mjs
boolean comparator: 5,1,4,2,3,9,7,8,6,10,12,11
number comparator:  1,2,3,4,5,6,7,8,9,10,11,12
naive with gaps:    Ravi:31 Mia:undefined Liv:null Tom:19
missing last:       Tom:19 Ravi:31 Mia:undefined Liv:null
string compare:     10.50, 2.00, 9.99
Number() compare:   2.00, 9.99, 10.50

Returning a boolean. (a, b) => a.n > b.n returns true or false, which become 1 or 0. It never returns a negative number, so the sort can't tell "less than" from "equal". In the test the array came back exactly as it went in: 5,1,4,2,3,…. In older browsers this sometimes appeared to work for small arrays, which is how it spread on forums. Always return a number: subtraction for numbers, localeCompare for strings.
Missing values. When some objects have no age, a.age - b.age gives NaN for undefined, while null is treated as 0. The result is a muddle where Mia (no age) and Liv (null) end up between Ravi (31) and Tom (19). Decide where missing values belong and say so in the comparator. The missingLast helper puts them at the end and sorts the rest normally.
Numbers stored as strings. Values from forms, CSV files and some APIs arrive as strings, so "10.50" sorts before "2.00". Convert with Number() in the comparator, or better, convert once when you load the data. If you're reading CSV in the first place, convert the columns as you parse them.
Sorting state in place in a framework. In React, items.sort(…) changes the existing array, so state doesn't look changed and the component may not update. Use toSorted() or a copy.
Parsing UK dates with new Date("dd/mm/yyyy"). As shown above, that format is read as month first. Split the string and build the date yourself.
Creating a new collator inside the compare function. (a, b) => new Intl.Collator("en-GB").compare(…) builds a new collator for every comparison, which can be thousands of times for one sort. Create it once, outside.

If you've just finished a beginner project, such as a habit tracker using localStorage, adding a "sort by streak" or "sort by name" button is a good way to practise all of this. It's small, visible, and it uses numbers and strings.

FAQ

How do I sort an array of objects by property value in JavaScript?

Call sort() with a compare function that reads the property from both objects. For numbers, return a.value - b.value. For strings, return a.value.localeCompare(b.value). The function must return a negative number, zero or a positive number, not true or false.

How do I sort an array of objects alphabetically by name?

Use list.sort((a, b) => a.name.localeCompare(b.name, "en-GB")). Unlike < and >, localeCompare puts lower-case and upper-case names together and puts accented letters such as É next to E instead of after Z. For Z to A, swap a and b.

How do I sort by two properties in JavaScript?

Chain the comparisons with ||: (a, b) => a.surname.localeCompare(b.surname) || a.first.localeCompare(b.first). The second comparison only runs when the first returns 0, meaning the surnames are the same. You can chain as many properties as you need.

Does sort() change the original array?

Yes. sort() sorts in place and returns the same array. To keep the original, use toSorted() (ES2023, supported in Node 20 and current browsers) or sort a copy with [...list].sort(compare). Both make a shallow copy, so the objects inside are still shared.

How do I sort an array of objects by date, newest first?

If the dates are ISO strings like "2026-10-08", use b.date.localeCompare(a.date). If they're Date objects or timestamps, use b.date - a.date. If they're UK dd/mm/yyyy strings, convert each one to a timestamp first, because sorting them as text orders them by the day of the month.

JavaScript Sort Array of Objects by Property (Tested)