では、関数リテラル（無名関数）とアロー関数を 初心者向けにかみ砕いて比較 します。実際のコード例付きで説明します。
1️⃣ 基本の書き方比較
| 項目 | 無名関数（Function式） | アロー関数（ES6以降） |
|---|---|---|
| 定義 | let f = function(a, b) { return a + b; }; | let f = (a, b) => a + b; |
| 引数1つ | let f = function(x){ return x*2; }; | let f = x => x*2; |
| 処理が1行 | return 必要 | return 不要（暗黙で返る） |
| 処理が複数行 | { ... } 必須、return 必須 | { ... } 必須、明示的に return |
例1：2つの数を足す関数
// 無名関数
let add1 = function(a, b) {
return a + b;
};
// アロー関数
let add2 = (a, b) => a + b;
console.log(add1(3,4)); // 7
console.log(add2(3,4)); // 7
例2：引数1つで2倍にする
// 無名関数
let double1 = function(x){ return x*2; };
// アロー関数
let double2 = x => x*2;
console.log(double1(5)); // 10
console.log(double2(5)); // 10
2️⃣ 無名関数とアロー関数の違い（重要ポイント）
this の扱い
- 無名関数（Function式）は 呼ばれ方によって this が変わる
- アロー関数は 定義された場所の this をそのまま使う（束縛される）
例：オブジェクト内での挙動
let obj = {
value: 10,
show1: function() {
console.log(this.value); // 10
},
show2: () => {
console.log(this.value); // undefined（外側の this を参照）
}
};
obj.show1();
obj.show2();
解説：
show1は通常の関数なので obj を this として参照できるshow2はアロー関数なので obj を this にできず、外側の this（グローバルなど）を参照して undefined
arguments の扱い
- 無名関数では
argumentsが使える - アロー関数では
argumentsは使えず、代わりに 残余引数...argsを使う
// 無名関数
let sum1 = function() {
let total = 0;
for (let i=0; i<arguments.length; i++) total += arguments[i];
return total;
};
console.log(sum1(1,2,3,4)); // 10
// アロー関数
let sum2 = (...args) => args.reduce((a,b)=>a+b,0);
console.log(sum2(1,2,3,4)); // 10
コールバックでの便利さ
アロー関数は短く書けて、this も保持されるのでコールバックでよく使われます。
// ボタン押下時に this をそのまま参照したい場合
let obj = {
name: "Halu",
buttonHandler: function() {
setTimeout(() => {
console.log("Hello " + this.name); // Halu
}, 500);
}
};
obj.buttonHandler();
- 無名関数だと
setTimeout(function(){ ... })内の this はグローバルになりやすく、let self = this;のような工夫が必要
3️⃣ 練習問題（無名関数 ⇄ アロー関数で書き換え）
問題1
let nums = [1,2,3,4,5];
// 無名関数で 2倍した配列を作る
let doubled = nums.map(function(x){ return x*2; });
console.log(doubled); // [2,4,6,8,10]
課題：上の map をアロー関数で書き換えてみる
解答
let doubled2 = nums.map(x => x*2);
console.log(doubled2); // [2,4,6,8,10]
問題2（this の違い）
let obj = {
value: 20,
show: function() {
setTimeout(function() {
console.log(this.value);
}, 100);
}
};
obj.show(); // ? （出力は？）
課題：アロー関数に書き換えて obj.value が表示されるようにせよ
解答
let obj2 = {
value: 20,
show: function() {
setTimeout(() => {
console.log(this.value); // 20
}, 100);
}
};
obj2.show();
まとめ（初心者が覚えるべきポイント）
- 構文が短くなる → 小さい関数、コールバック向き
- this の束縛 → アロー関数は定義時の this を使う
- arguments が使えない → 必要なら
...argsを使う - 普通の無名関数とほぼ同じ感覚で使えるが、コールバックや配列処理で便利
