【JavaScript入門】関数リテラル（匿名関数, 無名関数）

JavaScriptに限らずプログラミングにおいての基本的な概念の一つである関数ですが、この基本的な定義の方法についてはすでにみてきました。

【JavaScript入門】関数を定義する - function命令

JavaScriptに限らずプログラミングにおける基本的な概念である関数（functions）についてみていきます。関数に処理をまとめることで、同じ処理をするコード繰り返し書く必要が無くなります。関数を使えば何度も処理することができます。

これはfunction命令を使った関数の定義方法でした。

関数の定義方法には他の方法もあります。

ここでは関数リテラルで定義する方法をみていきましょう。

関数リテラル表現で定義
1. function命令で関数定義
2. 関数リテラル表現で定義
まとめ

関数リテラル表現で定義

関数は、JavaScriptにおいてはデータ型の一種として扱われるので文字列や数値と同じように関数自体も扱うことができます。これを関数リテラルというわけで、変数に代入したり、関数の引数として渡したり、戻り値として返すこともできます。

関数リテラルは匿名関数とか無名関数とも言われています。関数名を宣言せずに定義することからこう言われます。関数式（Function expression）という言い方もあります。

具体的なコードでみていくのがわかりやすいのでやっていきましょう。どういうものか違いを理解しやすいように、通常のfunction命令を使った関数定義のコードと比べてみることにします。

function命令で関数定義

ますfunction命令を使った関数定義から書いてみます。これをあとで関数リテラルで書き換えてみることにしましょう。

function learnProgramming(lang, name) {
    switch(lang) {
        case 'JavaScript':
            return name + 'は今まさにJavaScriptをここで勉強しています。';
        case 'Python':
            return name + 'はPythonをこのサイトの別のところで勉強しています。';
        case 'Ruby':
            return name + 'はRubyを本で勉強しています。';
        default:
            return name + 'は他のプログラミングを勉強しているのでしょう。';
    }
}

console.log(learnProgramming('JavaScript', '一郎'));
console.log(learnProgramming('Python', '二郎'));
console.log(learnProgramming('Ruby', '三郎'));
console.log(learnProgramming('HTML', '末吉'));

関数名をlearnProgrammingと宣言して、引数に言語のlang、名前のnameを渡しています。switch文を使って、学習している言語を判定して、それぞれのcaseでメッセージを返すコードにしています。

switch文に関してはこちらですでに学びました。

【JavaScript入門】三項演算子とswitch文

JavaScriptの入門として、三項演算子とswitch文について扱います。三項演算子はif-else文でブロックで分けて書いていたコードを1行で書くことができます。switch文は多岐にわたる条件分岐をスッキリ書くことができます。

returnで戻り値を返しているのでbreakは必要ありません。

関数リテラル表現で定義

関数リテラルでこのコードを書き換えると、次のようになります。

var learnProgramming = function(lang, name) {
    switch(lang) {
        case 'JavaScript':
            return name + 'は今まさにJavaScriptをここで勉強しています。';
        case 'Python':
            return name + 'はPythonをこのサイトの別のところで勉強しています。';
        case 'Ruby':
            return name + 'はRubyを本で勉強しています。';
        default:
            return name + 'は他のプログラミングを勉強しているのでしょう。';
    }
};

console.log(learnProgramming('JavaScript', '一郎'));
console.log(learnProgramming('Python', '二郎'));
console.log(learnProgramming('Ruby', '三郎'));
console.log(learnProgramming('HTML', '末吉'));

上の関数名learnProgrammingが、ここでは変数になっています。この変数に関数を代入しているのですが、この関数はfunction(lang, name){…}となって、関数名を定義せずに処理をブロックの中に書いています。変数に引数を与えて結果を取り出す形になっています。

これが関数リテラルでの定義の方法です。

function命令では関数名を直接定義しているのに対し、関数リテラルでは名前の無い関数を定義した上で、それを変数に代入しているという違いがあります。

このコードを実行するとJavaScriptコンソールには次のように表示されます。