【Use the Rest Parameter with Function Parameters】フリーコードキャンプを日本語で解説!

フリーコードキャンプ

おいーす、もりたけです。

フリーコードキャンプを日本語で解説!の第118弾です。

JavaScript Algorithms and Data Structures Certification (300 hours)の中の、

Introduction to the ES6 Challengesの中の、

Use the Rest Parameter with Function Parameters

です。

さっそく見ていきましょう。

まずは本文から。

In order to help us create more flexible functions, ES6 introduces the rest parameter for function parameters. With the rest parameter, you can create functions that take a variable number of arguments. These arguments are stored in an array that can be accessed later from inside the function.

Check out this code:

function howMany(…args) {
  return “You have passed ” + args.length + ” arguments.”;
}
console.log(howMany(0, 1, 2)); // You have passed 3 arguments.
console.log(howMany(“string”, null, [1, 2, 3], { })); // You have passed 4 arguments.

The rest parameter eliminates the need to check the args array and allows us to apply map()filter() and reduce() on the parameters array.

 


Modify the function sum using the rest parameter in such a way that the function sum is able to take any number of arguments and return their sum.


 

 

解説していきます。

今回はrestパラメータについてです。

restパラメータを使うと、引数の数が変わっても対応できる関数を作成することができます。

配列を引数に取れるというイメージですね。

例をみてみましょう。

function howMany(…args) {
  return “You have passed ” + args.length + ” arguments.”;
}
console.log(howMany(0, 1, 2)); // You have passed 3 arguments.
console.log(howMany(“string”, null, [1, 2, 3], { })); // You have passed 4 arguments.
restパラメーターによって、配列argsを確認する必要がなくなり、パラメーター配列にmap()、filter()、reduce()を適用する事ができます。map()、filter()、reduce()メソッドについては復習しておきましょう!
では課題を見てみましょう。
関数sumが任意の数の引数を取り、その合計を返すことができるように、restパラメーターを使って関数sumを変更しろ。という課題です。
まず、reduce()メソッドの復習をしておきます。
reduceメソッドは配列に使えるメソッドでこのように書きます。
配列.reduce(function(累積値, 要素) {
 処理の中身
});
第1引数の累積値には配列要素を順番に処理していった値が格納され、第2引数の「要素」は現在処理されている配列要素が格納されます。
[1,2,3,4].reduce(function(a , b){
  return a + b ;
});
は1から4の合計となり10をかえします。
因みに、これをアロー関数を使って書くとこうなります。
[1,2,3,4].reduce((a , b) => a + b);
さて、reduce関数の復習は終わりです。
今回はもともとあるコードをrestパラメータを使って書きなおすという内容でした。
const sum = (x, y, z) => {
  const args = [x, y, z];
  return args.reduce((a, b) => a + b, 0);
}
このように元のコードでは引数を関数の中でargsと宣言しているのがわかるかと思います。
これをrestパラメータを使えば省くことができますね。
答えはこうです。
const sum = (…args) => {
  return args.reduce((a, b) => a + b,0);
}
console.log(sum(1, 2, 3)); // 6
という事で今回はrestパラメータについて学びました。
では次回!
タイトルとURLをコピーしました