はじめてのJavaScript：初心者の学び場（スプレッド構文編）

これは自分がつまずかないように残すメモです。

今回はスプレッド構文について学びました。

スプレッド構文とは

配列やオブジェクトなどの展開やコピーを行うための構文です。
JavaScriptで複数の値をまとめて扱う場面で非常に便利です。

配列におけるスプレッド構文

スプレッド構文を使用して、既存の配列の要素を展開して新しい配列を作成

const array1 = [1, 2, 3];
const array2 = [...array1, 4, 5, 6];

console.log(array2); // [1, 2, 3, 4, 5, 6]

この例では、array1 の要素が展開されて、array2 に結合されています

配列のコピー

スプレッド構文を使用して、配列のコピーを作成することができます。

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];

console.log(copiedArray); // [1, 2, 3]

この例では、originalArray の要素が展開されて新しい配列 copiedArray にコピーされています。

関数の引数としての使用

関数の引数としてスプレッド構文を使用することで、可変長の引数を扱うことができる。
配列の要素を関数の引数として展開します

function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
const result = sum(...numbers);

console.log(result); // 6

可変長の引数を受け取る関数を定義できる

function sum(...numbers) {
  return numbers.reduce((total, current) => total + current, 0);
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4, 5)); // 15

この例では、sum 関数は可変長の引数を受け取り、それらを合計して返しています。スプレッド構文を使用することで、関数に渡された引数が配列として扱われます。

オブジェクトにおけるスプレッド構文

複数のオブジェクトをマージして新しいオブジェクトを作成します。

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // { a: 1, b: 2, c: 3, d: 4 }

スプレッド構文の注意点

1. スプレッド構文は、浅いコピーを行います。つまり、配列やオブジェクト内の参照型の値は元の配列やオブジェクトと同じオブジェクトを参照しています。

2. スプレッド構文は、配列内の要素を展開して新しい配列を作成するため、元の配列の要素が変更されても影響を受けません

配列におけるスプレッド構文は、コードの可読性を向上させ、配列の操作を簡潔かつ効果的に行うための重要なツールですが、スプレッド構文は非常に便利ですが、適切な状況で適切に使用する必要があります。特に大規模なデータやパフォーマンスが重要な場合には、スプレッド構文の使用によるメモリ消費や処理速度に注意する必要があります。