javascript で<script>を分ける意味

jqueryの基本的なことを教えてください。
jquery（またはjs）を書く際、例えば以下のように、<script>の中に書くのが一般的かと思います。

javascript
1<script>
2$(function() {
3   $("#button1").on('click', function() {
4      alert("Hello!!");
5　　});   
6   $("#button2").on('click', function() {
7      alert("Good Morning!!");
8　　});   
9});
10</script>

これは、以下のようにscriptを分けても同じ動作になると思います。

javascript
1<script>
2$(function() {
3   $("#button1").on('click', function() {
4      alert("Hello!!");
5　　});   
6});
7</script>
8
9<script>
10$(function() {
11   $("#button2").on('click', function() {
12      alert("Good Morning!!");
13　　});   
14});
15</script>

上の書き方と下の書き方で、何か違いはあるでしょうか？
それぞれの<script>の中で宣言した変数のスコープが変わってくるため、
スコープを意識しながら下のように分けて書くのがいいのか、
或いは、できるだけ１つの<script>内で書くのがいいのか、どちらでしょうか？

どうぞよろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

それぞれの<script>の中で宣言した変数のスコープが変わってくるため、

ページに読み込まれるscript要素は（iframe内とか特殊なものを除き）同一スコープです。

HTML
1<script>
2const a = 0;
3</script>
4<script>
5const a = 1; // Uncaught SyntaxError: Identifier 'a' has already been declared
6</script>

（ ↑ 同一スコープであることの確認例。const は再代入による変更はできず、再宣言もできません）

ただスコープを分けるだけならscript要素を分ける必要はありません。

HTML
1<script>
2$(function() {
3   $("#button1").on('click', function() {
4      alert("Hello!!");
5　　});   
6});
7$(function() {
8   $("#button2").on('click', function() {
9      alert("Good Morning!!");
10　　});   
11});
12</script>