未経験からエンジニアになりたい人必見!
おすすめプログラミングスクール3選!

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

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

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

【JavaScript】クロージャについて理解しよう【JavaScript】クロージャについて理解しよう 【JavaScript】スコープ(Scope)について理解しよう【JavaScript】スコープ(Scope)について理解しよう

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのJavaScriptメカニズム

作成者 CodeMafia
学習時間 20.5時間
受講者数 16,593人
レビュー (2,383件)

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

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

JavaScript
  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)に渡り外部から呼び出すことができるようになります。

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

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

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

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

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

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

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

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

まとめ

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

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

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

【JavaScript】関数内の変数を関数外で使う方法【JavaScript】関数内の変数を関数外で使う方法