arguments を ...rest に書き換える練習問題
Q1. 次の関数は arguments を使って、最初の引数だけを取り出しています。...rest を使って書き換えるには？
function showFirst() {
console.log(arguments[0]);
}
- A.
function showFirst(...args) { console.log(args[0]); }✅ - B.
function showFirst(args) { console.log(args[0]); } - C.
function showFirst() { console.log(args[0]); } - D.
function showFirst(...args) { console.log(arguments[0]); }
正解: A
解説: ...args で引数を配列として受け取り、args[0] で最初の値を取り出す。arguments は使わない。
Q2. 次の関数は arguments を使って、引数の個数を表示しています。...rest を使って書き換えるには？
function countArgs() {
console.log(arguments.length);
}
- A.
function countArgs(...args) { console.log(arguments.length); } - B.
function countArgs() { console.log(args.length); } - C.
function countArgs(args) { console.log(args.length); } - D.
function countArgs(...args) { console.log(args.length); }✅
正解: D
解説: ...args で引数を配列として受け取り、args.length で個数を取得する。
練習問題 1
次の関数は arguments を使って、渡されたすべての引数を文字列として結合しています。
これを ...rest を使って書き換えてください。
function concatAll() {
let result = "";
for (let i = 0; i < arguments.length; i++) {
result += arguments[i];
}
return result;
}
console.log(concatAll("に", "ほ", "ん")); // => "にほん"
いいですね！では、前回の 練習問題1 を ...rest で書き換えた解答例を示しますね。
練習問題1（解答例）
// arguments を使った元のコード
function concatAll() {
let result = "";
for (let i = 0; i < arguments.length; i++) {
result += arguments[i];
}
return result;
}
// ...rest を使った書き換え
function concatAll(...args) {
return args.join("");
}
console.log(concatAll("に", "ほ", "ん")); // => "にほん"
ポイント
...argsで「渡されたすべての引数」を配列として受け取れる。- 配列なので
join("")をそのまま使える。 - ループ処理が不要になり、コードがシンプルで読みやすい。
次は 練習問題2（最大値を求める関数） を ...rest で書き換えてください。
練習問題 2
次の関数は arguments を使って、渡された数値の最大値を返しています。
これを ...rest を使って書き換えてください。
function maxValue() {
let max = -Infinity;
for (let i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
console.log(maxValue(3, 7, 2, 9)); // => 9
よし！では 練習問題2 の解答例を見ていきましょう。
練習問題2（解答例）
function maxValue() {
let max = -Infinity;
for (let i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
console.log(maxValue(3, 7, 2, 9)); // => 9
// ...rest を使った書き換え
function maxValue(...nums) {
return Math.max(...nums);
}
console.log(maxValue(3, 7, 2, 9)); // => 9
ポイント
...numsで引数を配列として受け取れる。Math.maxは配列をそのまま渡せないので、...numsとスプレッド展開して渡す。- ループ処理が不要になり、コードがシンプルに。
次は 練習問題3（最初の引数を名前、残りをスコアとして平均点を計算する関数） を ...rest で書き換えてください。
練習問題 3
次の関数は arguments を使って、最初の引数を「名前」、残りを「スコア」として平均点を計算しています。
これを ...rest を使って書き換えてください。
function report() {
const name = arguments[0];
let sum = 0;
for (let i = 1; i < arguments.length; i++) {
sum += arguments[i];
}
const avg = sum / (arguments.length - 1);
return `${name}さんの平均点は ${avg}`;
}
console.log(report("山田", 80, 90, 70)); // => 山田さんの平均点は 80
練習問題3（解答例）
// ...rest を使った書き換え
function report(name, ...scores) {
const sum = scores.reduce((a, b) => a + b, 0);
const avg = scores.length ? sum / scores.length : 0;
return `${name}さんの平均点は ${avg}`;
}
console.log(report("山田", 80, 90, 70)); // => 山田さんの平均点は 80
console.log(report("佐藤")); // => 佐藤さんの平均点は 0
ポイント
function report(name, ...scores)とすることで、- 最初の引数は
nameに直接入る - 残りの引数は配列
scoresにまとめて入る
- 最初の引数は
- 配列なので
reduceやlengthがそのまま使える - 引数が1つ（名前だけ）の場合でもエラーにならないように、
scores.lengthをチェックして平均を計算