💭
【Javascript初心者】スプレッド構文を簡単に1文で理解する
スプレッド構文の使い方が初心者の頃はよく分かっておらず、Webで調べてみても難しい説明ばかりでなかなか理解が進まなかった記憶があるので、
簡単な文言を使って１行でスプレッド構文の使い方を説明したいと思い、記事にしました。
解説
スプレッド構文を1行で説明すると、
配列やオブジェクトの外側の括弧 ( [], {} ) を取り除くことです。
具体的に説明すると、arrと[...arr]は同じ配列を表し、objと{...obj}は同じオブジェクトを表すことになります。
// 配列の場合
const arr = [1, 2, 3];
console.log(arr); // [1, 2, 3]
console.log([ ...arr ]); // [1, 2, 3]
// オブジェクトの場合も同様
const obj = { a: 1, b: 2 };
console.log(obj); // { a: 1, b: 2 }
console.log({ ...obj }); // { a: 1, b: 2 }
これだけ見ても、だからどうしたと思うかもしれませんが、
これを駆使することで以下の操作が可能になります
// 配列の末尾に要素を追加する
const arr = [1, 2, 3];
console.log([ ...arr, 4, 5 ]); // [1, 2, 3, 4, 5]
// オブジェクトのプロパティを追加する
const obj = { a: 1, b: 2 };
console.log({ ...obj, c: 3 }); // { a: 1, b: 2, c: 3 }
// オブジェクトのプロパティを上書きする
const obj = { a: 1, b: 2 };
console.log({ ...obj, a: 3 }); // { a: 3, b: 2 }
さいごに
スプレッド構文の使い方について、みなさんの理解の助けになれば幸いです。
詳しい内容は別の方の記事に譲りたいと思います。
以下の記事が個人的にはとてもわかりやすく詳細に書かれていたのでお勧めです。
Discussion