練習問題＋解説（初級〜上級）
初級編：関数の基本
【問題1】あいさつ関数を作ろう
名前を引数として受け取り、「こんにちは、◯◯さん！」と表示する関数 greet() を作ってください。
// ここに関数を定義
// greet("Halu") → こんにちは、Haluさん！
🔍 ヒント：
functionキーワードを使うconsole.log()で出力する
✅ 解答と解説：
function greet(name) {
console.log(`こんにちは、${name}さん！`);
}
greet("Halu"); // こんにちは、Haluさん！
📘 ポイント：
function 関数名(引数) { ... }の形を覚えよう。- テンプレートリテラル
`文字${変数}`が便利。
【問題2】足し算関数を作ろう
2つの数値を受け取って、合計を戻り値として返す関数 add() を作ってください。
// add(2, 3) → 5
✅ 解答：
function add(a, b) {
return a + b;
}
console.log(add(2, 3)); // 5
📘 ポイント：
returnは「結果を返す」命令。console.log()のように出力ではなく、値を返したいときに使う。
【問題3】デフォルト引数
引数 name が省略されたとき、「ゲスト」としてあいさつするようにしてみましょう。
// greet() → こんにちは、ゲストさん！
✅ 解答：
function greet(name = "ゲスト") {
console.log(`こんにちは、${name}さん！`);
}
greet(); // こんにちは、ゲストさん！
📘 ポイント：
function greet(name = "ゲスト")でデフォルト値を設定できる。
中級編：スコープとクロージャ
【問題4】スコープの理解
次のコードの出力結果を予想してみてください。
let x = 10;
function show() {
let x = 20;
console.log(x);
}
show();
console.log(x);
✅ 解答：
20
10
📘 ポイント：
- 関数の中で宣言された
let xは外側のxと別物。 - 「内側で同名の変数を定義すると、外側のものを上書きしない」。
【問題5】クロージャを使ってカウンターを作る
ボタンを押すたびに数字が1ずつ増える「カウンター関数」を作ってください。
const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
🔍 ヒント：
- 外の変数を関数内で覚えておく → クロージャ。
✅ 解答：
function makeCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
📘 ポイント：
makeCounterが終わっても、内部のcountを保持。- クロージャは「状態を持つ関数」を作る強力な手法。
上級編：関数の応用と再帰
【問題6】再帰関数で階乗を求めよう
次のように、factorial(5) が 5 * 4 * 3 * 2 * 1 = 120 になる関数を作ってください。
factorial(5); // 120
🔍 ヒント：
- 自分自身を呼び出す「再帰（recursion）」を使う
- 終了条件（ベースケース）を忘れない！
✅ 解答：
function factorial(n) {
if (n <= 1) return 1;
return n * factorial(n - 1);
}
console.log(factorial(5)); // 120
📘 ポイント：
- 再帰では「止めどころ」をきちんと設定すること。
n * factorial(n - 1)で再帰的に掛け算していく。
【問題7】即時関数 (IIFE)
ページが読み込まれたときだけ1回実行される関数を作ってください。
✅ 解答：
(function() {
console.log("ページ読み込み完了！");
})();
📘 ポイント：
(function() { ... })();のように「即時実行関数式」を書くと、その場で1回だけ実行される。- 変数の衝突を防ぐためのテクニックとしても使われる。
まとめクイズ（確認）
最後にサクッと答えてみよう。
| 質問 | 答え |
|---|---|
return がない関数の戻り値は？ | undefined |
| 関数の中で外の変数を覚えて使う仕組みは？ | クロージャ |
| 関数を定義する前に呼び出せるのは？ | 関数宣言（ホイスティングあり） |
アロー関数の this はどこを参照する？ | 外側のスコープの this |