アロー関数

このトピックを終えると

アロー関数の構文を自由に使えるようになり、通常の関数との主な違い（thisのバインディング）を説明でき、アロー関数を使うべき場合と避けるべき場合を判断できるようになります。

`function`キーワードからアロー関数へ

ES6以前は、関数を作成するときは常にfunctionキーワードを使っていました。

javascript

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

アロー関数に置き換えると：

javascript

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

本体が単一の式である場合、中括弧とreturnを省略できます。

javascript

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

引数が1つだけの場合、括弧も省略できます。

javascript

const double = x => x * 2;

構文バリエーションまとめ

javascript

// 引数なし — 括弧は必須
const greet = () => "こんにちは";

// 引数1つ — 括弧は省略可能
const square = x => x * x;

// 引数2つ以上 — 括弧は必須
const sum = (a, b) => a + b;

// 本体が複数行 — 中括弧 + returnは必須
const calculate = (a, b) => {
  const result = a * b;
  console.log(result);
  return result;
};

// オブジェクトを返す場合 — 括弧で囲む
const makeUser = (name) => ({ name: name, role: "user" });

最後のパターンは、しばしば混乱を招きます。{ name: name }をそのまま書くと、JavaScriptは関数の本体の中括弧として解釈します。括弧()で囲むことで、「これはオブジェクトリテラルだ」と伝える必要があります。

コールバックで輝くアロー関数

アロー関数は、配列メソッドのコールバックとして使用するときに最も自然です。

javascript

const numbers = [1, 2, 3, 4, 5];

// 通常の関数
const doubled = numbers.map(function(n) {
  return n * 2;
});

// アロー関数
const doubled = numbers.map(n => n * 2);

filter、reduce、forEach、sortなどの配列メソッドで毎回functionキーワードを使用すると、コードが長くなり、主要なロジックが隠れてしまいます。アロー関数が採用された最大の理由の一つです。

javascript

// 実務パターン：チェーン
const result = users
  .filter(u => u.age >= 18)
  .map(u => u.name)
  .sort((a, b) => a.localeCompare(b));

`this` — 最も重要な違い

通常の関数のthisは、呼び出し方法によって決まります。アロー関数のthisは、宣言された位置で決まります。

javascript

const timer = {
  seconds: 0,

  // ❌ 通常の関数 — `this`はwindowを指す
  startBroken: function() {
    setInterval(function() {
      this.seconds++;  // `this` === window (または strictモードではundefined)
      console.log(this.seconds);  // NaN
    }, 1000);
  },

  // ✅ アロー関数 — `this`はtimerオブジェクトを指す
  start: function() {
    setInterval(() => {
      this.seconds++;  // `this` === timer
      console.log(this.seconds);  // 1, 2, 3...
    }, 1000);
  }
};

setIntervalに通常の関数を渡すと、その関数が実行されるときにthisはグローバルオブジェクト（window）になります。コールバックのthisが意図と異なるというのは、JavaScriptの最大の落とし穴の一つでした。

アロー関数は、独自のthisを作成しません。代わりに、宣言された外側のスコープのthisをそのまま使用します。これを**レキシカルthis**と呼びます。

ES6以前は、この問題を回避するためにvar self = this;や.bind(this)を使用していました。

javascript

// ES5時代の回避策
start: function() {
  var self = this;
  setInterval(function() {
    self.seconds++;
  }, 1000);
}

アロー関数はこのパターンを完全に置き換えました。