本記事では、即時関数内で宣言した変数や関数を即時関数の範囲外で使う方法について解説しています。
クロージャーやスコープについてある程度理解できている人向けの内容になっているため、まだ理解出来ていない人は下記の記事をご参考ください。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
即時関数内の変数と関数を使う方法
即時関数内の変数と関数を使う方法は以下の通りです。
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,
};
})();まとめ
今回は、即時関数内で宣言された変数と関数を外部で使用する方法について解説しました。
関数スコープがあるから、一般的には関数外で使うことは無理と思われがちですがこのようなテクニックがあるということを覚えておくと今後の開発で役立つ時が来るかもしれません。
下記の記事で即時関数ではなく、ただの関数内で宣言された変数を外部で使う方法について解説しているので、興味のある方はご参考ください。