アロー関数 ― 短い書き方

導入

モダンな JavaScript では、アロー関数（=>）がよく使われます。特に配列メソッドのコールバックで活躍します。

説明

function の代わりに => で書けます。引数が1つならカッコを省略でき、本体が式1つなら { } と return も省略できます。

// 従来
function square(n) {
  return n * n;
}

// アロー関数（同じ意味）
const square2 = (n) => n * n;

console.log(square(4));
console.log(square2(4));

複数行の処理では { } を使い、return を明示します。

const describe = (name, age) => {
  const label = age >= 18 ? "成人" : "未成年";
  return `${name}（${label}）`;
};
console.log(describe("太郎", 20));

配列メソッドとの相性が抜群です。

const nums = [1, 2, 3, 4, 5];
const odds = nums.filter((n) => n % 2 === 1);
const cubes = nums.map((n) => n ** 3);
console.log(odds);
console.log(cubes);

やってみよう

今まで書いた関数をアロー関数に書き換えてみましょう。map / filter と組み合わせても試してください。

演習

アロー関数で triple を定義し、引数を3倍して返すようにしてください。triple(4) を表示します。