JavaScript++かも日記: 【JavaScript】自動セミコロン挿入とドット演算子など

このページは[ 入門 Ajax ](ソフトバンククリエイティブ )と[ だれでもカンタンJavaScriptサンプル集 ](秀和システム)と
[ だれでもカンタンDynamicHTMLサンプル集 ](秀和システム)などの著者
でAllaboutのJavaScriptガイドとか牛久大仏の足元で草むしりをしながら
暮らしている【高橋登史朗】によるサポートページ兼無駄話ブログです

*このスクリプト動かないよ～、とかの情報は
各「コメント欄」へ書き込んでいただけるとうれしいです。
直せないかもしれないけどf^^;;;

2007年09月27日

【JavaScript】自動セミコロン挿入とドット演算子など

【JavaScript 】

ブックマーク-- Hatena

/ Livedoor

【Movable Type】MT(2x)改造計画のところで、最初、sendRequest内のコールバック関数を下記のような感じで書いていました。

<input   type ="button" 
         value ="click" 
         onclick ="
  sendRequest( function onloaded (oj){

     var htm =oj.responseText.split('\n').join('</td></tr><tr><td>');
     htm = htm.split('\t').join('</td><td>');
     htm = '<table><tr><td>'+htm+'</td></tr></table>';

     document.getElementById('1694').innerHTML=htm;

  } ,'','GET','./junking.php?eno=1680');">

たらだらと。

でも、どうにも、ごちゃごちゃしているので、変数htmの書き方を次のように変えました。

<input   type ="button" 
         value ="click" 
         onclick ="
  sendRequest( function onloaded (oj){

     var htm =''
              +'<table><tr><td>'
              +oj.responseText
              .split('\n').join('</td></tr><tr><td>')
              .split('\t').join('</td><td>')
              +'</td></tr></table>';

     document.getElementById('1694').innerHTML=htm;

  } ,'','GET','./junking.php?eno=1680');">

これは、何が違うかというと、上の変数htmは、代入を3回行い、3行にわけて書いていますが、下のhtmでは、代入は1回です。行数は、6行ありますけど、各行は演算子「+」と「.」で接続されており文末「;」もありませんから、実は1行なのです。

ワープロ的には6行でも、プログラム的には1行、という感じです。

そのうえで、

    1行目 : 変数の宣言と初期化
    2行目 : テーブルヘッダ
    3行目 : responseText
    4行目 : 改行コード(\n)処理
    5行目 : 列セパレータコード(\t)処理
    6行目 : テーブルフッタ

    1行目 :     var htm =''  
    2行目 :              +'<table><tr><td>'
    3行目 :              +oj.responseText
    4行目 :              .split('\n').join('</td></tr><tr><td>')
    5行目 :              .split('\t').join('</td><td>')
    6行目 :              +'</td></tr></table>';

という具合に分類して書くことで少し読みやすくしてみた、というわけです。

JavaScriptには、自動セミコロン挿入 (Automatic Semicolon Insertion)というルールがあって、改行すれば「;」を省略しても、そこで文が終わるというのがほぼ当たり前という精神状態になりやすく(^^;、逆にこんな風に改行したのに文が終わっていないことが特別な気がしてしまったりもします。

自動セミコロン挿入は、あるパターンにあてはまる改行(コード)やトークンの前や後に自動的に「;」が挿入されて文が終了することになってるわけですが、要するに、この「+」や「.」でつないだ複数行は改行があっても「;」が挿入されない、ということです。それを利用して？整理すると多少読みやすくなることもあるかな？というわけです。

もちろん、自分で「+oj.responseText ; 」などと「;」を書いてしまえば、そこで文が終了します。

ちなみに、自動挿入ルールは、たとえば、「continue, break, return, throw トークンの次のトークンの前に改行が出現するとき、セミコロンは continue, break, return, throw トークンの後に自動的に挿入される。」という感じですから、改行があるから必ず文が終わるというわけではないのです。

p.s. replace()などをあまり使わないのは、単に個人的な歴史的趣味です。

【コメント】