お問い合わせ
お問い合わせ
ホーム > JavaScript > JavaScriptのconcat()とは？配列を結合する方法

JavaScriptのconcat()とは？配列を結合する方法

JavaScript
複数のブロック状の要素がつながって1つの配列になる様子を表現したビジュアル
配列同士が結合されて1つにまとまるイメージを表現したアイキャッチ画像

JavaScriptのconcat()は、複数の配列や値を結合して新しい配列を作るメソッドです。
元の配列を変更せずに、新しい配列として結果を返す点が特徴です。

配列操作の基本として頻繁に使われるため、正しい使い方を理解しておくことが重要です。

concat()とは

concat()は、配列同士や値を結合して、新しい配列を返すメソッドです。

const arr1 = [1, 2];
const arr2 = [3, 4];

const result = arr1.concat(arr2);

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

このとき、arr1とarr2は変更されません。

基本構文

配列.concat(結合する要素1, 結合する要素2, ...)
  • 配列同士を結合できる
  • 値（数値・文字列など）も結合できる
  • 複数の要素を同時に結合できる

配列同士を結合する

複数の配列をつなげる最も基本的な使い方です。

const arr1 = ["A", "B"];
const arr2 = ["C", "D"];

const result = arr1.concat(arr2);

console.log(result); // ["A", "B", "C", "D"]

値を追加する

配列だけでなく、単体の値も結合できます。

const arr = [1, 2];

const result = arr.concat(3, 4);

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

複数の配列・値を同時に結合する

concat()は複数の引数を受け取れます。

const arr1 = [1];
const arr2 = [2];
const arr3 = [3];

const result = arr1.concat(arr2, arr3, 4);

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

元の配列は変更されない（重要）

concat()は非破壊的なメソッドです。
元の配列は変更されず、新しい配列が返されます。

const arr1 = [1, 2];
const arr2 = [3, 4];

const result = arr1.concat(arr2);

console.log(arr1); // [1, 2]
console.log(result); // [1, 2, 3, 4]

配列を直接変更したい場合は、別の方法を検討する必要があります。

配列の中に配列を入れる場合

concat()は基本的に1階層だけ展開されます。

const arr1 = [1, 2];
const arr2 = [[3, 4]];

const result = arr1.concat(arr2);

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

配列の中の配列は、そのまま要素として扱われます。

スプレッド構文との違い

concat()と似た処理は、スプレッド構文でも実現できます。

const arr1 = [1, 2];
const arr2 = [3, 4];

const result = [...arr1, ...arr2];

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

違いのポイント

  • concat()：メソッドとして書く
  • スプレッド構文：より簡潔に書ける
  • どちらも元の配列は変更しない

用途に応じて使い分けることが重要です。

よくある間違い

再代入を忘れる

concat()は新しい配列を返すため、再代入しないと結果が反映されません。

const arr = [1, 2];

arr.concat(3);

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

正しい書き方：

const arr = [1, 2];

const result = arr.concat(3);

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

concat()が活躍する場面

  • 複数の配列をまとめたいとき
  • 元の配列を変更したくないとき
  • データを安全に結合したいとき

特に、状態を保持したまま新しいデータを作る場面で役立ちます。

まとめ

  • concat()は配列を結合するメソッド
  • 元の配列は変更されない（非破壊）
  • 配列・値・複数要素をまとめて結合できる
  • スプレッド構文でも同様の処理が可能

配列操作の基礎として、確実に押さえておきたいメソッドの一つです。

関連記事