JavaScriptの関数定義まとめ

JavaScriptの基本の基だと思いますが、認識が今一つ曖昧な気がしたため、自身の中で整理する意味を込めてまとめました。
関数定義には(基本的なものは)4種類あり、それぞれ違いがあります。

1.関数宣言

function helloWorld(){
  console.log("Hello World")
};

helloWorld();

"function"と記述することで関数を定義することができます。
その後"helloWorld"と続けることで、関数名を決めることができます。
()に入るのは引数。{}内は処理の内容を記述します。
定義後は、"関数名()"と記述することで処理を実行できます。

2.関数式

名前のついていない関数を、変数に代入して定義する構文です。

const helloWorld = function(){
  console.log("Hello World")
};

helloWorld();

関数宣言と関数式との違い

関数式の = から先に注目してみます。

function(){
  console.log("Hello World")
}

前述の関数宣言のコードと比較すると、関数名の"helloWorld"がないことがわかリます。
このような命名されていない関数を無名関数と言います。
この無名関数は、そのままでは定義されていない状態なので使えません。
関数式とは、無名関数を変数に代入することで定義し、使える状態にしたものです。
今回は、"const"で定義した"helloWorld"という変数に代入しています。

もう１つ、JavaScriptにおいて関数宣言は先に読み込んでくれますが、関数式は先に定義しなければ読み込まれないという違いがあります。
どういうことかというと、

helloWorld();

function helloWorld(){
  console.log("Hello World")
};

helloWorld();

const helloWorld = function(){
  console.log("Hello World")
};

このように、関数定義の記述の前に関数を実行しようとすると、前者では問題なく"Hello World"が出力されますが、後者はエラーが発生してしまいます。

3.即時関数

定義と同時に関数を実行できる構文です。
関数宣言も関数式も、定義後に改めて"関数名();"と記述することで実行していました。

(function(){
  console.log("Hello World")
})();

括弧が多くややこしいですが、やっていることはこうです。

(無名関数)();

無名関数はそのままだと定義がされていません。
しかし、( 無名関数 )と括弧で括ることにより、無名関数を無名のまま定義することができます。
更に( 無名関数 )は関数として定義しているため、その後"();"と続けることで、同時に実行しています。
関数の実行には"関数名();"と記述するわけですが、それと同じ構図になっています。だから定義と同時に実行できるわけですね。

4.アロー関数

functionを省略し、()=>という記述で定義する構文です。
関数式の構文で置き換えるとこうなります。

const helloWorld = function(){
  console.log("Hello World")
};

helloWorld();

const helloWorld = () => {
  console.log("Hello World")
};

helloWorld();

記述を短く、シンプルにできるというメリットがあります。