即時関数の用途について

Question

質問内容

閲覧いただきありがとうございます。

javascriptの即時関数の用途について質問です。

挙動についてはある程度理解している状態なのですが、いつ使うのか、どのような利点があるのかを理解しきれずにいます。

具体的な場面と共にご教授いただけないでしょうか...?

よろしくお願いします。

把握していること

・スコープを狭めるために使うらしい(有用性を理解しきれず)
・即時関数の書き方
・即時関数の実行されるタイミング

Comments

[think49]

まずは過去ログを確認して理解を深めてから質問することをお勧めします。
https://teratail.com/search?q=%E5%8D%B3%E6%99%82%E9%96%A2%E6%95%B0+%E4%BD%BF%E3%81%84%E6%96%B9+tag%3AJavaScript+is%3Aaccepted+sort%3Asmart

[ouoyoueee]

ありがとうございます。もちろん確認いたしました。
質問の多くが即時関数の挙動についてで、具体的な使用場面について言及されているものが見当たらなかったため、今回質問いたしました。
ご回答いただけたら幸いです。よろしくお願いします。

[BeatStar]

私も今知りましたが https://www.youtube.com/watch?v=1VyEfy03NTg はいかがでしょうか?
上記を見るとC#とかでいうnamespaceみたいな使い方もできるっぽいですね。

[hoshi-takanori]

このへん？
https://dendenblog.xyz/javascript-iife/
http://analogic.jp/immediate-function/
https://qiita.com/katsukii/items/cfe9fd968ba0db603b1e

[BeatStar]

C＋＋とかでいうnamespace的な使い方をするなら https://qiita.com/standard-software/items/82cfad075decd42aba92 のようにするっぽいですね。

Answer 1

• IIFE (即時実行関数式) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

名前空間的な処理

(()=>{
  function func(){
    console.log(1);
  }
  func();
})();
(()=>{
  function func(){
    console.log(2);
  }
  func();
})();

注：ただしこのくらいのことならこれでも良いのですが・・・

{
  function func(){
    console.log(1);
  }
  func();
}
{
  function func(){
    console.log(2);
  }
  func();
}

こんな感じのほうがわかりやすいでしょうか

var a=1,b=1
{
  var a=2;
  b=2;
}
console.log([a,b]);//2,2
var a=1,b=1;
(()=>{
  var a=2;
  b=2;
})();
console.log([a,b]);//1,2

非同期処理の実行

(async()=>{
  let count=0;
  let timerId;
  console.log('start');
  await new Promise(resolve=>timerId=setInterval(()=>{
    if(count>=5) resolve();
    if(count>=10) clearInterval(timerId);
    console.log(count);
    count++;
  },100));
  console.log('end');
})();

ちょっとかわった処理

let count=0;
setInterval(function func(){
  console.log(count++);
  return func;
}(),3000);

Answer 2

即時関数はスコープを狭めるために使われる。

Comments

[KEMONO.PANTSU]

諸先輩型に比べればまだまだJavaScriptへの理解が浅い私です。

Answer 3

諸先輩型に比べればまだまだJavaScriptへの理解が浅い私ですが、知っている限りの具体例をご紹介したいと思います…

具体例①：初学者のコピペWebサイト制作

あまりいい例ではないのですが…

JavaScriptやjQueryが自分でスラスラ書けない初学者さんは、コピペで動きを実装することも多いと思います。
その時問題になってくるのが変数名や関数名被りです。
しかし、即時実行関数を使ってやればスコープで区切ることで、同じ識別子を気にせず使用することができます。

ES5時代

(function () {
  // コピペしてきたコードをこの中に
  var btn = document.getElementById('submit-btn');
  btn.onclick = function() {
    console.log('submit');
  }
})();

(function () {
  // 別のコピペコードをこの中に
  var btn = document.getElementById('button'); // 変数名が被っても安心！
  btn.onclick = function() {
    console.log('button');
  }
})();

ES6時代

{
  // コピペしてきたコードをこの中に
  const btn = document.getElementById('submit-btn');
  btn.addEventListener('click', () => {
    console.log('submit');
  });
}

{
  // 別のコピペコードをこの中に
  const btn = document.getElementById('button'); // 変数名が被っても安心！
  btn.addEventListener('click', () => {
    console.log('button');
  });
}

具体例②：ES5時代のモデュールをわける手法の一つ

ES6そしてNode.jsのおかげでimport / exportが使用できるようになり、気軽にモデュールごとにコードをわけられるようになりました。
それ以前の時代では、即時実行関数によりモデュール分けをすることもあったようです。

例えば家計簿のWebアプリを作成するとします。
コードの内容をおおまかにわけると、３種類に分けれられます。

• 金額を計算したり、登録された情報の保存・変更・削除を管理する役割のコード
• UI（見た目）を操作する役割のコード
• 上記2つともを統合する全体的な役割のコード

これらに分割して即時実行関数でくくってやるとこうなります。

// 情報制御
var budgetController = (function() {
  // なんやかんや処理して

  // 計算とか管理の処理する関数をオブジェクトにいれて戻す
  return {
    addItem: function() {...},
    removeItem: function() {...},
    getTotal: function() {...}
  }
})();

// UI制御
var UIController = (function() {
  // DOM取得してきたり、なんやかんや処理して
  
  // UI操作する関数をオブジェクトにいれて戻す
  return {
    addListItem: function() {...},
    removeListItem: function() {...},
    displayTotal: function() {...}
  }
})();

// 全体の制御
var controller = (function(budgetCtrl, UICtrl) {
  budgetCtrl.addItem(); // budgetControllerの即時実行関数で定義し、戻した関数を使える。
  UICtrl.displayTotal() // UIControllerの即時実行関数で定義し、戻した関数を使える。
})(budgetController, UIController); // 上記2つの即時実行関数から戻された値を引数に渡す

私が知ってるのはこれだけです…。

Comments

[ouoyoueee]

ご回答いただきありがとうございます。具体例を2つも下さって、とてもわかりやすいです。

どちらも「ES5時代」とのご説明があったのですが、現在では他の手段で書けるということでしょうか...?