分割代入を理解する

モダンJavaScriptでよく出てくる分割代入についておさらいしていきます。
スプレット構文もよく使う文法なので合わせて確認しておきましょう！！

分割代入とは

分割代入とは、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することができるJavaScriptの式です。
基本動作は下記です。

mdnより引用

let a, b, rest;
[a, b] = [10, 20];


console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: Array [30,40,50]

こんなこともできます。

const a: number[] = [1,2,3,4,5];

const [ b, c ] = a; // 分割代入

console.log(b); // 1
console.log(c); // 2

オブジェクトの分割代入

mdnより引用

const user = {
    id: 42,
    isVerified: true
};

const {id, isVerified} = user; // 分割代入

console.log(id); // 42
console.log(isVerified); // true

これはReactのPropsを渡す際などにもよく使われます。

// Button.tsx
type Props = {
  color: "SKY_BLUE" | "WHITE";
  size: "SMALL" | "BIG";
  path: string | UrlObject;
  children: ReactNode;
  onClick?: () => void;
}

export const Button: VFC<Props> = memo((props) => {
  const { color, path, children, size, style, onClick } = props; // 分割代入

  return (
    null;
  );
});

お疲れさまでした！