JavaScriptで配列内のNaNを検出する方法｜NaN !== NaNの性質とNumber.isNaN()の使い方

真偽値（truthy/falsy）が混在する配列から、元の配列内でNaNに該当する要素のインデックスを抽出する関数の書き方を解説します。

NaN !== NaN という特殊な性質

NaNのデータ型は実は「number」です。NaNはfalsy（偽値）な値ですが、他のどのデータ型や変数にも存在しない特異な性質を持っています。それが「NaN === NaN が false を返す」という点です。このような挙動を示すのはNaNだけです。

この性質をうまく利用すれば、NaNのインデックスを簡単に特定できます。コードは以下のとおりです。

const arr = [7, 1, "123abc", undefined, NaN, 78, NaN, null, "aes", NaN,
'', null, NaN];
const pickNaN = (arr) => {
    return arr.reduce((acc, val, ind) => {
        if(val !== val){
            acc.push(ind);
        };
        return acc;
    }, []);
};
console.log(pickNaN(arr));

ポイントは val !== val という比較条件です。自分自身と等しくない値はNaNだけなので、この条件でNaNを確実に判定できます。

isNaN() と Number.isNaN() を使う方法

isNaN() 関数は、引数として渡された値がNaNであるか、あるいはNaNに型強制（変換）できる場合に true を返します。一方、Number.isNaN() 関数は、渡された値が厳密にNaNである場合にのみ true を返します。

そのため、NaNの判定には isNaN() よりも Number.isNaN() の方が信頼性が高いと言えます。両者の違いは以下のコードで確認できます。

コード例

const arr = [7, 1, "abc", undefined, NaN, 78, NaN, null, "aes", NaN, '',
null, NaN];
const pickNaN = (arr) => {
    return arr.reduce((acc, val, ind) => {
        if(Number.isNaN(val)){
            acc.reliableWay.push(ind);
        };
        if(isNaN(val)){
            acc.unreliableWay.push(ind);
        }
        return acc;
    }, {
        reliableWay: [],
        unreliableWay: []
    });
};
console.log(pickNaN(arr));

このコードは、Number.isNaN() を使った判定結果と isNaN() を使った判定結果を、それぞれ別の配列に格納して比較します。

出力結果

{
    reliableWay: [ 4, 6, 9, 12 ],
    unreliableWay: [ 2, 3, 4, 6, 8, 9, 12]
}

出力を見ると、isNaN() が多くのNaNではない値をNaNとして判定してしまっていることがわかります。これは、isNaN() が値を数値に変換してから判定するためです。例えば文字列 "abc" や undefined は数値に変換できないため、NaNと誤判定されます。

このような誤判定を避けたい場合は、Number.isNaN() を使うのが確実です。実際の開発では、意図しないバグを防ぐためにも Number.isNaN() の利用を推奨します。