ここでは、今回学んだ「関数はオブジェクト（変数に入れられる・渡せる・返せる）」というテーマをもとに、
初心者〜中級に向けてステップアップできる レベル別の練習問題 を用意しました。
（すべてブラウザの開発者ツールや PlayCode などでそのまま実行できます）
レベル1（基本確認）
「関数は値として扱える」を体感しよう。
🧩 問題1-1：関数を変数に代入して呼び出す
function hello() {
return "こんにちは！";
}
// ① hello関数を別の変数greetに代入
// ② greetを使って関数を呼び出し、結果を出力
💡ヒント： let greet = hello;
🧩 問題1-2：無名関数を変数に代入して使う
// ① 2つの数の合計を返す無名関数を作り、変数sumに代入
// ② sum(3, 5) を実行して結果を出力
💡ヒント： let sum = function(a,b){ ... };
🧩 問題1-3：関数を上書きしてみよう
function test() {
return "OK";
}
// ① testを文字列に書き換えて出力
// ② その後 test() を呼び出すとどうなる？
💡 実は関数も変数なので、上書きできます（ただし実務では注意）。
レベル2（関数を引数として渡す）
「関数を渡すと処理を差し替えられる」を練習。
🧩 問題2-1：関数を引数として受け取る
function greet(name, formatter) {
// formatterは「名前を整形する関数」
console.log("Hello, " + formatter(name));
}
// ① 名前を大文字にする関数 upper を定義
// ② greet("taro", upper) を実行
🧩 問題2-2：無名関数を直接渡す
function greet(name, formatter) {
console.log("Hello, " + formatter(name));
}
// ① greetに「名字＋名前」を作る関数を直接渡して実行
// 例: greet("太郎", function(n){ return "山田" + n; })
🧩 問題2-3：関数を複数の場面で再利用
function double(n) { return n * 2; }
function processArray(arr, fn) {
let result = [];
for (let i = 0; i < arr.length; i++) {
result.push(fn(arr[i]));
}
return result;
}
// ① processArray([1,2,3], double) の結果を確認
// ② 無名関数で「n+10」にするパターンも試してみよう
レベル3（関数を返す・オブジェクトのように使う）
「関数がオブジェクト」だからできる応用を体験。
🧩 問題3-1：関数を返す関数
function makeMultiplier(factor) {
// ① factor倍する関数を返す
}
const triple = makeMultiplier(3);
console.log(triple(5)); // → 15
💡ヒント： return function(x){ return x * factor; };
🧩 問題3-2：関数にプロパティを持たせる
function counter() {
return counter.count++;
}
// ① counter.count に初期値1をセット
// ② counter() を3回呼んで出力してみよう
💡ヒント： counter.count = 1;
🧩 問題3-3：関数を生成してフィルタ処理
function greaterThan(threshold) {
// ① thresholdより大きいかチェックする関数を返す
}
const gt10 = greaterThan(10);
console.log([5,12,9,15].filter(gt10)); // → [12,15]
レベル4（実務っぽい応用）
実際の現場で「関数がオブジェクト」であることが活きる例。
🧩 問題4-1：フォーム検証関数を切り替える
function validate(value, rule) {
return rule(value);
}
function isNotEmpty(v) { return v.trim() !== ""; }
function isEmail(v) { return v.includes("@"); }
console.log(validate("test@example.com", isEmail)); // true
console.log(validate(" ", isNotEmpty)); // false
📘 ここで rule は「ルール（関数）」を自由に差し替え可能。
🧩 問題4-2：データ整形（APIレスポンスの加工）
function transformData(data, formatter) {
return data.map(formatter);
}
const users = [
{ name: "Taro", age: 25 },
{ name: "Hanako", age: 30 }
];
// ① transformData(users, ...) を使って
// 「'Taro(25歳)'」のような文字列配列を作ろう
🧩 問題4-3：関数の組み合わせで柔軟な処理を構築
function compose(f, g) {
// ① 2つの関数を合成し、「f(g(x))」を返す関数を作る
}
function double(x) { return x * 2; }
function square(x) { return x * x; }
const doubleThenSquare = compose(square, double);
console.log(doubleThenSquare(3)); // → 36
💡ヒント： return function(x){ return f(g(x)); };
まとめ
| レベル | 学べること | キーワード |
|---|---|---|
| 1 | 関数は変数に入れられる | 無名関数・代入 |
| 2 | 関数を引数に渡す | コールバック |
| 3 | 関数を返す／プロパティを持つ | クロージャ・高階関数 |
| 4 | 実務的な使い方 | バリデーション・データ整形 |