いくつでも受け取る引数

01 / 05

引数の数が決まらないことがある

合計を出す関数を作るとき、足す数がいくつか先に決まっているとはかぎらないよね。

function total(a, b, c) と書くと3つ専用になってしまう。2つで呼ぶと足りないぶんが undefined になり、4つで呼ぶと4つ目は無視される。

function total(a, b, c) {  return a + b + c;}console.log(total(1, 2));

実行結果

NaN

02 / 05

受け取る側に `...` を書く

引数の名前の前に ... を書くと、渡されたぶんを全部まとめて受け取る。この書き方を残余引数と呼ぶよ。「残りぜんぶ」という意味だね。

受け取った中身は配列になっている。だから .length も forEach もそのまま使えるよ。

function collect(...numbers) {  console.log(numbers);}collect(1, 2, 3);

実行結果

[1, 2, 3]

03 / 05

配列として処理する

中では配列なので、これまでどおり for で回せる。何個渡されても同じコードで足せるよ。

渡す数を変えて呼んでも、関数のほうは1行も直さなくていい。個数を気にしなくてよくなったんだ。

function total(...numbers) {  let sum = 0;  for (let i = 0; i < numbers.length; i++) {    sum += numbers[i];  }  return sum;}console.log(total(10, 20));console.log(total(1, 2, 3, 4));

実行結果

30
10

04 / 05

広げると集める

同じ ... なのに、意味が2つあるように見えるよね。実は覚え方は1つでいい。

値の側に書けば広げる … [...fruits, "もも"]
受け取る側に書けば集める … function total(...numbers)

ばらばらにするのか、まとめるのか。書く場所で向きが決まる、と覚えておこう。

function collect(...numbers) {  return numbers;}const nums = [1, 2];console.log([...nums, 3]);console.log(collect(1, 2, 3));

実行結果

[1, 2, 3]
[1, 2, 3]

05 / 05

ふつうの引数と組み合わせる

ふつうの引数と混ぜてもいい。前から順に割りあてられて、あまりが全部 ... のほうに入るよ。

ただし ... はいちばん最後にしか書けない。「残り」なので、そのうしろに引数を置けないんだ。

それじゃあ、いくつでも受け取る関数を作ってみよう。

function introduce(name, ...likes) {  console.log(name);  console.log(likes);}introduce("ゆい", "りんご", "みかん");

実行結果

ゆい
["りんご", "みかん"]