【JavaScript】無名関数とは?使い方や実装例を解説します!

JavaScriptにおける関数には、いくつか種類がありますが、その違いについて理解できていますか?

JavaScriptでは、関数と呼ばれるものを構築しながらアプリケーションを開発していきます。通常、関数の作成時には、その関数名を考え、実装したい処理を書き連ねていきますが、JavaScriptにはわざわざ命名しなくてもよい関数が存在します。

今回は、命名不要の関数である「無名関数」をどのように記載・実装するのかを詳しく解説していきます。

普通の関数とどのような部分が異なるのか、即時関数とどの部分が違うのかを、サンプルコード付きで説明します。関数の種類が多すぎてよく理解できていない人は、ぜひ参考にしてください。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


そもそも関数とは?

無名関数を理解するためには、そもそも関数がどのようなものなのかを理解することがポイントです。

関数とは、JavaScriptに限らずほとんどのプログラミング言語において備わっている仕組みの一つです。処理を集約してひとつのまとまりにしたもので、関数に対する入力値である「引数」と、出力値である「戻り値」と呼ばれる機構を持ちます。

JavaScriptで、どのように関数を定義するのかについて確認しましょう。基本形は以下の通りです。

function 関数名(第一引数, 第二引数, ...) {
  処理内容を記載
  ….
  return 値;
}

let result = 関数名(1, 3, …);

JavaScriptにおける関数は、functionキーワード・関数名引数の定義具体的な処理の4つで構成されています。

引数については、複数定義することができ、戻り値もプログラム上で複数記載できます。しかし、実際に関数が実行された際は、一つの戻り値しか返さないという点に注意してください。

関数は、定義しただけでは利用できません。「関数を呼び出す」という処理を別で記載しなければなりません。

そこで、関数名と引数に入れる具体的な値(数値・文字列など)を記載します(7行目)。戻り値が存在するのであれば、関数内の処理が終了した後に、変数(result)に格納されます。この戻り値を、以降の処理で応用していくのがおおまかな流れとなります。

無名関数とは?

名前の通り、無名関数とは関数名が存在しない関数を意味します。とは言っても、今まで通りのやり方で実装した関数から、単に関数名の箇所だけ削除しても、プログラムが正常に動作することはありません。

無名関数は、関数そのもの自身をオブジェクトとして、変数・引数に入れることで初めて定義できるのです。

例として、2つの値の和を2乗する処理を、無名関数を使って実装したいとしましょう。以下にサンプルコードを載せましたので、ご覧ください。

let deploy = function (x, y) {
  let sum = x + y;
  return sum * sum;
};

functionキーワードの直後に引数を定義されており。関数名が一切記載されていないのがお分かりでしょうか。

このような記法が、無名関数の最も基本的な仕組みとなります。関数呼び出しは、以下のサンプルコードのように記載します。

let answer = deploy(4, 6); // 関数呼び出し
console.log(answer);

通常の関数では、「関数の名前」と「引数に入れる値」を記載しましたが、無名関数を用いた場合は、格納先の変数の名前が関数名の代わりとなっています。

つまり、「変数の名前」と「引数に入れる値」を記載しなければなりません。したがって、今回取り上げた例では「deploy」という名前で引数の値を設定し、関数を呼び出しているのです。

無名関数の使い方

無名関数は、それ自体を引数に設定する必要のあるメソッドで使うことが多いです。

このようなタイプの無名関数は、JavaScriptにおいて「コールバック関数」と呼ばれています。ここでは、コールバック関数を引数とするメソッドであるmap()メソッドを紹介しましょう。

map()メソッドは、配列の各々の要素に対して、何らかの処理を適用する機能を持ったメソッドです。この「何らかの処理」を実装するにあたって、無名関数が必要になってきます。

以下に掲載したサンプルコードで、無名関数の使い方を説明しましょう。

let sample_array = [123,433,2,53,646];

// 無名関数の定義
let square_proc = function(val) {
  return val * val;
}

// map()メソッド呼び出し
let new_array = sample_array.map(square_proc);

console.log(new_array); // 結果:[15129, 187489, 4, 2809, 417316]

上記サンプルコードは、配列に格納されている値に対して、それぞれ2乗の値を算出し、新しく配列に格納する処理をmap()メソッドを利用して実装したものです。

