【JavaScript入門】concat()で配列・文字列を結合やコピーする方法

こんにちは！エンジニアの中沢です。

JavaScriptには配列や文字列を結合するための「concatメソッド」があります。

配列を連結して新しい配列を作れるので、上手く活用してください。

この記事では、

・concatメソッドとは
・concatメソッドで配列の結合

という基本的な内容から、

・配列をコピーする方法
・concatメソッドで文字列の結合
・pushメソッドで配列に要素を追加する方法

などの応用的な使い方に関しても解説していきます。

今回はこれらの方法を覚えるために、concatメソッドのさまざまな使い方をわかりやすく解説します！

concatメソッドとは

concatメソッドは2以上の配列を結合して新しい配列を作るときに使います。

また、concatメソッドは配列だけでなく、文字列を結合することもできます。

concatメソッドで配列の結合

2つの配列を結合する方法

ここでは、concatメソッドで2つの配列を結合する方法を解説します。

concatメソッドは呼び出し元の配列の後ろに引数に指定した配列を追加します。

次のプログラムで確認してみましょう。

var array1 = ['sa', 'mu'];
var array2 = ['ra', 'i'];
var result = array1.concat(array2);

console.log(result);

実行結果：

sa,mu,ra,i

このようにして、2つの配列を結合することができました。

3つの配列を結合する方法

ここでは、concatメソッドで3つの配列を結合する方法を解説します。

concatメソッドの引数に追加する配列を指定します。

次のプログラムで確認してみましょう。

var array1 = ['sa', 'mu'];
var array2 = ['ra', 'i'];
var array3 = ['ju', 'ku'];
var result = array1.concat(array2, array3);

console.log(result);

実行結果：

sa,mu,ra,i,ju,ku

このようにして、3つの配列を結合することができました。

配列をコピーする方法

配列を普通にコピーできない理由

concatメソッドを使った配列のコピー方法について見ていきましょう！

配列のコピーと聞いて、次のようなコードをイメージする人もいるでしょう。

var arr1 = [1,2,3,4,5];
var arr2 = [];
  
arr2 = arr1;
  
console.log(arr1);
console.log(arr2);

実行結果

[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5]

この例では、配列「arr1」を別の配列「arr2」に格納していますよね。

実行結果を見ると配列の中身がコピーされて同じ配列が作られたように見えます。

しかし、配列というのは「参照型」のデータなので、値がコピーされていてるのではなく値が保存されているメモリの場所を共有しているだけなのです。

そのため、次のようなコードを書くとおかしな現象になります。

arr2.push(6);

console.log(arr1);
console.log(arr2);

実行結果

[1, 2, 3, 4, 5, 6]
[1, 2, 3, 4, 5, 6]

これは、配列「arr2」にだけ新しい値「6」を追加しています。

しかしながら、何も操作していない配列「arr1」も同じように値が変化しているのです。

理由は簡単で、どちらの配列も値が保存されている場所を参照しているだけなので、どちらかの配列でデータを変更すれば両方とも変化してしまうわけです。

concatメソッドで配列を完全コピーする方法

さて、配列は普通にコピーしようとするとおかしな挙動をすることが分かりましたね。

それでは、どうやってコピーすれば良いのでしょうか？

実は、これまで利用してきた「concatメソッド」を使うと、この問題を簡単に解決できるのです！

次のサンプル例を見てください！

var arr1 = [1,2,3,4,5];  
var arr2 = [];
  
arr2 = arr1.concat();
arr2.push(6);

console.log(arr1);
console.log(arr2);

実行結果

[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5, 6]

配列「arr2」へ別の配列をコピーするには、コピー元の「arr1」にconcat()を実行するだけで良いのです。

concatメソッドは2つの配列を結合して1つの配列にするメソッドでしたよね？

そのため、引数なしのconcatメソッドを実行すればコピー元の配列だけを新しく配列として返すので、結果的にコピーしているのと同じというわけです。

concatメソッドで文字列の結合

複数の文字列を結合する方法

concatメソッドは一般的な文字列を複数結合することも可能なので合わせてご紹介しておきます！

基本的な使い方はこれまでの配列を結合する方法と同じです。

次のサンプル例を見てください！

var str1 = '侍';
var str2 = 'エンジニア';

var result = str1.concat(str2);

console.log(result);

実行結果

侍エンジニア

この例では、2つの文字列を1つの文字列として結合して出力しているのが分かります。

結合したい文字列に対してconcat()を実行するときに、引数へ結合する文字列を指定します。

concatによる文字結合の速度について

文字列を大量に結合する場合においては、その実行パフォーマンス（速度）についても検討する必要があります。

実は、文字列の結合で最も速くシンプルな実装は「+」で結合することです。

例えば、「’エン’ + ‘ジニア’」のように文字列と文字列を「+」演算子で結合することはパフォーマンス面から見ても良好になる場合が多いのです。

この速度検証について、concatやjoinなど他のメソッドとの速度比較も含めた結果を次の記事で解説しているのでぜひ参考にしてみてください！

pushメソッドで配列に要素を追加する方法

ここでは、pushメソッドで配列に要素を追加する方法を解説します。

pushメソッドは配列の末尾に要素を追加するために使用します。

次のプログラムで確認してみましょう。

var items = [1, 2, 3, 4];

items.push(5, 6, 7, 8);

console.log(items);

実行結果：

1,2,3,4,5,6,7,8

このようにして、配列の末尾に要素を追加することができました。

まとめ

いかがでしたか？

今回はconcatメソッドで結合する方法を解説しました。

concatメソッドは配列や文字列を結合できるので、ぜひ活用してくださいね。

もし、配列や文字列を結合する方法を忘れてしまったらこの記事を確認してください！