JavaScriptの関数の引数に(...props)って書いてけど何やってんの？

rest parameter （可変長引数）

通常の関数は引数の数が決まっています。
JavaScriptでは引数の数に決まりがない関数も作れます。
引数の個数が決まっていない引数のことを 可変長引数 といいます。
JavaScriptでは可変長引数は rest parameter と呼びます。

実例 （Reactでよく見るやつ）

親コンポーネント

import Container from "./components/container";

export default function TopPage() {
  return (
    <Container height={100} width={100} bgColor="blue">
      This is Container
    </Container>
  );
}

子コンポーネント

const Container = ({ ...props }) => {
  return (
    <div
      style={{
        height: props.height,
        width: props.width,
        background: props.bgColor,
      }}
    >
      {props.children}
    </div>
  );
};

export default Container;

挙動 （配列）

受け取った rest parameter は 配列 になります。

function func(...props) {
  console.log(props);
}
func(1, 2, 3);

-> [ 1, 2, 3 ]

挙動 （複数の値 + 配列）

普通の引数と rest parameter を持つ関数も作れます。

function func(props1, ...props) {
  console.log(props1, props);
}
func(1, 2, 3);

-> 1 [ 2, 3 ]

挙動 （オブジェクト）

オブジェクトで受け取った rest parameter は オブジェクト になります。

function func({ ...props }) {
  console.log(props);
}
func({ a: 'A', b: 'B', c: 'C' });

-> { a: 'A', b: 'B', c: 'C' }

挙動 （複数の値 + オブジェクト）

普通の引数と rest parameter を持つ関数も作れます。

function func(props1, { ...props }) {
  console.log(props1, props);
}
func(1, { a: 'A', b: 'B' });

-> 1 { a: 'A', b: 'B' }

// 構文エラーになるコード
function func(...props, props1) {}
-> A rest parameter must be last in a parameter list.

NGパターン

残余引数を複数持たせることはできません。

// 構文エラーになるコード
function func(...props1, ...props2) {}

-> A rest parameter must be last in a parameter list.

必ず rest parameter が最後の引数でなければなりません

// 構文エラーになるコード
function func(...props, props1) {}

-> A rest parameter must be last in a parameter list.