JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】isNaN(null)がfalseを返す理由をわかりやすく解説

JavaScriptのisNaN()メソッドは、引数として渡された値がNaN（Not-a-Number：非数）かどうか、つまり無効な数値や未定義の数値が存在するかどうかをチェックするために使われる組み込み関数です。

isNaN()の基本的な動作

isNaN()は、引数をまず数値へ暗黙的に変換してから評価を行うという特徴があります。そのため、文字列やnullなどもいったん数値に変換された上で判定される点に注意が必要です。

実行例：日付が有効かどうかを判定する

JavaScriptでDateオブジェクトが有効な日付かどうかを確認したい場合は、以下のようなコードを実行します。

<!DOCTYPE html>
<html>
   <body>
      <script>
         var date1, date2;

         date1 = new Date("2018/1/1");

         if( ! isNaN ( date1.getMonth() )) {
            document.write("Valid date1: "+date1);
         } else {
            document.write("<br>Invalid date1");
         }

         date2 = new Date("20181/1");

         if( ! isNaN ( date2.getMonth() )) {
            document.write("<br> Valid date2: "+date2);
         } else {
            document.write("<br>Invalid date2");
         }
      </script>
   </body>
</html>

この例では、正しい形式の日付「2018/1/1」は有効と判定され、不正な形式の「20181/1」はgetMonth()がNaNを返すため無効と判定されます。

なぜisNaN(null) == falseになるのか？

isNaN(null) == falseとなるのは、意味的にも技術的にも正しい結果だからです。

まず大前提として、nullはNaNではありません。さらに技術的な観点で見ると、isNaN()は引数を数値に変換してから判定を行いますが、nullをNumber()で変換すると「0」になります。「0」は立派な数値でありNaNではないため、isNaN(null)はfalseを返すのです。

より厳密に判定したい場合はNumber.isNaN()

暗黙の型変換を伴わず、厳密にNaNだけを判定したい場合は、ES6（ECMAScript 2015）で導入されたNumber.isNaN()を使うのがおすすめです。

console.log(isNaN(null));      // false（nullは0に変換される）
console.log(Number.isNaN(null)); // false（NaNではない）
console.log(isNaN('abc'));     // true（変換できないためNaNになる）
console.log(Number.isNaN('abc')); // false（NaNそのものではない）
console.log(Number.isNaN(NaN));  // true

このように、isNaN()とNumber.isNaN()の挙動の違いを理解しておくことで、意図しない型変換によるバグを防ぎ、より安全なコードを書くことができます。

  1. JavaScriptにおけるpreventDefault()とreturn falseの違いを徹底解説

    preventDefault()とreturn falseの基本的な違いpreventDefault()は、イベントが発生した際にブラウザのデフォルト動作をキャンセルするメソッドです。例えば、リンクをクリックしたときのページ遷移を防ぎたい場合などに使用します。ただし、イベント自体の伝播（バブリング）は止められず、後続の処理も通常どおり実行されます。一方、return falseは、インラインのイベントハンドラやjQueryなどの環境で使われた場合、デフォルト動作を停止するだけでなく、イベントの伝播も阻止します。また、関数内でreturn falseに到達した時点でそれ以降の処理は実行されず、即

  2. JavaScriptでfalsy値（偽と評価される値）を見分ける方法

    JavaScriptにおけるfalsy値とはJavaScriptでは、値をBoolean型として評価したときに「false」とみなされる値がいくつか存在します。これらは「falsy値（偽の値）」と呼ばれます。条件分岐や論理演算において、意図しない動作を防ぐために、どの値がfalseと評価されるかを正しく理解しておくことが重要です。JavaScriptでfalseと評価される主な値は以下の通りです。false — Boolean型のfalseそのもの0 — 数値のゼロ空文字列：、、または ``（テンプレートリテラル）null — 値が存在しないことを示す特殊な値undefined — 値が未定義