<h2 id="heading-problem">Problem</h2>
The encoding for <code>Ó</code> is way after ASCII characters so it puts <code>Ólafur</code> at the end
<pre><code class="lang-js">['Ólafur', 'A', 'N', 'O', 'P', 'Z'].toSorted()
// [ 'A', 'N', 'O', 'P', 'Z', 'Ólafur' ]
</code></pre>
<h2 id="heading-solution-use-intlcollator">Solution: Use <code>Intl.Collator</code></h2>
<pre><code class="lang-js">const collator = new Intl.Collator("en", { sensitivity: "base" });
['Ólafur', 'A', 'N', 'O', 'P', 'Z'].toSorted((a, b) =&gt; collator.compare(a, b));
// ['A', 'N', 'O', 'Ólafur', 'P', 'Z']
</code></pre>
Learned from the tip today!
<a target="_blank" href="https://bytes.dev/archives/214">https://bytes.dev/archives/214</a>

## Problem

The encoding for `Ó` is way after ASCII characters so it puts `Ólafur` at the end

```js
['Ólafur', 'A', 'N', 'O', 'P', 'Z'].toSorted()
// [ 'A', 'N', 'O', 'P', 'Z', 'Ólafur' ]
```

## Solution: Use `Intl.Collator`

```js
const collator = new Intl.Collator("en", { sensitivity: "base" });
['Ólafur', 'A', 'N', 'O', 'P', 'Z'].toSorted((a, b) => collator.compare(a, b));
// ['A', 'N', 'O', 'Ólafur', 'P', 'Z']
```

Learned from the tip today!

[https://bytes.dev/archives/214](https://bytes.dev/archives/214)

The problem with the default alphabetical sort

I post a ton of #TIL posts at work.
I figured I'd post it here too so that I can reference it later


The problem with the default alphabetical sort

Problem

Solution: Use Intl.Collator

Solution: Use `Intl.Collator`