Day10 関数②の練習問題
Day10 のテーマは スコープ / 無名関数 / アロー関数。
ここでは、理解を深めるための練習問題と、
それぞれの解答・解説をまとめていきます。
関数②は「書き方の幅が広がる」だけでなく、
安全で読みやすいコードを書くための基礎にもなる重要な回です。
スコープの練習問題
問題1:関数の中と外のスコープを理解する
次のコードの出力を答えてください。
const message = "外側";
function showMessage() {
const message = "内側";
console.log(message);
}
showMessage();
console.log(message);
JavaScript解答と解説
出力は次のとおりです。
内側
外側
関数の中で宣言した message は、
外側の message を「隠す(シャドーイング)」ため、
関数内では「内側」が優先されます。
関数の外では、外側の message がそのまま使われます。
問題2:ブロックスコープの動きを確認する
次のコードの出力を答えてください。
if (true) {
const value = 10;
console.log(value);
}
console.log(value);
JavaScript解答と解説
出力は次のとおりです。
10
エラー
const / let は ブロックスコープ を持つため、
if の中で宣言した value は外から見えません。
スコープを意識することで、
「意図しない変数の上書き」や「予期せぬ参照」を防げます。
無名関数の練習問題
問題3:無名関数を変数に代入して実行する
無名関数を使って「こんにちは」と表示する関数を作り、
変数 greet に代入して実行してください。
解答例
const greet = function () {
console.log("こんにちは");
};
greet();
JavaScript解説
無名関数は function のあとに名前をつけず、
そのまま変数に代入して使います。
無名関数は「その場で作って渡す」処理に向いています。
問題4:setTimeout に無名関数を渡す
3秒後に「実行されました」と表示するコードを書いてください。
解答例
setTimeout(function () {
console.log("実行されました");
}, 3000);
JavaScript解説
setTimeout の第一引数は「あとで実行される関数」です。
このように、無名関数は コールバック関数 としてよく使われます。
アロー関数の練習問題
問題5:無名関数をアロー関数に書き換える
次の無名関数をアロー関数に書き換えてください。
const add = function (a, b) {
return a + b;
};
JavaScript解答例
const add = (a, b) => {
return a + b;
};
JavaScript解説
アロー関数は function を省略し、
引数のあとに => を置く書き方です。
問題6:1行で return するアロー関数に書き換える
次の関数を return 省略形のアロー関数にしてください。
const double = function (n) {
return n * 2;
};
JavaScript解答例
const double = (n) => n * 2;
JavaScript解説
処理が「1行で return のみ」の場合、
中かっこ {} と return を省略できます。
スコープ × 無名関数 × アロー関数の応用問題
問題7:filter とアロー関数を使って偶数だけを取り出す
次の配列から偶数だけを取り出し、
新しい配列 evenNumbers を作ってください。
const numbers = [1, 2, 3, 4, 5, 6];
JavaScript解答例
const evenNumbers = numbers.filter((n) => n % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]
JavaScript解説
filter に渡している (n) => n % 2 === 0 がアロー関数です。
「条件に合うものだけを残す」という処理を
短く、読みやすく書けるのがアロー関数の強みです。
セキュリティ視点の練習問題
問題8:スコープを使って外部から触れない変数を作る
次のコードで、password を外から参照できないようにしてください。
const password = "secret123";
console.log(password);
JavaScript解答例
(function () {
const password = "secret123";
console.log("パスワードは関数内でのみ使用");
})();
JavaScript解説
無名関数(即時実行関数)を使うことで、
password を関数スコープに閉じ込め、
外部から参照できないようにできます。
これは「重要な値を外に漏らさない」という
セキュリティの基本的な考え方です。
Day10 練習問題まとめ
Day10 の練習で身につくことは次のとおりです。
スコープ=変数が生きている範囲
無名関数=その場で作って渡す関数
アロー関数=短く書ける無名関数の形
コールバックや配列処理でアロー関数が大活躍
スコープを使うことで安全なコードが書ける
関数②は「書き方の幅が広がる」だけでなく、
安全で読みやすいコードを書くための基礎にもなります。
