同nameにおける配列オブジェクト

javascript

ここ最近、少し鎮火したので久しぶりに書きます。

ある程度のWeb開発経験者なら必ず経験したことがあるJavaScriptバグだと思いますが
今回、また目にする機会があったので記述します。

<html>
<head>
<script language="JavaScript">
<!--
function allCheck(a) {
	for (i=0; i<a.length; i++) {
		a[i].checked = true;
	}
}
-->
</script>
</head>
<body>
  <form name="f">
    <input name="a" type="checkbox">1<br>
    <input name="a" type="checkbox">2<br>
      :
      :
    <a href="javascript:void(0);" onclick="allCheck(f.a);">AllCheck</a>
  </form>
</body>
<html>

上記の結果としてチェックボックスが1件時には動作せず、0件時にはエラーとなります。
問題点としてはチェックボックスがプログラムで可変な作りとなっているのに
allCheckメソッドのaが配列前提で記述されていることにあります。
JavaScriptの改修例としては下記になります。

function allCheck(a) {
	if (a && a.length) { //2件以上
		for (i=0; i<a.length; i++) {
			a[i].checked = true;
		}
	} else if (a){ //1件
		a.checked = true;
	}
}

改修例では 0件時 a は undefined となり偽、1件時 a.length は undefined となり偽となります。
JavaScriptは同名オブジェクトが存在した場合、自動的にオブジェクト配列になる
という性質を持っています。毎度ながらに改修例のようなコードは不毛に思えるわけですが、
結局、毎回書いているような気がします。
最初のコードだけを見て問題点を即座に見出せない人も意外に多いようですが、
それだけJavaScriptが特異な仕様だということだと思います。