JavaScript

【JavaScript】即時関数内で宣言した変数や関数を外で使う方法

本記事では、即時関数内で宣言した変数や関数を即時関数の範囲外で使う方法について解説しています。

クロージャーやスコープについてある程度理解できている人向けの内容になっているため、まだ理解出来ていない人は下記の記事をご参考ください。

【JavaScript】クロージャについて理解しよう本記事では、JavaScriptの登竜門と呼ばれているクロージャについてサンプルコードを用いて分かりやすく解説しています。...
【JavaScript】スコープ(Scope)について理解しよう本記事では、JavaScriptのスコープについてサンプルコードを載せて分かりやすく解説しています。...

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

即時関数内の変数と関数を使う方法

即時関数内の変数と関数を使う方法は以下の通りです。

let sample = (function () {
  let val = 0;
  function hello() {
    console.log("Hello World");
  }
  return {
    val,
    hello,
  };
})();

console.log(sample.val); // -> 0
sample.hello(); // -> Hello World

ここでの重要なポイントは「使いたい変数をreturnで返す」「即時関数を変数に代入する」の2つです。

使いたい変数をreturnで返す

一つ目のポイントは使いたい変数をreturnで返すことです。これをすることによって、returnで返された値が変数(sample)に渡り外部から呼び出すことができるようになります。

return {
  val // -> valプロパティに0を代入して変数sampleに返す!
  hello // -> helloプロパティに関数を代入して変数sampleに返す!
}

returnはオブジェクト形式で記述する必要があります。プロパティ名と変数が同じ場合は1つに省略することができます。関数も同様にプロパティ名と関数名が同じであれば省略可能です。

let val = 0;
return {
    val:val, // -> 省略しない書き方
    val, // -> 省略した書き方
    sample:val // -> 省略できない(プロパティ名と変数名が違うため)
}

即時関数を変数に代入する

二つ目のポイントは即時関数を変数に代入することです。

何故、即時関数を変数に代入するかというと、先ほど紹介した使いたい変数や関数をreturnで返すためです。

もし即時関数を変数に代入せずにreturnで返した場合、その値がどこに返されたか分からなくなってしまうため変数に即時関数を代入させる必要があります。

let sample = (function () { // -> returnで返された値を変数sampleに代入する!
  let val = 0;
  function hello() {
    console.log("Hello World");
  }
  return {
    val,
    hello,
  };
})();

まとめ

今回は、即時関数内で宣言された変数と関数を外部で使用する方法について解説しました。

関数スコープがあるから、一般的には関数外で使うことは無理と思われがちですがこのようなテクニックがあるということを覚えておくと今後の開発で役立つ時が来るかもしれません。

下記の記事で即時関数ではなく、ただの関数内で宣言された変数を外部で使う方法について解説しているので、興味のある方はご参考ください。

【JavaScript】関数内の変数を関数外で使う方法本記事では、本来であれば参照することのできない関数内の変数を使う方法について解説しています。...

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村