Intl Collator in JavaScript

Recently I needed to sort an array of objects from A to Z. Usually for such task I’m using the following piece of code:

const cities = [{ name: "Wrocław" }, { name: "Kraków" }, { name: "Łódź" }];

cities.sort((city1, city2) => (city1.name > city2.name ? 1 : -1));

Yet I had a problem with this code - the last city Łódź was not in the right place. The proper order should be:

[{ name: "Kraków" }, { name: "Łódź" }, { name: "Wrocław" }];

But code from previous example returned:

[{ name: "Kraków" }, { name: "Wrocław" }, { name: "Łódź" }];

Why is that? Because Łódź is not starting from Unicode character - it is a utf-8 one.

How then can I sort an array with utf-8 characters? In turns out that all major browsers have support for localeCompare.

What it is? I like to think about this method as a way of sorting with utf-8 support. localeCompare allows me to compare two strings with internationalization support. My sorting example now can be changed to:

const cities = [{ name: "Wrocław" }, { name: "Kraków" }, { name: "Łódź" }];

cities.sort((city1, city2) => city1.name.localeCompare(city2.name));
// [{name: 'Kraków'},{name: 'Łódź'},{name: 'Wrocław'}];

There is a lot of configuration options to localeCompate - if you want to know more I recommend visiting mdn.

Summary

In this blog post, I wrote on how to use localeCompare to sort strings that are utf-8.