行末の「;」の有無のについて

Question

JavaScriptの勉強をしています。

JavaScript、jqueryの行末に「;」(セミコロン)を
付けてはいけない時の判断について教えて下さい。

私の解釈では
JavaScript、jqueryでは行末には「;」(セミコロン)を付ける

例外として行末に「;」(セミコロン)を付けない場合
・条件式のブロック「{}」の行末
・関数のスコープ「{}」の行末

と覚えていました。

ところがjqueryの勉強のために自分用に作成したサンプルのコードで
行末に「;」(セミコロン)を付けたら動作しなくなりました。

確認したところ「;」(セミコロン)なしが正常で、
「;」(セミコロン)有りが間違いのようです。

サンプルのコードの「;」(セミコロン)ついて以下の件について教えて下さい。

1)1番は関数ではないのに「;」(セミコロン)なしでも動作するのはなぜですか？
＝「;」(セミコロン)を付けると、どうして動作しなくなるのですか？

2-A)2番は関数がありますが、関数全体が「()」で囲われています。
こういう場合は「.done(function(data){})」全体を「.done」の関数とみなして
行末の「;」(セミコロン)をなしにするということですか？

2-B)2番は3番と同じ型ですが、3番は行末に「;」(セミコロン)があっても動作します。

型が同じであるのになぜ3番だけ行末に「;」(セミコロン)があっても動作して、
2番は行末に「;」(セミコロン)を付けると動作しなくなるのですか？

3)3番は行末に「;」(セミコロン)があっても、なくても動作します。

3番の行末に「;」(セミコロン)を付けるのは任意ということで、
3番は「;」(セミコロン)付けても、付けなくてもどちらでも良いのでしょうか？

以上です。

すいませんが詳しい方、説明の上手な方JavaScript、jqueryで
どういう時に行末に「;」(セミコロン)を付けると
動作しなくなるのか(＝行末に「;」をつけてはいけないのか)教えて下さい。

よろしくお願いします。

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script>
$(document).ready(function(){
$.ajax({url: 'data.json', dataType: 'json'})  //1_「;」なし

.done(function(){console.log('AA');})  //2_「;」なし
.fail(function(){console.log('BB');});  //3_どちらでもOK
}); 
</script>

何度もすいません。

ここからです。

コメント欄ではマークダウン使えませんので書いた通りには表示されません。

ご自身のコードの整形に使ってください

<script>
$(document).ready(function() {
	$.ajax({
			url: 'dataZ.json',
			dataType: 'json'
		}) //1_「;」なし

	.done(function() {
			console.log('AA')
		}) //2_「;」なし
		.fail(function() {
			console.log('BB');
		}) //3_どちらでもOK
});

</script>

Comments

[m.ts10806]

コードフォーマットかけてみると分かりやすくなりますよ。詰め詰めだと読みにくいし今回の件も見えにくくなります。
コードフォーマット機能のあるエディタか、Web上にあるコードフォーマットサービスを使ってみてください

[ZZ-TOP]

解答ありがとうございます。

[m.ts10806]

回答ではないですよ。
コードに対する確認依頼です。

[ZZ-TOP]

Web上にコードフォーマットサービスという
サービスがあるということを知りませんでした。

今すぐ利用できるようなものなのか調べてみたのですが、
私の知識では今すぐは無理です。

今回は確認依頼にお答えできずにすいませんが
別途、解答を頂いたお二人のアドバイスで質問は解決しました。

なので質問は閉じさせて頂きます。
今回は私の質問に参加して頂きありがとうございます。

※Web上にコードフォーマットサービスについては調べておきます。
※動作確認はブラウザ上で直接確認しました。

[m.ts10806]

検索ワードは「JavaScript　整形」
下記とか。
https://tools.m-bsys.com/development_tooles/jsbeautifier.php

[ZZ-TOP]

何度もすいません。
教えて頂きありがとうございます。
リンク先のサービスを利用したところ以下の通りになりました。

<script>
$(document).ready(function() {
$.ajax({
url: 'dataZ.json',
dataType: 'json'
}) //1_「;」なし

.done(function() {
console.log('AA')
}) //2_「;」なし
.fail(function() {
console.log('BB');
}) //3_どちらでもOK
});

</script>

質問を閉じてしまいましたが、
こんな感じです。

[m.ts10806]

コメント欄ではマークダウン使えませんので書いた通りには表示されません。
ご自身のコードの整形に使ってください

[ZZ-TOP]

何回も教えて頂きありがとうございます。

>コメント欄ではマークダウン使えませんので書いた通りには表示されません。
ご自身のコードの整形に使ってください

というのは、今回のような感じで
コードを表記するということだと思います。

今後、コードフォーマット、自分の質問内でのコードの追加
ともに利用して見やすい形で質問するようにします。

何度も教えて頂きありがとうございます。

[m.ts10806]

あ、自身のというのは質問のコードではなく、お手元のコードのことです。整形サービスのフォーマット結果は自身が組むときにもインデントのつけかたの参考にもなるはずです

[ZZ-TOP]

了解しました(笑)。

Answer 1

本件では、メソッドチェーンの途中にステートメントを終了するセミコロンを入れようとしてエラーになっています。
体系的な学習をし、意味を理解するのが良いです。

Comments

[ZZ-TOP]

解答して頂きありがとうございます。

メソッドチェーンの作り方
https://www.sejuku.net/blog/24962

を今、読みました。

「.done」とか「.fail」の前についている
「.」はそういう意味だったのですね。

行頭から始まるのでなぜ「.」が必要なのか？
クラスでもないのにどうして「.」があるのか？
と思い不思議に感じながらガイドブックの指示通り
使っていました。

「関数（メソッド）を「. (ドット)」で連結させている」
というのは全く気が付きませんでした。

今回は解答して頂きありがとうございます。
機会がありましたら、またお願いいます。

Answer 2

1つの文を複数行にまたがって書いてもいいのをご存じないようですね。
一部の文を除いて、特に継続の印なく次の行に続きを書いてもいいのです。

1 2 3 の3行は、1つの長い文なので、その途中に ; を付けちゃ駄目です。
; は、行の終わりでなく、文の終わりに付けます。

Comments

[ZZ-TOP]

解答して頂きありがとうございます。

>1 2 3 の3行は、1つの長い文なので、その途中に ; を付けちゃ駄目です。
; は、文の終わりに付けます。

1 2 3 の3行はそれぞれ独立したコードだと思っていました。

te2jiさんのコメントとリンク先の記事で
1 2 3 の3行が1つの長い文になっているとわかりました。

1とか2の後ろに「;」を付けてはダメなのは
1、2は途中だからですね。

3だけ「;」を付けても動作するのは、
3のところまでが1つの文になっていて、
3の行末が長い文の行末だから、、、ということですね。

今回は解答して頂きありがとうございます。
機会がありましたら、またお願いします。