JavaScriptの「卵が先か、ニワトリが先か」問題

卵が先か、ニワトリが先か

少し前ですが、こんなツイートが流れて来ました。

JavaScript的にはニワトリが先のようです！！

このツイートを見て、自分もDevToolsのコンソールで試して見たところ ["🥚","🐣","🐥"]をsortしたところ、

予想：["🐥","🐣","🥚"]
実際：["🐣","🐥","🥚"]

なってしまいひよこが卵の殻に入って、ひよことして自立して、卵になるストーリーになってしまいました。。。

卵が先か、ニワトリが先か、卵からでかけのニワトリが先か
この問題について、なぜこうなるのかを調査していきたいと思います。

sortの処理について

まずsortの処理についてしっかり理解していきます。

sort() メソッドは、配列の要素をIn-placeアルゴリズムでソートし、ソートされた同じ配列の参照を返します。既定のソート順は昇順で、要素を文字列に変換してから、 UTF-16 コード単位の値の並びとして比較します。

なるほど UTF-16コードがポイントな気がしてきました。

コードポイント値

文字列をCode Point(16進数)の配列にして返すconvertCodePoints関数を用意しました。

function convertCodePoints(str) {
    return Array.from(str).map(char => {
        return char.codePointAt(0).toString(16);
    });
}

const str = "🥚🐣🐥";
const codePoints = convertCodePoints(str);
console.log(codePoints); // => ['1f95a', '1f423', '1f425']

🥚 => '1f95a'
🐣 => '1f423'
🐥 => '1f425'

UTF-16にすると以上のような5桁の16進数になります。

これをsortすると以下の様になり、

[ '1f95a', '1f423', '1f425' ].sort()
> ['1f423', '1f425', '1f95a']

["🐣","🐥","🥚"] の順になるということですね。

おまけ

ローストチキンがニワトリ・卵より先

大人男性がおじいさん・赤ちゃんより先

参考