JavaScriptのアロー関数について

アロー関数とは？

アロー関数は、簡潔な記法で関数を定義できる新しい方法です。普通の関数とは異なり、アロー関数はthisの扱いが変わってきます。

アロー関数の書き方

普通のJavaScriptの関数は以下のように記載します。

function add(a, b) {
  return a + b;
}

アロー関数に関しては以下のように記載します。

const add = (a, b) => {
  return a + b;
};

もっと短く再することも可能です。

const add = (a, b) => a + b;

配列の値を2倍するサンプルプログラム

let numbers = [1, 2, 3];
let doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6]

numberの配列を、maps関数の引数でアロー関数を使い2倍の処理をして、n変数にいれる形になります。

イベントハンドラでも使うことができます

document.getElementById("myButton").addEventListener("click", () => {
  console.log("Button clicked!");
});

まとめ

• アロー関数は短く書けます。
• thisの扱いがシンプルです。
• 無名関数やコールバック関数で使うと便利になります。