【jquery】即時関数について

質問

知識のある方に教えて頂きたく、貴重なスペースをお借りいたします。

$(function(){ })と、即時関数の(function(){})();は
何が異なるのでしょうか。
よくグローバルオブジェクトの汚染を防ぐ為に
即時関数を使用すると記載がありますが、
通常JSを記載する際に使用する、DOM構築後に実行をする記述
$(function(){ })も、結局変数などをVar宣言すれば、
ローカル変数になるので、同じこと(グローバルの汚染を防げる)
ではないかと思うのですが、間違っておりますでしょうか。
それだとすると、即時関数の使い道がわからないのですが、
ご教示頂けますでしょうか。

また、以下の(1)の記述方法だと、
「hoge」はグローバルオブジェクトとなってしまいますが、
(2)だとなりませんよね。
であれば、基本的には(2)のように関数は記載した方が良いのでは
ないのでしょうか。結構(1)の書き方をしている方がいるので。

どなたかご教示いただければ幸いです。
よろしくお願いいたします。

-----------------------
(1)
$(function(){
hoge();
})

function hoge(){
return true;
}

-----------------------

-----------------------
(2)
$(function(){
hoge();

function hoge(){
　return true;
}
})

-----------------------

回答No.2

think49

即時関数は即実行されますが、$(function(){ }) は DOMContentLoaded のタイミングで実行されます。
https://jsfiddle.net/Ld6w3gka/

---
<script>
'use strict';
jQuery(function (jQuery) {
alert('DOMContentLoaded: ' + jQuery('#sample').text()); // "DOMContentLoaded: Hello, World!"
});

(function () {
alert('Immediately: ' + jQuery('#sample').text()); // "Immediately: "
}());
</script>
<p id="sample">Hello, World!</p>
---

両者の結果が同じ状況なら先に発動する即時関数がベターだと思われます。

Re: yukipontaさん

お礼

ご回答いただき、まことにありがとうございます。大変参考になりました。

回答No.1

okwave01234

$(function(){ }) と (function(){})(); の違いは単純にその function の処理が実行されるタイミングです。前者は DOM の構築が完了した後に呼び出され、後者はそのコードが評価されるタイミングで実行されます。グローバルな変数汚染の回避は function(){ } 内で必要な変数や関数を定義することで実現されますので両者とも防げることになります。

質問の後半部分に付いて、その JavaScript 以外で hoge() を使用する予定がないのであれば (外部に後悔する必要がないのであれば)、意図しない名前の衝突によるバグ防止や再利用性を考えてできる限り (2) の書き方をすべきです。

お礼

ご回答いただき、まことにありがとうございます。大変参考になりました。

補足

ご回答いただきありがとうございました。大変助かっております。
2点程お聞きしたい事がございまして、即時関数の使い道がわかりません。
$(function(){ }) 内に記載すれば、即実行されるわけで、用途がわからないです。。
あともう一つは、「コードが評価されるタイミング」とは
どういう事でしょうか。知識不足で大変恐縮ですがご教示いただければ幸いです。よろしくお願いいたします。