JavaScriptの動かないコード (初級編) 関数が返り値を return できないエラー （セミコロンの罠）

連載目次へ

以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分）

やりたい事：

• 現在時刻を表示する。

<input type="button" onclick="f()" value="現在時刻を表示">


<script language="JavaScript">

function f(){
	alert( getNow() );
}


// 現在時刻の文字列を返します。
function getNow(){
	var d = new Date();

	// 1:23:45 のような形式		
	return 
		d.getHours() + 
		":" + 
		d.getMinutes() + 
		":" + 
		d.getSeconds()
	;
}

</script>

答え

IEでもFFでも，「undefined」と表示される。

getNow()の中のコードは，+ を使って変数どうしを文字列として連結している。

連結する要素が多いので，見やすくするつもりで，たくさん改行してある。

それが仇になる。

ECMAスクリプトの仕様書
http://www2u.biglobe.ne.jp/~oz-07ams/...

7.9 自動セミコロン挿入 (Automatic Semicolon Insertion)

「空文 (empty statement),
変数文 (variable statement),
式文 (expression statement),
do-while 文 (do-while statement),
continue 文 (continue statement),
break 文 (break statement),
return 文 (return statement),
throw 文 (throw statement))

はセミコロンで終了しなければならない。
そのようなセミコロンは、ソーステキスト内に常に明示的に出現してよい。

しかしながら、簡単にするために、ある位置ではソーステキストからセミコロンを省略してよい。

この位置は、それらの位置のソースコードトークンのストリームにセミコロンが自動的に挿入されるという言葉で説明される。」

なんと「自動セミコロン挿入」という規則があり，return のあとに改行すると，そこにセミコロンが入って文が終わってしまう。

	return a; 

を，よかれと思って

return
	a;

と書いてはいけないのだ。この場合

return;
	a;

と同じ意味になってしまい，戻り値は何もない。

参考：

JavaScriptは改行で動作が変わる
http://it.kndb.jp/entry/show/id/440

【JavaScript】自動セミコロン挿入とドット演算子など
http://jsgt.org/mt/archives/01/001701...

return の直後だけ気を付ければいいので，例えば

	return  d.getHours() + 
		":" + 
		d.getMinutes() + 
		":" + 
		d.getSeconds()
	;

のように改行を入れるのはOK。

連載目次へ