【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

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

JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
総合評価
( 5 )
メリット
  • 誰でも分かるように嚙み砕いて説明してくれる
  • アニメーションの知識が深く学べる
  • 1つのWebサイトを作りながら学べる
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

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

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

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,
  };
})();

まとめ

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

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

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次