9行目でmap()メソッドにおいて書かれているsquare_procの中には、4行目に存在する無名関数が格納されていることが分かります。今回は、変数を介して引数を指定しましたが、map()メソッドのカッコ内に直接、関数を記載するやり方も存在します。

map()メソッド以外にも、JavaScriptの世界では、引数の中身に無名関数を設定しなければならないメソッドが多数存在します。

特に配列を取り扱うような処理を実装する際は、このようなメソッドを使う機会が多いため、無名関数を使いこなしたい場合は、メソッドの機能と併せて覚えると、スキルの向上につながります。

【応用編】アロー関数を使って定義してみよう

JavaScriptでは、無名関数をより簡潔に記載するための、とっておきの記法が存在します。それがアロー関数です。矢のような記号「=>」を用いて記載することから、アロー関数と言われています。

例として、ある値の3乗を算出する処理を考えてみます。今まで通り、無名関数や従来の名前付き関数で実装しても良いですが、ここではアロー関数を使って簡潔に実装したいとしましょう。以下のサンプルコードをご覧ください。

let cube = (x) => {return x * x * x;};
console.log(cube(4));

1行目に記載されている「=>」を使った文が、アロー関数となります。従来の無名関数と比べても、見た目がスッキリしていることが分かります。関数の中身が1行で書けるものであれば、アロー関数を使うことで1行に処理を収めることが可能です。

上記のアロー関数は、引数を囲むカッコ処理を囲む波カッコ、さらにはreturnキーワードを省くができます。つまり、最終的に上記サンプルコードは、以下のように記載できます。

// アロー関数
let cube = x => x * x * x;

// 通常の無名関数
let cube = function(x){
  return x * x * x;
}

さきほどのアロー関数よりもさらにスッキリしたのがお分かりでしょうか。

3乗を計算する処理は、処理としては単純であるものの、アロー関数で実装することによって、通常の無名関数と比べてだいぶコンパクトに実装できるが分かります。

記載量が少なければ、ソースコードの読解も易しくなるので、積極的に利用しましょう。

即時関数とは?

さて、JavaScriptでは、「即時関数」と呼ばれる機能が存在するのをご存じでしょうか。

今まで紹介した関数たちとどのような点が異なるのか、端的に言えば、関数の定義と同時に実行するのが前提となっていることです。

即時関数の使い方

例として、10%の税を適用した値を計算する処理を考えてみます。以下のサンプルコードをご覧ください。

let price_tax = (function(price) {
  return parseInt(price * 1.1);
})(100); 

console.log(price_tax);

functionキーワードを使っていたり、引数や戻り値を定義していたり、一見しただけでは今まで述べた関数たちと大した差はないように見えます。

大きく違う点は、3行目にある「(100)」です。直前で定義した関数について、実際に値を代入して実行を試みているように見えます。

つまり、関数を定義してすぐさまに、引数100で関数の中身を即座に実行しているのです。

無名関数と即時関数の違い

無名関数の場合は、名前を付与しなくて良いものの、関数そのもの自身はオブジェクトのごとく変数に代入され、変数名を経由することで、関数内を実行しています。後で変数を他の値やオブジェクトに上書きしない限り、何回でも呼び出せるのが大きな特徴です。

一方、即時関数は無名(アロー)関数と違い、関数そのもの自身が変数や引数に格納するようなことがなければ、プログラム上の別の箇所で呼び出されることもありません。つまり、処理は一度きりしか実行されません。

関数とは言っているものの、即時関数は一般的な関数の用途である、随所に現れる同じような処理をまとめるために適用するものではありません。JavaScriptのプログラム内において、新しく変数のスコープを生成するために使われるため、少々特殊な機能と言えます。

今回取り上げた無名関数は、関数名を検討する手間を省きつつも、随所で使いまわしたい場合に適用するように心がけましょう。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまでJavascriptの無名関数の使い方や実装例について解説してきましたがいかがでしたか?

通常の関数と比べて記述をかなり簡素化できますので、積極的に使っていけば、コードの可読性も向上できるかと思います。

また、最近ではさらに簡素化可能なアロー関数を使用する機会も増えていますので、今回の記事でしっかりとマスターしておいてくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。