読者です 読者をやめる 読者になる 読者になる
スポンサーリンク

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

javascript 動かないコード


以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分)


やりたい事:

  • 現在時刻を表示する。

<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。