レベル別 演習問題：無名関数 ⇄ アロー関数書き換え
では、無名関数とアロー関数の両方で書き換える レベル別演習問題セット を紹介します。
レベル1：基本操作（配列・計算）
問1-1：2倍配列
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]
問1-2：偶数判定
let numbers = [1,2,3,4,5,6];
// 無名関数で偶数だけ抽出
let evens = numbers.filter(function(n){ return n%2===0; });
console.log(evens); // → [2,4,6]
課題：アロー関数に書き換え
解答
let evens2 = numbers.filter(n => n%2===0);
console.log(evens2); // → [2,4,6]
レベル2：コールバックと this の扱い
問2-1：setTimeout での this
let obj = {
value: 10,
show: function() {
setTimeout(function() {
console.log(this.value);
}, 100);
}
};
obj.show(); // → undefined（thisがグローバルを参照）
課題：アロー関数に書き換えて obj.value を正しく表示せよ
解答
let obj2 = {
value: 10,
show: function() {
setTimeout(() => {
console.log(this.value); // → 10
}, 100);
}
};
obj2.show();
問2-2：arguments の扱い
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
課題：アロー関数に書き換え、...args を使って同じ計算をせよ
解答
let sum2 = (...args) => args.reduce((a,b) => a+b, 0);
console.log(sum2(1,2,3,4)); // → 10
レベル3：応用（高階関数・イベント風処理）
問3-1：コールバックで文字列加工
function processStr(str, func){
return func(str);
}
let result = processStr("hello", function(s){ return s.toUpperCase(); });
console.log(result); // → "HELLO"
課題：無名関数をアロー関数に書き換えよ
解答
let result2 = processStr("hello", s => s.toUpperCase());
console.log(result2); // → "HELLO"
問3-2：イベントシステム風
let events = {};
function on(eventName, handler){
if(!events[eventName]) events[eventName] = [];
events[eventName].push(handler);
}
function emit(eventName, data){
let handlers = events[eventName] || [];
for(let i=0;i<handlers.length;i++){
handlers[i](data);
}
}
on("greet", function(name){
console.log("こんにちは、" + name + "！");
});
emit("greet","太郎"); // → こんにちは、太郎！
課題：登録時の無名関数をアロー関数に書き換え
解答
on("greet", name => console.log("こんにちは、" + name + "！"));
emit("greet","太郎"); // → こんにちは、太郎！
問3-3：高階関数で計測
function timeIt(func){
return function(){
let start = Date.now();
let result = func.apply(this, arguments);
let end = Date.now();
console.log("Elapsed: " + (end-start) + " ms");
return result;
};
}
function slow(n){
let s=0;
for(let i=0;i<n;i++) s+=i;
return s;
}
let timedSlow = timeIt(slow);
console.log("Result:", timedSlow(100000)); // → 結果と経過時間
課題：timeIt 内の返す関数をアロー関数に書き換えよ
解答
function timeIt2(func){
return (...args) => {
let start = Date.now();
let result = func(...args);
let end = Date.now();
console.log("Elapsed: " + (end-start) + " ms");
return result;
};
}
let timedSlow2 = timeIt2(slow);
console.log("Result:", timedSlow2(100000)); // → 結果と経過時間
✅ このセットで「無名関数とアロー関数の書き換え・this・arguments・コールバック」の感覚がつかめます。
