[JavaScript] 無名関数(function)とアロー関数(=>)の違いとは？thisの挙動と使い分け

JavaScriptでは、関数を定義する方法として「無名関数（function）」と「アロー関数（=>）」があります。

どちらも同じように処理を実行できますが、記述方法だけでなく、this の扱いや利用シーンに違いがあります。

この記事では、無名関数とアロー関数の違い、それぞれの特徴や使い分けについて解説します。

無名関数（function）とは

無名関数とは、名前を付けずに定義する関数です。
JavaScriptでは昔から使われている書き方で、イベント処理やコールバック関数など、さまざまな場面で利用されています。

記述例

window.addEventListener('load', function () {
  // 処理内容
});

無名関数の特徴

• 昔から使われている標準的な書き方
• 古いブラウザでも動作する
• 関数の中で this が決まる
• イベント処理では this がイベント対象の要素になる

アロー関数（=>）とは

アロー関数は、ES6（ECMAScript 2015）で追加された新しい関数の書き方です。
function を省略できるため、短くシンプルに記述できます。

記述例

window.addEventListener('load', () => {
  // 処理内容
});

アロー関数の特徴

• 短く書ける
• コードが読みやすくなる
• 自分専用の this を持たない
• 外側で使われている this をそのまま利用する

現在のWeb制作では、アロー関数を使う場面が増えています。

thisとは？

this は「今、誰を指しているか」を表す特別なキーワードです。
例えば、ボタンがクリックされたときに this がボタン自身を指すこともあれば、別のオブジェクトを指すこともあります。
そして、無名関数とアロー関数では、この this の動きが異なります。

thisの違いを見てみよう

See the Pen [Javascript] this は誰？ function とアロー関数の違い by mkl may (@mkl-may) on CodePen.

無名関数のthis

無名関数では、その関数が呼び出された状況によって this が決まります。
イベント処理の場合、this はイベントが発生した要素になります。

例えば、ボタンをクリックしたときに this を表示すると、クリックされたボタン自身が取得できます。

<button>無名関数（function）</button>

<script>
const button = document.querySelector('button');

button.addEventListener('click', function () {
  console.log(this);
});
</script>

ボタンをクリックすると、Consoleには次のように表示されます。

<button>無名関数（function）</button>

アロー関数のthis

アロー関数は、自分専用の this を持ちません。
そのため、外側で使われている this をそのまま利用します。

<button>アロー関数（=>）</button>

<script>
const button = document.querySelector('button');

button.addEventListener('click', () => {
  console.log(this);
});
</script>

この場合、クリックされたボタンではなく、外側の this が表示されます。

ボタンをクリックすると、Consoleには次のように表示されます。

Window {window: Window, self: Window, document: document, … }

this はボタン要素ではなく、外側のスコープ（この例では Window オブジェクト）を指します。

イベントが発生した要素を取得する方法

アロー関数では this がクリックされた要素を指さないため、イベントが発生した要素を取得したい場合は event.currentTarget を利用します。

<button>アロー関数（=>）</button>

<script>
const button = document.querySelector('button');

button.addEventListener('click', (event) => {
  console.log(event.currentTarget);
});
</script>

ボタンをクリックすると、Consoleには次のように表示されます。

<button>アロー関数（=>）</button>

event.currentTarget はイベントリスナーが登録されている要素を取得できるため、アロー関数でもクリックされたボタンを参照できます。

無名関数とアロー関数の使い分け

無名関数を使うケース

this を使ってイベント対象の要素を取得したい場合は、無名関数が利用できます。

button.addEventListener('click', function () {
  this.classList.add('active');
});

アロー関数がおすすめなケース

単純なイベント処理やコールバック関数では、アロー関数がよく使われます。

window.addEventListener('load', () => {
  init();
});

コードを短く書けるため、読みやすくなります。
また、クラスやオブジェクト内で、外側の this をそのまま使いたい場合にも便利です。

ただし、最近はアロー関数と event.currentTarget を組み合わせて書くことも多く、

button.addEventListener('click', (event) => {
  event.currentTarget.classList.add('active');
});

のような書き方もよく使われます。

まとめ

• 無名関数（function）は昔から使われている標準的な書き方
• アロー関数（=>）は短く書ける新しい記法
• 最大の違いは this の動き
• アロー関数は外側の this をそのまま使う
• 無名関数は呼び出し方によって this が決まる
• イベント対象を取得したい場合は this または event.currentTarget を利用する
• 現在のWeb制作ではアロー関数がよく使われる