【JavaScript】NaNをチェックする方法

以前の記事「【jQuery】テーブルの行単位で値変更時に自動入力する方法」に
若干気になる点があったのでその修正点と色々とやっかいなNaNのチェック方法について紹介します。

まずは、修正点についてですがattrだと
手動でチェックを外した後で再度動作してもチェックが入りません。
そこでattrからpropに変更しました。

// 修正前
$('.checkbox').attr('checked', true); 

// 修正後
$('.checkbox').prop('checked', true);
// ※これでチェックを外せる
$('.checkbox').prop('checked', false);

こうすることで手動でチェックを外しても期待通りの動きをしてくれます。

次にNaNについてですが、まずは厄介な理由についてです。
標準関数にNan（Not a Number)かどうかをチェックする
isNaN()という関数が用意されていますが、
ブラウザによっては使えないことがあったり色々と罠があったりします。

// trueが返ってくるパターン
isNaN(NaN);            // true
isNaN("NaN");          // true
isNaN(undefined);      // true

// falseが返ってくるパターン
isNaN(10);             // false
isNaN(' ');            // false
isNaN(null);           // false

// そもそもNaNの型は…
typeof NaN             // number ？(:3_ヽ)_

isNaN()で結果としてfalseが返ってきても
渡した値が必ずしも数値ということではないわけです…
そして数値でないってことはtypeofで型をチェックして
「number」じゃなければ良いと思っても
Nanはnumber型という訳のわからない仕組になっています。

解決する方法としてはNaNの特性を利用することです。

// NaN同士を比較するとfalseが返ってくる
NaN === NaN      //false

// ↑の性質を利用する
function isCheckNaN(num) {
  return num !== num || typeof num !== "number";
}

上記の様に書いてあげればNaNかどうかをチェックできます。
これについてはECMAScript6でNumber.isNaN()という関数で用意されていますが
これもブラウザによって使えなかったりするので自分で定義してあげた方が安心できるかと…

色々と以前のソースを修正したバージョンが以下の通りです。

ややこしい(:3_ヽ)_

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル