JavaScript:型を意識していなかったために起きた現象

数値を比較するのか、文字を比較するのか、意識してコーディングするのが基本なのに、基本を怠っていました。

photo credit: Dmitry Baranovskiy via photopin cc

比較が正しく行われない

PHPとJavaScriptで作られたページがあります。
PHPで処理した結果、

<input  type="hidden" id="cnt" value="4">
<input type="hidden" id="max" value="15">

となりました。

ボタンをクリックすると、JavaScriptの関数が動作し、チェックが行われます。
チェックのロジックは、以下のようになっていました。

var cnt = $("cnt").value;
var max = $("max").value;
if (cnt > max) {
    alert("数が" + max + "を超えています");
    return false;
}

このロジックで正しいと思ってテストをすると、alert()が表示されてしまいました。

数値型で比較する

なぜalert()が表示されるんだろうと考えて、どっちも文字列型となっていて、"4"と"1"の比較になっているのではと思い至り、

var cnt = $("cnt").value;
var max = $("max").value;
if (Number(cnt) > Number(max)) {
    alert("数が" + max + "を超えています");
    return false;
}

とNumberを追加したら、想定通りの動作をしました。

今回の現象の原因

チェックのロジックを同一ソースコードから流用していましたが、流用元は比較の片一方が数値型になっていたために、JavaScriptが数値型に自動変換して比較をしていましたが、流用後は文字列型の比較になっていたために発生していました。
流用でそのままロジックを使って変数名を書き替えればいいのではなく、比較が想定通りか確認が必要です。