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

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

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

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

【JavaScript】スコープ(Scope)について理解しよう本記事では、JavaScriptのスコープについてサンプルコードを載せて分かりやすく解説しています。...

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

本書情報
著者	山田祥寛
発売日	2016/9/30
ページ数	782ページ
Kindle版	○
レビュー (Amazon)	(146件)

ＪａｖａＳｃｒｉｐｔ本格入門モダンスタイルによる基礎から現場での応用まで改訂新版/技術評論社/山田祥寛

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

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

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

動画の詳細はこちら

Contents

1 即時関数内の変数と関数を使う方法
- 1.1 使いたい変数をreturnで返す
- 1.2 即時関数を変数に代入する
2 まとめ

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

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

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