【JavaScript】concat()の基本! 配列や文字列を簡単に結合・コピーする方法

JavaScriptのconcat()メソッドは、配列や文字列の結合に役立つ強力なツールです。この記事では、その基本的な使い方から応用例までを詳しく解説しました。concat()を使えば、データの結合や変更を安全かつ効率的に行えます。

「concat()」の基本的な使い方

「concat()」とは？

JavaScriptには配列や文字列を結合するための便利なメソッド、concat()が用意されています。concat()は元の配列や文字列を変更せず、新しく結合された配列や文字列を生成して返します。

例:

let fruits1 = ["apple", "banana"];
let fruits2 = ["cherry", "date"];
let combinedFruits = fruits1.concat(fruits2);
console.log(combinedFruits);  // ["apple", "banana", "cherry", "date"]

「concat()」の使用例4つ

複数の配列を結合する

let array1 = [1, 2];
let array2 = [3, 4];
let array3 = [5, 6];
let result = array1.concat(array2, array3);
console.log(result);  // [1, 2, 3, 4, 5, 6]

一つのconcat()メソッドで複数の配列を一度に結合することができます。

文字列を結合する

let str1 = "Hello, ";
let str2 = "world!";
let greeting = str1.concat(str2);
console.log(greeting);  // "Hello, world!"

concat()は文字列にも使用でき、簡単に文字列を結合することができます。

配列と値を結合する

let numbers = [1, 2, 3];
let result = numbers.concat(4, 5);
console.log(result);  // [1, 2, 3, 4, 5]

単一の値と配列を結合することも可能です。

二次元配列を結合する

let outerArray1 = [[1, 2], [3, 4]];
let outerArray2 = [[5, 6]];
let combinedArrays = outerArray1.concat(outerArray2);
console.log(combinedArrays);  // [[1, 2], [3, 4], [5, 6]]

二次元配列もconcat()メソッドで結合することができます。

「concat()」と「spread構文」

「spread構文」とは？

「spread構文」は...という記号で、配列やオブジェクトを展開する時に使われるES6の機能です。

例:

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

「concat()」と「spread構文」の違い

concat()メソッドと「spread構文」の主な違いは、記述方法と使い方にあります。しかし、結果としては同じような動作をします。

例:

// concat()
let array1 = [1, 2];
let array2 = array1.concat([3, 4]);　 // [1, 2, 3, 4]

// spread構文
let array3 = [1, 2];
let array4 = [...array3, 3, 4];　 // [1, 2, 3, 4]

「concat()」を使用する際の注意点

元のデータは変更されない

concat()は元のデータを変更しない点を理解することが重要です。

let original = [1, 2];
let combined = original.concat([3, 4]);
console.log(original);  // [1, 2]

「concat()」の意味や使い方・使用例まとめ

concat()メソッドは、配列や文字列を簡単に結合するための非常に便利なツールです。元のデータを変更せずに新しいデータを返す特性も持っています。初心者にとっては、データの結合やコピーを行う際の基本的なツールとして覚えておくと良いでしょう。