【JS】即時関数

2022 12/21

2022.12.21 2022.12.21

即時関数（IIFE）の定義

関数定義と同時一度だけ実行される関数。
即時実行関数とも呼ばれる。

一般的な記述

let result = (function(仮引数){
  return 戻り値;
})(実引数);

解説

関数宣言を()で囲み、実行するときに渡す引数（実引数）を渡す。
実引数は仮引数に渡り、関数スコープの中で仮引数が使用できる。
戻り値はresult（呼び出し元）に格納される。

即時関数の大きな特徴

関数定義時に呼ばれる
呼び出し元に返ってくるのは、関数定義ではなくreturn文に続く戻り値である

実際のコード

function a() {
  console.log('called');
}
a();
// calledが表示される

上記を即時関数へ書き換える。

// function外の()はグループ化をしている
// 一度だけ使用する関数なので、名前を付けずにエラーを回避
(function () {
  console.log('called');
})();

// 関数式の場合は()はいらない
let b = function () {
  console.log('called');
}();

即時関数にreturnが記述されている場合

let c = (function () {
  console.log('called');
  return 0;
})();
console.log(c);
// 0 が表示

引数が定義されている場合

let c = (function (d) {
  console.log('called' + d);
  return 0;
})(10);
console.log(c);
// called 10 が表示

即時関数はどういう場合に使用されるのか

関数スコープを利用し、関数の中でしか使えない変数や関数と、関数の外で使える変数や関数を、明確に区別したいときに使用する。

returnに続くオブジェクトがcに格納されるため、関数の外でも使用できる。

let c = (function () {
  console.log('called');

  let privateVal = 0;
  let publicVal = 10;

  function privateFn() {
    console.log('privateFn is called');
  }
  function publicFn() {
    console.log('publicFn is called');
  }
  return {
    publicVal,
    publicFn,
  };
})();
c.publicFn(); // 外から呼び出せる。publicFn is called が表示される。
console.log(c.publicVal); // 外から呼び出せる。10 が表示される。

c.privateFn(); // 外から呼び出せない。エラーになる。

let c = (function () {
  console.log('called');

  let privateVal = 0;
  let publicVal = 10;

  function privateFn() {
    console.log('privateFn is called');
  }
  function publicFn() {
    console.log('publicFn is called: ' + privateVal++);
    // privateValはレキシカルスコープに定義されていて、即時関数が実行された一度だけ初期化される。
    // それ以降はpublicFnが呼ばれたタイミングでプラスされていく。
  }
  return {
    publicVal,
    publicFn,
  };
})();

c.publicFn(); // 結果、何回も呼び出すとprivateValの値が増えていく。
c.publicFn(); // publicFnを通してしか、privateValの値を変更できなくなる。
c.publicFn();