【React初心者メモ】分割代入

分割代入とは

分割代入とは、配列やオブジェクトから値を取り出して、複数の変数に一気に代入できる書き方のことです。

配列の分割代入

通常：

const arr = [10, 20, 30];
const a = arr[0];  // 10
const b = arr[1];  // 20
const c = arr[2];  // 30

分割代入を使うと：

const [a, b, c] = [10, 20, 30];
console.log(a, b, c);  // 10 20 30

配列の一部だけ使うこともできます。

const [first, second] = [100, 200, 300];
console.log(first);  // 100
console.log(second); // 200

オブジェクトの分割代入

通常：

const obj = { name: "Alice", age: 25 };
const name = obj.name;  // "Alice"
const age = obj.age;    // 25

分割代入を使うと：

const { name, age } = { name: "Alice", age: 25 };
console.log(name, age);  // Alice 25

オブジェクトの一部だけ使うこともできます。

const { name } = { name: "Bob", age: 40 };
console.log(name);  // Bob

関数の引数での分割代入

関数の引数で{ name, age }と書くと、渡されたオブジェクトの中からnameとageを直接変数として取り出して使えます。

const greet = ({ name, age }) => {
  console.log(`こんにちは、${name}さん。年齢は${age}歳ですね。`);
};

const user = { name: "太郎", age: 30 };
greet(user);

デフォルト値もつけられます。

const greet = ({ name = "名無し", age = 0 } = {}) => {
  console.log(`こんにちは、${name}さん。年齢は${age}歳ですね。`);
};

greet({ name: "花子", age: 25 }); // ちゃんと値がある場合
greet();  // 引数なしでもエラーにならずデフォルト値が使われる