JavaScriptの無名関数について現役エンジニアが解説【初心者向け】

JavaScriptの無名関数について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をみてみましょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• 無名関数とは
• 無名関数の書き方
• 無名関数と即時関数の比較
• 実際に書いてみよう
• まとめ

 

無名関数とは

無名関数は、関数名を記述せずに引数や代入に使用する関数です。

 

通常、JavaScriptで関数はfunctionキーワードに関数名を続けて記述します。

function greeting(name) {
  return `${name}さん、こんにちは！`;
}

上記の関数を呼び出すには、関数名を使用して以下のように記述しましょう。

console.log(greeting('マリー'));

 

[PR] フロントエンドで副業する学習方法を動画で公開中

無名関数の書き方

関数を変数の値として代入する無名関数の書き方は以下のようになります。

const myfunc = function (name) {
  return `${name}さん、こんにちは！`;
}

上記の関数を呼び出すには、変数名を使用して以下のように記述します。

この場合、関数名ではなく変数名であることに注意しましょう。

console.log(myfunc('ジョン'));

最初に例示した(無名ではない)関数定義と変数に代入する無名関数の大きな違いは「巻き上げ」の有無です。

前者は、関数の定義が呼び出し側の後にあっても動作するため、「巻き上げ」と呼びます。

 

これに対して後者は巻き上げが起きず、関数の定義の後でのみ呼び出しが可能です。

巻き上げはJavaScript特有の考え方であり分かりづらいため、一般的には巻き上げが発生しない無名関数の方を多く使用します。

別の関数の引数として記述する例としては、イベントリスナーが上げられます。

例えばWebページがロードされた時のイベントリスナーに無名関数を使用するには以下のように記述しましょう。

window.onload = function() {
  console.log('ロードされました！');
};

 

無名関数と即時関数の比較

即時関数は、その名の通り即時に実行される関数です。

即時関数は無名関数をカッコで囲って記述します。

(function (name) {
  console.log(`${name}さん、こんにちは！`);
})('ビル');

関数の中で定義した変数は、その関数の中でのみ有効です。

これを「スコープ」と呼び、即時関数はスコープを限定したい場合に使用されます。

 

実際に書いてみよう

今回のサンプルプログラムでは、無名関数や即時関数の使い方について確認しましょう。

実行は、Chromeブラウザーのデベロッパーツールで行います。

 

はじめは通常の関数定義です。

console.log(greeting('マリー'));

function greeting(name) {
  return `${name}さん、こんにちは！`;
}

実行結果は以下のとおりです。

巻き上げが発生し、呼び出し側が先でも実行できていることが確認できます。

マリーさん、こんにちは！

 

次は関数を変数の値として代入する記法について確認しましょう。

console.log(myfunc('ジョン'));

const myfunc = function (name) {
  return `${name}さん、こんにちは！`;
}

実行結果は以下のとおりエラーとなり、巻き上げが発生していないことが確認できます。

Uncaught ReferenceError: Cannot access 'myfunc' before initialization

呼び出し側を後に書くとエラーはなくなります。

const myfunc = function (name) {
  return `${name}さん、こんにちは！`;
}

console.log(myfunc('ジョン'));

 

実行結果は以下のとおりです。

ジョンさん、こんにちは！

続いて関数を別の関数の引数として記述するイベントリスナーについて確認しましょう。

window.onload = function() {
  console.log('ロードされました！');
};

実行結果は以下のとおりです。ページがロードしたタイミングで実行されていることが確認できます。

ロードされました！

 

最後は即時関数です。

(function (name) {
  console.log(`${name}さん、こんにちは！`);
})('ビル');

実行結果は以下のようになります。

ビルさん、こんにちは！

 

まとめ

今回の記事ではJavaScriptの無名関数について学習しました。

それぞれの関数の記述について使い分けていきましょう。

 

執筆してくれたメンター

太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア。 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。 守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。 その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。 地方在住。 仕事のほとんどをリモートオフィスで行う。 通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。