JavaScriptでNaN値を常に配列の末尾に並べ替える方法

文字列と数値が混在した配列を扱う際、「通常の数値 → 文字列 → NaN」の順に並べ替えたいケースはよくあります。この記事では、NaN値を常に配列の一番下（末尾）に配置できるソート関数の実装方法を解説します。

課題：NaNの判定は一筋縄ではいかない

一見シンプルな処理に思えますが、いくつか落とし穴があります。まず、typeof NaN は "number" を返すため、!number && !string のような単純な型チェックではNaNを判別できません。

さらに、要素の真偽値（truthy / falsy）だけで判定しようとすると、空文字列 "" や undefined もfalsyであるため、NaNと同じ条件に該当してしまい、正しく区別できません。

NaNを見分ける鍵：「NaN === NaN」は常にfalse

ここで役立つのが、NaN特有の性質です。JavaScriptでは、任意の値 x に対して x === x は常にtrueになります。しかし唯一の例外がNaNで、NaN === NaN は必ずfalseを返します。この自己同値性の崩れを利用すれば、確実にNaNだけを検出できます。

実装例

const arr = [344, 'fd', NaN, '', 5, 'f', 76, NaN, 76, NaN, 87, 89, 'fdf',
23, 'fgg', NaN, 765];

const sorter = (a, b) => {
  if (a !== a) {
    // a が NaN の場合は後ろへ
    return 1;
  } else if (b !== b) {
    // b が NaN の場合は前へ
    return -1;
  }
  // 数値を文字列より先に配置
  return typeof a === 'number' ? -1 : 1;
};

arr.sort(sorter);
console.log(arr);

実行結果

コンソールには次のように出力されます。

[
    765, 23, 89, 87,
    76, 76, 5, 344,
    'fd', '', 'f', 'fdf',
    'fgg', NaN, NaN, NaN,
    NaN
]

コードのポイント

比較関数の中では、まず a !== a が成立した場合（つまり a がNaNの場合）に1を返して後ろへ移動させ、b !== b の場合には -1 を返して前に移動させています。どちらでもない要素については、数値なら -1 を返すことで文字列よりも手前に配置されます。

その結果、配列は「数値 → 文字列（空文字列を含む） → NaN」という意図通りの順序に整列します。なお、ES2019以降の Array.prototype.sort() は安定ソートが保証されているため、同じ種類の要素間では元の並び順も維持される点も覚えておくと便利です。