JavaScriptの関数定義まとめ

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) => cosole.log(arg1 + arg2))("hoge", "fuga")