JavaScript で NaN を安全に判定する方法：Number.isNaN を使うべき理由

JavaScript の Number.isNaN について

NaN とは

NaN は、「Not a Number」の略で、数値ではないことを表す特別な値です。例えば、以下の式はすべて NaN を返します。

"abc" / 1; // 文字列を数値で割る
Math.sqrt(-1); // 負の数の平方根
0 / 0; // 0 で割る

Number.isNaN は、引数として渡された値が NaN かどうかを判定します。

Number.isNaN(NaN); // true
Number.isNaN("abc"); // true
Number.isNaN(123); // false
Number.isNaN(true); // false

Number.isNaN と isNaN の違い

JavaScript には、Number.isNaN 以外にも、isNaN という関数があります。

• isNaN は、グローバルスコープに存在する関数です。
• Number.isNaN は、Number オブジェクトの静的メソッドです。

2つの関数の主な違いは、引数の型変換の有無です。

• isNaN は、引数を数値に変換してから NaN かどうかを判定します。
• Number.isNaN は、引数の型変換を行わずに NaN かどうかを判定します。

例：

isNaN("abc"); // true
Number.isNaN("abc"); // false

isNaN は、abc を数値に変換しようとしますが、変換できないため true を返します。一方、Number.isNaN は、abc の型変換を行わずに NaN かどうかを判定するため、false を返します。

一般的には、Number.isNaN を使うのがおすすめです。

• 理由は、isNaN は型変換を行うため、意図せず型が変換されてしまう可能性があるからです。
• Number.isNaN は、型変換を行わないため、より安全に使用できます。

Number.isNaN の利用例

• 数値入力フォームのバリデーション
• NaN を含む値の処理 *NaN を除外した計算

Number.isNaN を使ったサンプルコード

数値入力フォームのバリデーション

<input type="number" id="number-input">
<button type="button" onclick="validateNumber()">入力内容を確認</button>

<script>
function validateNumber() {
  const inputValue = document.getElementById("number-input").value;

  if (Number.isNaN(inputValue)) {
    alert("数値を入力してください");
  } else {
    alert("入力された数値は " + inputValue + " です");
  }
}
</script>

NaN を含む値の処理

const values = [1, 2, 3, NaN, 5];

const filteredValues = values.filter(value => !Number.isNaN(value));

console.log(filteredValues); // [1, 2, 3, 5]

このコードは、values 配列から NaN を除外した新しい配列を作成しています。

NaN を除外した計算

const sum = (a, b) => {
  if (Number.isNaN(a) || Number.isNaN(b)) {
    return NaN;
  }

  return a + b;
};

console.log(sum(1, 2)); // 3
console.log(sum(1, NaN)); // NaN

このコードは、NaN を含む数値の合計を計算する関数です。

その他

• Number.isNaN を使って、NaN を含む配列の最大値や最小値を求めることができます。
• Number.isNaN を使って、NaN を含むデータセットから外れ値を除外することができます。

Number.isNaN は、JavaScript で数値型 (Number) の値が NaN かどうかを判定する便利な関数です。

さまざまな場面で活用できるので、ぜひ覚えておきましょう。

Number.isNaN 以外の NaN 判定方法

isNaN は、グローバルスコープに存在する関数です。

isNaN(NaN); // true
isNaN("abc"); // true
isNaN(123); // false
isNaN(true); // false

ただし、isNaN は引数を数値に変換してから NaN かどうかを判定するため、意図せず型が変換されてしまう可能性があります。

typeof 演算子は、オペランドの型を返す演算子です。

typeof NaN; // "number"
typeof "abc"; // "string"
typeof 123; // "number"
typeof true; // "boolean"

ただし、typeof 演算子は、NaN 以外も "number" 型と判定するため、NaN と他の数値型を区別できません。

Number.prototype.valueOf メソッドは、数値オブジェクトの値を返します。

NaN.valueOf(); // NaN
"abc".valueOf(); // "abc"
123.valueOf(); // 123
true.valueOf(); // true

ただし、Number.prototype.valueOf メソッドは、NaN 以外のオブジェクトも値を返してしまうため、NaN と他のオブジェクトを区別できません。

比較演算子を使って、NaN と他の値を比較することもできます。

NaN === NaN; // false
NaN == NaN; // true
NaN != NaN; // true
NaN > 1; // false
NaN < 1; // false

ただし、比較演算子を使った NaN 判定は、ブラウザや JavaScript エンジンによって動作が異なる場合があります。

Number.isNaN は、NaN を判定する最も安全で信頼性の高い方法です。

ただし、上記のような他の方法も状況によっては役立つ場合があります。

それぞれの方法のメリットとデメリットを理解した上で、適切な方法を選択することが重要です。

補足

• Number.isNaN は、ES6 で導入された関数です。
• 古いブラウザでは、Number.isNaN が使用できない場合があります。
• その場合は、isNaN 関数などの他の方法を使用する必要があります。