javascript関数宣言にセミコロンをつけてもよいの?

このQ&Aのポイント
  • javascriptの関数宣言について質問です。関数宣言にはセミコロンをつけてもよいのでしょうか?
  • 関数宣言と名前付き関数、無名関数の違いについても説明します。
  • 別の本では関数宣言にセミコロンが記述されている場合もあることが分かりました。
回答を見る
  • ベストアンサー

javascript関数宣言に;をつけてもよいの?

javascriptの関数宣言について。 あるjavascriptの本に関数宣言と名前付き関数、無名関数についてかいてありました。 これらの違いは最後が;でおわっているかどうかとかいてありました。 関数宣言では;はつけない。 つまり、 function foo() { //関数本体の記述 } なので;はいらず、名前付き関数と無名関数は;は必要というのはわかります。 が、別の本では、 function test() { var el = document.getElementById('mydiv'), ch = el.childNodes, len = ch.length, name = ''; for ( var count = 0; count < len; count++) { name = ch[conun].nodeName; } return name; }; と、セミコロンが最後に記述されていました。 いままで、関数宣言にはセミコロンをつけずにかいていたので、 関数宣言にセミコロンが記述されていておどろきました。 ながくなりましたが、関数宣言には、セミコロンはつけてもよいのでしょうか?

質問者が選んだベストアンサー

  • ベストアンサー
  • notnot
  • ベストアンサー率47% (4848/10262)
回答No.1

>あるjavascriptの本に関数宣言と名前付き関数、無名関数についてかいてありました。 >これらの違いは最後が;でおわっているかどうかとかいてありました。 理由と結果が逆で、間違ってますね。 セミコロンは関数式の後ろには必須(なケースがある)ですが, 関数宣言の後ろは(常に)省略可能です。 セミコロンの有無で何かを判断するのは話が逆。 関数式の後ろでも次の行の内容によってはセミコロンは省略可能です。 var a=function(){ return 1 } var b=123 は、OKです。 var a=function(){ return 1 } (function(){return 2})() はNGです。この場合、2行目末にセミコロン必須。無いと2行目と3行目がつながって var a=((function(){ return 1 })(function(){return 2}))() と書いたのと同じになって、文法的には正しく、関数呼び出し後、 var a=1() となり、実行時エラー。 var a=function(){ return function(){return 99} } (function(){return 2})() だとこの文ではエラーにならないのでさらにやっかい。 ここまでややこしくなくても、 var x var a=function(){ return 1 } (x=123) でもNG。括弧がだめです。 ということで、関数式で文が終わる場合は、必ずセミコロンを付けた方が良いです。 そもそも関数式が式の途中、例えば他の関数の引数になっている場合等は、当然ですがセミコロンは付けませんよね。 foo( function(){return 1;} ); とか。これを以てしてもその本の間違いは明らか。 なお、言うまでも無いですが「次の行の内容によっては行末のセミコロン省略可」は関数式で終わる文・式に限らずどんな文・式もです。 普通は文末・式末には付けておいた方が良いでしょうけど。 もちろん、「関数宣言だけつけず、それ以外の文・式は全部付ける」という方針でもいいと思いますが、「 } のあとは必ず付ける」も機械的ルールでわかりやすい。

kazutani
質問者

お礼

そうなんですか! わかりました! 納得です! ありがとうございます!!

