JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript:JavaScriptを使えるレベルにする - Day10:関数② 練習問題

JavaScript JavaScript
スポンサーリンク

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 の練習で身につくことは次のとおりです。

スコープ=変数が生きている範囲
無名関数=その場で作って渡す関数
アロー関数=短く書ける無名関数の形
コールバックや配列処理でアロー関数が大活躍
スコープを使うことで安全なコードが書ける

関数②は「書き方の幅が広がる」だけでなく、
安全で読みやすいコードを書くための基礎にもなります。

タイトルとURLをコピーしました