JavaScript アロー関数の書き方まとめ

JavaScript のアロー関数は便利だが、「どこまで省略できるか」を忘れがちなので、最低限のパターンを整理しておく。

⸻

1. function 宣言（従来の書き方）

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

•	一番ベーシック
•	巻き上げ（hoisting）される

⸻

1. 変数に代入する function（無名関数）

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

•	関数を値として扱いたいとき
•	巻き上げされない

⸻

1. アロー関数（省略なし）

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

•	function の代替として最も基本形
•	this は外側のスコープを参照する

⸻

1. アロー関数（return 省略）

※ 処理が1行・式のみの場合

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

•	{} と return を省略できる
•	一番よく使う形

⸻

1. アロー関数（引数が1つの場合）

const double = a => a * 2;

•	引数が1つなら () を省略可能

⸻

1. アロー関数（引数なし）

const hello = () => 'hello';

•	引数なしの場合は () 必須

⸻

1. アロー関数でオブジェクトを返す場合（注意）

const user = () => ({ name: 'Taro' });

•	{} はブロックと解釈されるため
•	オブジェクトは () で包む

❌ NG例

const user = () => { name: 'Taro' };

⸻

まとめ（最短で思い出す用）

function fn() {} // 昔の書き方
const fn = function () {} // 無名関数
const fn = () => {} // アロー関数
const fn = () => value // return 省略
const fn = x => value // 引数1つは () 省略
const fn = () => ({ key: value })// オブジェクトは () で包む

⸻

覚え方メモ
• 省略できるのは
• {} と return
• 引数が1つの ()
• 省略できないのは
• 引数なしの ()
• オブジェクト返却時の ()

⸻