残余引数とは、関数の最後の引数に 『...』を付けると、残りの引数を配列のにすることです。

スプレッド演算子と非常に似ていますが、スプレッド演算子は全てのオブジェクトや配列を取り出すのに対して、残余引数は残りの引数を配列にします。

例えば、次のコードがあるとします。

let company = {
  name: "ABCO商事",
  staff: ["田中", "佐藤", "鈴木"],
  office: ["東京", "埼玉"],
  department: { sales: { one: "営業部1課", two: "営業部2課" } },
}

let newStaff = ["伊藤", "渡辺"]

company オブジェクトの staff と、newStaff をスプレッド演算子で繋げてみます。

let staffList = [...company.staff, ...newStaff]

console.log(staffList);で確認すると、

image2

スタッフリストが完成しました。

スタッフリストで残余引数を使ってみます。

let [member1, member2, ...members] = staffList

member1 が『田中』、member2 が『佐藤』、『鈴木』以降が配列になっているはずです。

console.log(member1, member2, members);確認してみましょう。

image3

狙い通りになりました。

気をつけていただきたいのは、『...』は、最後に入力しないといけません。

例えば、以下のコードですと、

let [member1, ...members, member2] = staffList;

image4

『Rest element は、最後にしないといけない』と指摘されます。

ブログ一覧