スプレッド構文パート1

CoddyのJavaScriptジャーニー「論理とフロー」セクションの一部 — レッスン 18/65。

スプレッド構文 (...) は、JSONにおいて多くのユースケースがあります。例えば、次のような操作を行う場合です：

const obj1 = {key1: "123"}
const obj2 = obj1
obj1.key1 = "456
console.log(obj2.key1)

出力はどうなりますか？

console.log(obj2.key1)
// 出力: "456"

驚かれるかもしれません！obj1だけを変更したのに、obj2も変更されています。

これは、オブジェクトを直接代入すると（obj2 = obj1）、コピーではなく参照が作成されるためです。両方の変数はメモリ内の同じオブジェクトを指しています。

ここでスプレッド演算子が役立ちます。実際のコピーを作成する方法を見てみましょう：

const obj1 = {key1: "123"};
const obj2 = {...obj1};
obj1.key1 = "456";
console.log(obj2.key1);
// 出力: "123"

スプレッド演算子は、新しいオブジェクトを作成し、元のオブジェクトからすべての列挙可能なプロパティを新しいオブジェクトにコピーします。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

チートシート

スプレッド構文 (...) は、参照ではなくオブジェクトのコピーを作成します：

// 参照（両方の変数が同じオブジェクトを指す）
const obj1 = {key1: "123"}
const obj2 = obj1
obj1.key1 = "456"
console.log(obj2.key1) // 出力: "456"

// スプレッド構文を使用したコピー
const obj1 = {key1: "123"}
const obj2 = {...obj1}
obj1.key1 = "456"
console.log(obj2.key1) // 出力: "123"

スプレッド構文は、元のオブジェクトからすべての列挙可能なプロパティを新しいオブジェクトにコピーします。

自分で試してみよう

このレッスンにはコードチャレンジは含まれていません。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。