こんにちは、フローです。
今回は、JavaScriptの重要な配列メソッド、
.concat()について学んでいきましょう。
このメソッドは、配列の操作をする際に非常に便利なツールです。
役割、使い方、注意点などを一緒に見ていきましょう。
Array.prototype.concat()とは
まずは、.concat()が何なのか、
簡単に説明します。
これは、元の配列に新しい配列を「連結」（つなげる）するために使用するメソッドです。
let array1 = ['りんご', 'みかん'];
let array2 = ['メロン', 'スイカ'];
let array3 = array1.concat(array2);
console.log(array3); // ['りんご', 'みかん', 'メロン', 'スイカ']
上記のコードでは、
array1とarray2がconcat()メソッドによって連結され、新しい配列array3が生成されています。
どんな時に使うのか
それでは、具体的にどんな場面で
Array.prototype.concat()を使うのでしょうか。ここでいくつかの例を挙げてみます。
異なるリストを結合したいとき
例えば、ある学校のクラスAとクラスBの生徒名簿を結合する場合などです。
配列のコピーを作成したいとき
元の配列に影響を与えずに新しい配列を作りたい場合にも使用します。
引数に何も与えないでconcat()を呼び出すと、
元の配列のシャローコピー（浅いコピー）が作成されます。
既存の配列に新しい要素を追加したいとき
新しい要素を追加した新しい配列を作成することができます。
パターン3つ
次に、Array.prototype.concat()の使い方のパターンを3つ紹介します。
1：2つの配列を連結する
let classA = ['田中', '佐藤', '鈴木'];
let classB = ['山田', '中村', '伊藤'];
let allStudents = classA.concat(classB);
console.log(allStudents); // ['田中', '佐藤', '鈴木', '山田', '中村', '伊藤']
2：配列のコピーを作る
let copiedArray = originalArray.concat();
console.log(copiedArray); // ['りんご', 'みかん', 'バナナ']
3：既存の配列に新しい要素を追加する
let fruits = ['りんご', 'みかん'];
let moreFruits = fruits.concat('バナナ');
console.log(moreFruits); // ['りんご', 'みかん', 'バナナ']
Array.prototype.concat()の注意点
一見、簡単に見えるconcat()メソッドですが、
使う際にはいくつか注意点があります。
concat()は元の配列を変更しない
このメソッドは新しい配列を返しますが、
元の配列は変更しません。
元の配列に変更を加えるためには、別のメソッドを使用する必要があります。
オブジェクトの参照はコピーされる
concat()で配列をコピーすると、
オブジェクトの参照がコピーされます。
そのため、新しい配列でオブジェクトを変更すると、
元の配列のオブジェクトも変更されます。
これは「シャローコピー」（浅いコピー）と呼ばれる現象です。
以上がArray.prototype.concat()メソッドの基本的な使い方と注意点です。
このメソッドをうまく使うことで、配列の操作が一段とスムーズになります。
まとめ
今回はJavaScriptの配列操作メソッドであるconcat()について学んできました。
このメソッドは、配列の連結を簡単に行うことができる便利なツールです。
しかし、使う際には元の配列を変更しないこと、
そしてシャローコピーの性質を理解しておくことが重要です。
これからも一緒にJavaScriptの探検を楽しみましょう！次回もお楽しみに！
レッツチャレンジ！
最近のコメント