・ラムダ式の使い方がよくわからない･･･。
・ラムダ式を短く書くことができる条件は？
JavaScriptでは、無名関数をより簡潔に書くことができるラムダ式という書き方がありますが、正しい使い方を知らない初心者の人も多いでしょう。
そこでこの記事では、ラムダ式とは何か、そして、ラムダ式の基本的な使い方について詳しく解説します！
この記事を読めば、ラムダ式について理解することができ、無名関数を使うときにより簡潔に書くことができるようになるでしょう。
JavaScriptのラムダ式について詳しく知らない、書き方がわからない人は、ぜひ最後までご覧ください。
目次
ラムダ式とは？
ラムダ式とは、無名関数をより簡潔に書くことができる書き方です。
JavaScriptでは、関数を変数に代入したり、関数に変数を渡したりすることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> // 関数を変数に代入する場合 let result = function() { console.log('こんにちは'); } result(); // 関数に引数を渡す場合 let result = function(message) { console.log(message); } result('こんにちは'); </script> |
上記のサンプルコードは、Consoleに「こんにちは」と出力する処理の関数を変数「result」に代入したり、関数に「message」という引数を渡して、関数を呼び出す際に文字列を指定したりしています。
このサンプルコードのように名前のない関数を、JavaScriptでは「無名関数」と呼んでいます。（または匿名関数とも呼ばれています）
そして、この無名関数をより簡潔に書けるようにした書き方を、ラムダ式と言います。
実際にコードで書いた方が理解しやすいので、ラムダ式の書き方を見ていきましょう。
ラムダ式の基本的な使い方
先ほどの説明で用いた無名関数を、ラムダ式で書いてみましょう。
以下のコードをご覧ください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> // 無名関数で書いた場合 let result = function() { console.log('こんにちは'); } result(); // ラムダ式で書いた場合 let result = () => { console.log('こんにちは'); } result(); </script> |
無名関数で書いた場合とラムダ式で書いた場合の違いを見分けやすいように、両方の書き方をまとめて書いています。
2つの関数の違いを見てみると、無名関数で書いた「function () {}」の部分が、ラムダ式で書くと「() => {}」になっていますね。
通常は「function (引数) {処理}」と書くのを、ラムダ式では「(引数) => {処理}」と書くことができるということです。
つまり、無名関数をラムダ式で書く際は、「function」を省略する代わりに「=>」矢印を丸括弧の後に書くということになります。
また、JavaScriptでは、この「=>」矢印を使った書き方の関数を「アロー関数」と呼ぶこともできます。
ラムダ式を見ればわかる通り、「function」と書くよりも「=>」矢印で書いた方が簡潔に書くことができ、コードもスッキリしますね。
また、引数を渡す場合も同じように書くことができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> // 無名関数で書いた場合 let result = function(message) { console.log(message); } result('こんにちは'); // ラムダ式で書いた場合 let result = (message) => { console.log(message); } result('こんにちは'); </script> |
丸括弧の中に引数を指定した状態で、「function」を省略し、代わりに「=>」矢印を書いています。
無名関数で書いた場合もラムダ式で書いた場合も結果は同じですが、ラムダ式の方が簡潔に書けるので、効率よくコードを書いていくことができますね。
また、実際の現場でラムダ式の関数を書くエンジニアがいた場合、ラムダ式を理解していなければ、どのような処理を書いているのかわからなくなります。
なので、ラムダ式を理解しておいた方が良いということですね。
※ちなみに、アロー関数については以下の記事で解説されているので、そちらをご覧ください。
【超初心者向け】JavaScript・関数の「基本のキ」を理解しよう
ラムダ式のルール
ラムダ式は、無名関数をより簡潔に書くことができる書き方だと解説しました。
実はこのラムダ式は、条件によってはさらに簡潔に書くこともできます。
なのでここでは、ラムダ式のルールも踏まえて、様々な条件での書き方について見ていきましょう。
処理がreturn文のみの場合はreturnと波括弧を省略できる
まず、関数の処理が「return文のみ」の場合は、returnと波括弧を省略することができます。
例えば、以下のような場合です。
|
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript"> // 関数の処理がreturn文のみの場合 (num) => { return num + 1; } // returnと波括弧を省略できる (num) => num + 1; </script> |
サンプルの「return num + 1」のように、関数の処理がreturnの1文だけの場合もあります。
その場合は、「return」という文字を省略することができ、さらに波括弧{}も省くことができます。
省略していない場合と省略している場合では、コードを書く量が大きく違いますね。
これほど簡潔に書くことができれば、より早くコードを書くことができます。
なので、return文のみの場合は、returnと波括弧を省略できることを覚えておきましょう。
引数が1つの場合は丸括弧を省略できる
関数に指定する引数が1つの場合は、丸括弧を省略することができます。
例えば、次のようなコードの場合。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> // 引数が1つの場合 (message) => { console.log(message); } // 丸括弧を省略することができる message => { console.log(message); } </script> |
例のように、関数に指定している引数が「(message)」だけの場合があります。
その場合は、「message => {}」というように丸括弧を省略して書くことができるのです。
丸括弧を省略するだけでも、かなり簡潔になりますね。
また、引数が1つだけで、さらにreturn文のみの場合は、丸括弧とreturn、そして波括弧を省略することができることになります。
引数がない場合は丸括弧を省略できない
先ほど、関数の引数が1つの場合は丸括弧を省略して書くことができると解説しました。
しかし、引数に何も指定されていない場合（引数がない場合）は、丸括弧を省略することができません。
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> // 引数がない場合は丸括弧を省略できない () => { console.log('こんにちは'); } </script> |
上記のコードのように、関数に引数が何も指定されていないときがあります。
その場合は、丸括弧を省略することはできないので、注意しましょう。
また、引数が2つ以上の場合も丸括弧を省略することができません。
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> // 引数が2つ以上の場合も丸括弧を省略することができない (a, b) => { return a * b; } </script> |
上記のように、引数を2つ以上指定すると、丸括弧を省略することはできません。
3つ、4つの場合も省略できないので、注意しましょう。
このように、ラムダ式には様々なルールがあり、省略できる場合とできない場合があります。
省略できる場合は、無名関数を簡潔に書くことができるので、積極的に使ってもいいでしょう。
ただ、今回解説したようなルールを知っておかないと、うまく動作しない原因にもなるので、気をつけましょう。
まとめ
今回は、JavaScriptのラムダ式について詳しく解説しました。
ラムダ式は、無名関数をより簡潔に書くことができる書き方で、条件によってはさらに省略して書くこともできます。
絶対に必要な書き方ではありませんが、実際にラムダ式を使っている現場であれば、意味を理解する必要があるので、今回解説した内容を覚えておくといいでしょう。
この記事がJavaScriptの学習に役立つと幸いです。
