JavaScriptの即時関数とreadyとloadの違いまとめ

たまに新規にJS書くとき、グローバルスコープを汚染したくないので即時関数で囲ってやることが多いんですが、毎回書き方どうだっけ？ってなるのでメモ。

ついでにonready（jQueryでの呼び名）とonloadについても。

実行タイミング

• 即時関数
  • その名の通り即時
• ready
  • DOMツリーの構築が終わったあと
• load
  • DOMツリーの構築が終わって、画像等を読み込み終わったあと

コード

即時関数

毎回忘れる即時関数。ちなみにIIFEと呼ぶらしい。

(function () {
    console.log('test1');
})();

アロー関数を使うとこんな感じ。慣れない。

(() => {
    console.log('test1');
})();

ready

document.addEventListener("DOMContentLoaded", function(event) {
    console.log('test2');
});

road

window.addEventListener("load", function(event) {
    console.log('test3');
  });

下記でもいけるが、複数指定できない（一番最後のやつで上書きされる）ので注意。

window.onload = function(){
    console.log('test3');
}

jQueryによる記述方法

jQueryを使用した書き方もよく見かける。とてもわかりやすいQiitaがあったのでこちらを参照！ https://qiita.com/mimoe/items/74cb3a01a30162759fdd

ちなみにjQueryを使用した即時関数はない。下記のような記述は引数にjQueryを渡しているだけ。

(function($){
    
})(jQuery);