🙄
【JavaScript】無名関数・ラムダ式・アロー関数について簡潔にまとめてみた
目的
- 「無名関数」「ラムダ式」「アロー関数」の理解を整理すること
- JavaScriptを勉強し始めると、似たような言葉がたくさん出てきて混乱しやすいため
対象読者
- JavaScript 初学者
- 関数の理解について簡単に整理したい方
無名関数・ラムダ式・アロー関数の共通点
いずれも名前のない関数であること
通常の関数
名前を付けて関数を定義します。
例
function add(a,b){
return a + b;
}
無名関数
名前を省略した関数のことを指し、匿名関数と呼ばれることもあります。
関数に名前を付ける必要がないケース
- 一度しか使わないとき（イベント処理など）
- 他の関数の引数として渡すとき
定義する際には名前を付けずに、関数を変数に代入する形で定義します。
通常、functionキーワードを使用します。
変数に代入することで、通常の関数と同じように再利用することができます。
基本構文
const 変数名 = function(引数1, 引数2) {
return 結果;
};
例
const add = function(a, b){
return a + b;
}
ラムダ式
無名関数を簡潔に定義するための構文を指します。
多くの言語で 引数 → 処理 のようにアロー演算子（ -> や => ）を使用します。
アロー関数
基本構文
() => 式
引数 => 式
(引数) => 式
(引数1, 引数N) => 式
() => {
文
}
引数 => {
文
}
(引数1, 引数N) => {
文
}
※基本構文については、以下のURLより引用
アロー関数を使用すると、記述を簡略化できます。
例
const add = (a,b) => a + b;
アロー関数使用上の注意点
1. 引数が1つの場合は丸括弧を省略できるが、引数がない場合は丸括弧を省略できない
引数あり
// 丸括弧省略可
const greet = name => `Hello ${name}`;
console.log(greet("Ken")); // 出力: "Hello Ken"
引数なし
// 丸括弧省略不可
const hello = () => {
console.log("Hello");
}
2. オブジェクトリテラル（{}）を返したい場合は、波括弧を丸括弧 () で囲む
処理が1行の場合に {} と return を省略できるのは便利である反面、複雑な処理や、意図的に複数の処理を書きたい場合は、省略しない方が可読性が高まります。
例
// 誤: JavaScriptは {} をブロックと解釈する
const getObject = () => { name: 'Alice' };
// 正: () で囲む
const getObject = () => ({ name: 'Alice' });
※「ブロックと解釈する」とは、JavaScriptエンジンがその波括弧 {} の中身を、関数本体の処理を記述するためのまとまり（ステートメントブロック）として扱う、という意味
3. その他
その他の詳細については、MDNの解説がわかりやすいので、以下をご参照ください。
まとめ
- 無名関数: 名前を持たない関数
- ラムダ式: 無名関数を簡潔に記述する構文
- アロー関数: ラムダ式の記法を使った無名関数
- JavaScriptにおいては「アロー関数はラムダ式の記法を使った無名関数」という関係
最後までお読みいただき、ありがとうございました。
参考URL
Discussion