クロージャーについても理解が深まったので、即時関数についてもさくっと分かるかなと思いましたが、どうしても引っかかる...いや念のためまとめました。
function で始まる文は、関数名がないと文法エラーになる
無名関数をそのまま書くとエラーになるということです。
function() {
// 何らかの処理
}
これだとエラーになります。
function で始まると関数宣言になるので、関数に名前を付けなければならないそうです。
たしかに名前がついていないと呼び出せませんね。
関数式の場合は変数宣言から始まり、変数に関数を代入しているので問題ありません。
なので無名関数の使い方は変数に代入するか、定義してすぐに実行するか（＝即時関数）です。
const a = function() {
// 何らかの処理
};
// 実行
a();
即時関数は「無名関数」+「実行」
カッコの書き方を忘れてしまいがちな即時関数ですが、2つの () の意味がわかれば思い出して書けそうです。
即時関数の使い方と構造について | JavaScript中級編 - ウェブプログラミングポータル
『function(){}』を『()』で包んでしまえば中身に影響を与えることなく『無名関数』が定義できるということです。
そして関数を実行させるための『()』をつければ『即時関数』となります。
エラーにならないように、即時関数では無名関数を () で囲っているのです。
上の記事では、例で () の代わりに + を最初につけてエラーを回避しています。
ただ + では別の問題が発生するので () がいいのですね。
(function() {
// 何らかの処理
})();
// このように()で囲ってもOK
(function() {
// 何らかの処理
}());
これは関数を定義と同時に実行していることになります。
一度きりの実行なので名前をつける必要もありません。
即時関数とクロージャー
これはクロージャーを学んだときの書き方を思い出せば良さそうです。
前回と同じように図にしてみました。
returnされた変数xは初期値の0のままなのに対し、クロージャーの中の変数xはinner関数を実行する度に1ずつ増えます。
0(xの初期値) + 1(x++の部分) + 3(y) = 4
1(x) + 1(x++) + 3(y) = 5
:
です。
即時関数ではないクロージャーでは、同じ機能を持ったクロージャーを複数作れますが、即時関数は1つのみ。
今のところ大きな違いはそれぐらいかなと思います。
（学習して新しく発見したら追記します。。）
関数式と即時関数
即時関数は return を使う、というイメージを持っていますが、関数を返しているのは普通の関数式と同じです。
// 関数式（無名関数）を変数に代入
const a = function() {
let x = 'kansushiki';
console.log(x + ' is called');
};
a(); // kansushiki is called
// 即時関数を変数に代入
const b = (function() {
let y = 'sokuji';
function fn() {
console.log(y + ' is called');
}
// returnの中身（関数fn）が変数bに代入される
return {
fn
}
})();
b.fn(); // sokuji is called
違うところは、やはりクロージャーがあるかどうかの違いだと思います。
実際に書いているうちに使い分けができるようになるといいです。
文と式について
関数式は最後に ; を付けるのが正しい書き方です。
ということを少し掘り下げてみると、文と式について知ることができました。
文と式 · JavaScript Primer #jsprimer
※だいぶ端折っているのでこちらの記事をご覧ください。
式：
変数に代入できるもの。数値、演算子を使ったもの、関数式（無名関数）、関数の実行（fn()）
文：
最後に ; を付けて処理に区切りをつける。関数宣言（名前がある）、if文、for文
※ブロック {} の最後には ; は不要。
☆式文：文になった式のこと。関数の実行（fn();）
では const a = 1; や let b; などは文なのでしょうか？
本で確認すると「const文」、「let文」と書かれているので文のようです。
なので関数の定義を変数に代入している処理は、const a = 1; などと同じく「文」なので、最後に ; が付きます。
const a = function() {}; などです。
ちなみにChatGPT に const x =1; は文なのかどうか聞いてみると、
「const x = 1; は厳密には 文（statement）ではなく 宣言（declaration）です。JavaScriptにおいて、宣言は文の一部です。」
と返ってきました。文ではないが文の一部...なぞなぞ...？
さいごに
少し知ることができた文と式。今後の役に立てばいいです...奥が深い。
関数関連ではこの即時関数とは別に「コールバック関数」があります。
それが理解できれば関数まわりは理解できそうです。
あと this ！
おしまい。
