【初心者向け】スプレット構文（...）とは？使用例と一緒にわかりやすく解説！

スプレット構文（...）とは？

Reactを学習中にスプレット構文というものを初めて知りました。
備忘録的に調べたことを残しておきます。

スプレット構文は、配列やオブジェクトの中身を「展開」するための記法です。
記号は「...」のドット3つで表されます。
。今回は、スプレット構文を使う場面ごとに具体的な例を紹介します。

---

使用例① コピーする

スプレット構文を使うと、既存のオブジェクトをコピーすることができます。

const drink = { name: "drink", size: "small" };

const coffee = { ...drink };
console.log(coffee);

出力結果①

{
    "name": "drink",
    "size": "small"
}

使用例② 上書きする

元のオブジェクトをコピーしつつ、特定のプロパティを上書きすることもできます。

const drink = { name: "drink", size: "small" };

const coffee = { ...drink, name: "コーヒー", size: "large" };
console.log(coffee);

出力結果②

{
    "name": "コーヒー",
    "size": "large"
}

使用例③ 新しいプロパティを追加する

const drink = { name: "drink", size: "small" };

const coffee = { ...drink, price: 500 };
console.log(coffee);

出力結果③

{
    "name": "drink",
    "size": "small",
    "price": 500
}

まとめ

スプレット構文（...）を使うことで、
オブジェクトや配列をコピーしたり、上書きしたり、新しいプロパティを追加したりすることができます。
普段Javaばかり触っていて知らないことも多いのでまたわからないことがあればまとめていきます。