関連するQ&A

  • JavaScriptで関数設定時に引数を指定したい

    状況を説明します ・複数のthにoncklickイベントで同じ関数を呼びたい ・th要素のタグにonclick属性を書くのは同じ記述をたくさん書くことになるのでやりたくない ・JavaScriptでonclick属性に関数を設定したい ・th要素自身を引数としたい ※WindowsXPのIE8で動けばOKです。 (0)ベタ書きするとこんな感じになります。これなら動くことを確認しています。 # <th onclick="func1(this)">… # <th onclick="func1(this)">… # <th onclick="func1(this)">… # <th onclick="func1(this)">… # # function func1(th) { #   … # } (1)引数がなければこんな感じになると思います # var ths = $("head").childNodes; # for (var i = 0; i < ths.length; i++) { #   ths[i].onclick = func1; # } (2)無名関数ならこんな感じになると思います # var ths = $("head").childNodes; # for (var i = 0; i < ths.length; i++) { #   ths[i].onclick = function() { #     … #   } # } しかしこの2つの書き方「(1)(2)」とも、引数を入れようとしたところ どうすればいいかわかりませんでした。 上記の状況を踏まえ… 質問は以下です ・(1)のような書き方で、引数アリの関数を設定する方法 ・(2)のような書き方で、引数アリの関数を無名関数で設定する方法 ・それ以外の代替方法 これを教えてください。 そもそもJavaScriptではできないのであればその旨を教えてください。 よろしくお願いします。

  • 無名関数を使うメリットは何ですか?

    Javascriptに限らず、多くのプログラム言語で無名関数が使えると思います。以下の2つの記述法は、挙動に違いは全くありませんよね? function func() { return "普通の関数です。"; } var func = function() { return "無名関数です。"; } なぜ無名関数を使うのか調べてみたところ、「最近Ajaxが流行ってきてライブラリを使う機会が増えてきた。それらを利用する際、関数の名前が重複して誤作動するのを防げる」という答えを見つけました。しかし試してみたところ var func = function() { return "無名関数1です。"; } var func = function() { return "無名関数2です。"; } alert(func()); のように名前が被った場合、従来と同じで後に書かれた関数が動作します。イベント駆動型関数を無名関数にするメリットは分かります。たとえば window.onload = function() { alert("ウィンドウの読み込みが完了しました。"); } と書けば、他の関数との衝突によってこの関数が動作しないことはありません(ライブラリを使ってwindow.onloadが重複してしまったら別問題ですが)。 結局のところ、無名関数を使うメリットは何なのでしょうか?

  • JavaScriptの変数について

    JavaScriptのソースで解らないところがあり、困っています。 ソースは下記の様なものなのですが、エラーが出ていません。 解らない点は2点有ります。 1. jにfalseを代入している箇所なのですが、セミコロンがないのは何故なのでしょうか? Chromeのデベロッパツール, FireFoxのFirebugで確かめてみたのですが、エラーとなっておらず、alertでfalseと表示されている状態です。 「j = !1」の箇所を即時関数の外に出すと、エラーとなります。 普通変数に代入する式の末尾はセミコロンをつけると思うのですが、 何故なのでしょうか? 2.また、jはvar j等のように変数の宣言をせずに使えているようなのですが、 普通即時関数内で宣言した変数のスコープは関数の外では使えないので、エラーとなると思うのですが、宣言せずに代入に使った変数はグローバル変数と解釈されるのでしょうか? どなたかお答え下さい。 --------------------------------- <script> (function() { j = !1 })(); alert(j); </script>

  • javascript無名関数から変数にアクセス

    お世話になります。 javascript初心者です。 無名関数からグローバル変数にアクセスしたいのですが 外で変数を宣言して、内でvar無しで代入してみたのですがうまくいきません どのようにすれば期待する結果になるのか、お忙しい中恐縮ですが 詳しい方お教えいただけないでしょうか //グローバル変数 var hoge; //dataTransfer処理省略 //html5のFileReader var reader = new FileReader(); reader.readAsDataURL(file); //ロードが完了したら無名関数にてhogeに結果を代入 reader.onloadend = function(e) {  hoge = e.target.result; }; alert(hoge); ■期待する結果 アラートで「結果」が表示される ■実際の結果 アラートで「」(空白)が表示される 無名関数内でalert(e.target.result);するとちゃんと結果が表示されるので FileReaderの処理は成功している模様です。 無名関数からグローバル変数にアクセスする方法を御存知の方 お教えいただけたら幸いです

  • JavaScriptの$は文字以外にも意味がある?

    JavaScriptでは、$は、単なる文字として扱う。というのは調べてわかったのですが、 以下のプログラムの意味がわかりません。 ◆疑問1 「$を変数として宣言している」とすれば、以下のプログラムの始まりは var $ = ~~~ のようになりますよね? ◆疑問2 3行目あたりに出てくる「$.ajax(」のような記述は、変数$の、下の階層のなんらかのオブジェクト?なのかと思いましたが、$が何かのクラスであったり構造像体である旨は、どこにも宣言されていないので、変数ではない何かかのでしょうか?? ◆疑問3 いろんなところに、function()とあるのは、なぜなのですか? 無名関数?とかいうのがあるということはどこかで知りました。 が、 (1)下のプログラムでは、何回もfunction()として、処理を記述していますが、 何の意味があるのでしょうか? function(){  処理内容; }, と書くくらいなら、最初から無名関数としてくくらなくても、良くないですか? むしろ、無駄な文字数が増えるし、しかもわかりにくいように思いますが、この記載にメリットはあるのでしょうか? $(  function(){   $.ajax(    {     url: "doctors/data.xml",     dataType: 'xml',     timeout: 1000,     error: function(){      alert("xmlファイルの読み込みに失敗しました");     },     success: function (data){      $(data).find("item").each(function(){       if($(this).attr("val") == "new"){        $("ul.column").append('value=test');       }      });     }    }   );   $("li.noJavaScript").remove();  } );

    • ベストアンサー
    • AJAX
  • トリッキーなJSの文法(prototype.jsなど)が分かりません

    Ajaxの「prototype」( http://www.prototypejs.org/ )などで 下記のようなfunctionの記述方法をよく見かけます。 ▼Prototype.js(ver1.5.0) 20行目抜粋 ---------------------------------------- var Class = {  create: function() {   return function() {    this.initialize.apply(this, arguments);   }  } } -------------------------------------------- でも、私には高度すぎて以下の点がどうしても読み解けません。  (1)var Class = {~~~~~~} が、何をしているのか分かりません。    配列なら[ ]ですし関数か何かを省略した宣言の記述方法なのでしょうか?  (2)create: が何なのか分かりません。必死で調べたら型を宣言しているような感じでしたが、    見慣れない「:」を使ったプログラムで検討もつきません。 私が知っているfunction宣言はこの2パターンのみしか知りません。 ・一般的なfunction宣言  function test(hikisu){   //処理内容  } ・無名関数でのfunction宣言  var a = function(x) {   //処理内容  } ぜひ教えていただけませんでしょうか。 どうぞよろしくお願いします。

  • 引数なしの関数で疑問です

    とほほのjavascriptで勉強しています。 http://www.tohoho-web.com/js/function.htm#objFunction ここの function goukei() { var ans = 0; for (i = 0; i < goukei.arguments.length; i++) { ans += goukei.arguments[i]; } return(ans); } sum = goukei(1, 2, 3, 4, 5); goukei関数を定義したときの引数は、なしなのに goukei関数を呼び出すとき、goukei(1, 2, 3, 4, 5)と、このように5つも引数を指定しています。 Javaでは、こんな呼び出し方をすれば、コンパイルエラーになりますよね。 javascriptでは、引数なしで関数を宣言しても、呼び出すときに、好きな個数の引数を渡せるのですか? 「javascript 引数 省略」とか、「javascript 引数なし」とかいろいろググッてみたのですが 肝心の、javascriptでは引数なしにして宣言しても、呼び出すとき、好きな個数の引数つけて呼び出しても大丈夫。みたいな、確認したい記述はみつかりませんでした。 javascriptでは、このような書き方もできるということでしょうか。

  • 複数の無名関数を合成したい

    javascriptにおいて、無名関数を合成する方法を知っている方はいらっしゃるでしょうか? var func1 = function(){     alert('func1'); } var func2 = function(){     alert('func2'); } この二つの関数を合成して、 var func3 = function(){     alert('func1');     alert('func2'); } という風に合成したいのです。 jQueryを利用して var func3 = $.extend(func1, $func2); と試しましたが、func3 == func1 となってしまうようです。 また、単純に、var func3 = func1 + func2; では、 func3 = function(){alert('func1');}function(){alert('func2');} と意味を成さないものになってしまいます。

  • 二つの関数を一つにまとめることが出来るでしょうか?

    クリックする対象が同じですが、別々に開発?しましたら二つの関数になってしまいました。 一つにまとめることが出来るでしょうか? http://www.okweb.ne.jp/kotaeru.php3?q=430536 http://www.okweb.ne.jp/kotaeru.php3?qid=456289 を参考にさせていただきました。 <html> <head> <title></title> <script language="JavaScript"> <!-- var fn; var disp_id; var disp_na; var disp_vl; function chk(obj) { disp_id = null; disp_na = null; disp_id = obj.id; disp_na = obj.name; disp_vl = 'Id:' + disp_id + ' Na:' + disp_na; fn="form" + disp_na; document.all(fn).send.value = disp_vl; } //--> </script> </head> <body onClick="unCheck()"> <table border> <td id="20" name="1" onClick="chk(this)">abc </td></table> <form method="POST" name="form1" action=""> <input type="text" size="10" name="send"><br> <input type="submit" value="送信"> </form> </body> </html> <html> <head> <title></title> <script language="JavaScript"> <!-- var flg=0; function Exchange(color1,color2){ if(flg == 2){ var el = event.srcElement; el.bgColor=color2; }else{ var el = event.srcElement; el.bgColor=color1; flg=1; } } function unCheck(){ if (flg == 2){ flg=0; }else{ flg=2; } } //--> </script></head> <body onClick="unCheck()"> <table border> <td id="20" name="1" onClick="Exchange('blue','yellow');">abc </td></table> </body> </html>

  • 関数を呼んだら、その中の関数も自動実行される?

    ・関数の実行タイミングが分からないので教えてください ・下記で、どうして引数が渡るのでしょうか? ・portal関数を呼んだら、gooプロパティに無名関数が格納される(?)と思うのですが、=関数実行になるのでしょうか? ・無名関数だから? var obj = {  portal : function( arg ) {   var goo = function(arg){    console.log(arg);   }(arg);  } } obj.portal("あ"); ・自分的には、portal関数を呼んで変数gooに無名関数を格納(?)した後、明示的にgoo();と呼ぶ必要があると思うのですが… ・下記でTypeErrorエラーになるのは、gooプロパティが2回呼ばれるから? ・明示的に呼んだ2回目は引数が渡らないから? var obj = {  portal : function( arg ) {   var goo = function(arg){    console.log(arg);   }(arg);   goo();  } } obj.portal("あ"); //TypeError: undefined is not a function

専門家に質問してみよう