JavaScriptの関数定義まとめ

はじめに

JavaScriptって関数の定義方法が何個もあって、どれが何をしてくれるのかよくわからなくなるのでまとめます。

関数定義と呼び出し

よく見る書き方。
関数を一度定義し、使いたい時に呼び出す。
繰り返し・共通で使う処理などをまとめておくときに使う。

// 引数なし
function hoge() {
  console.log("hoge");
}

// 引数あり
function fuga(str) {
  console.log(str);
}

呼び出し

hoge();
// -> "hoge" と出力
fuga(fuga);
// -> "fuga" と出力

変数代入と無名関数(匿名関数)

定義した関数を変数に代入して呼び出せます

const hoge = function hoge() {
  console.log("hoge");
}
hoge();
// -> "hoge" と出力

変数に代入するのにわざわざ関数名も書かなくてよくない？
っていうことで省略できます。
これを無名関数(匿名関数)といいます。

const hoge = function() {
  console.log("hoge");
}
hoge();
// -> "hoge" と出力

即時関数

書いたその場で実行される関数。
定義と呼び出しがセットになってるようなもの。
()で囲います。

(function hoge() {
  console.log("hoge");
}());
// -> すぐに "hoge" と出力

こちらも関数名を省略できます。
引数も指定できます。

(function(arg1, arg2) {
  console.log(arg1 + arg2);
}("hoge", "fuga"));
// -> すぐに "hogefuga" と出力

アロー関数

ES6以降に利用可能な 書き方
記法を変えているだけで、使われ方はこれまでに挙げたものと同じです。
=> という矢(アロー)を使って書くのでアロー関数と呼びます。

書き方は以下です。
一行の処理の場合は {} を省略できます。
(引数) => { 処理 }

function など文字を省略できるので書くのが楽ですね！

最後に使い方の例です。
上で挙げた即時関数をアロー関数で書いたもの。

((arg1, arg2) => console.log(arg1 + arg2))("hoge", "fuga")