Array.prototype.concat()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

concat()Array インスタンスのメソッドで、2 つ以上の配列を結合するために使用します。 このメソッドは既存の配列を変更せず、新しい配列を返します。

試してみましょう

const array1 = ["a", "b", "c"];
const array2 = ["d", "e", "f"];
const array3 = array1.concat(array2);

console.log(array3);
// Expected output: Array ["a", "b", "c", "d", "e", "f"]

構文

js
concat()
concat(value1)
concat(value1, value2)
concat(value1, value2, /* …, */ valueN)

引数

value1, …, valueN 省略可

新しい配列に連結する配列や値です。 すべての valueN 引数が省略された場合、 concat は呼び出された既存の配列のシャローコピーを返します。 詳しくは下記の解説をお読みください。

返値

新しい Array インスタンス。

解説

concat メソッドは新しい配列を作成します。この配列には、まず、このメソッドが名付けられたオブジェクトの要素が入ります。それから、それぞれの引数に対して、その値が配列に追加されます。通常のオブジェクトやプリミティブの場合、引数自体が最終的な配列の要素になります。配列や 配列風のオブジェクトで Symbol.isConcatSpreadable プロパティを真値に設定している場合、各引数の要素は独立して最終的に配列に追加されます。 concat メソッドは入れ子になった配列の引数に再帰的にアクセスすることはありません。

concat()コピーメソッドです。 this や引数として与えられた配列を変更せず、代わりに元の配列の要素と同じ要素を含むシャローコピーを返します。

concat() メソッドは、元の配列のいずれかが疎配列であった場合には空のスロットを維持します。

concat() メソッドは汎用的です。 this 値は他の引数と同じように扱われます(ただし、先にオブジェクトに変換されます)。つまり、素のオブジェクトは直接結果の配列に追加され、 @isConcatSpreadable を持つ配列風オブジェクトは結果の配列に展開されます。

2 つの配列の連結

以下のコードは 2 つの配列を連結させます。

js
const letters = ["a", "b", "c"];
const numbers = [1, 2, 3];

const alphaNumeric = letters.concat(numbers);
console.log(alphaNumeric);
// results in ['a', 'b', 'c', 1, 2, 3]

3 つの配列の連結

以下のコードは 3 つの配列を連結させます。

js
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];

const numbers = num1.concat(num2, num3);

console.log(numbers);
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]

配列に値を連結

以下のコードは配列に値を連結させます。

js
const letters = ["a", "b", "c"];

const alphaNumeric = letters.concat(1, [2, 3]);

console.log(alphaNumeric);
// results in ['a', 'b', 'c', 1, 2, 3]

ネストした配列の連結

以下のコードはネストした配列同士を連結させます。また、元の配列からの参照を保持しています。

js
const num1 = [[1]];
const num2 = [2, [3]];

const numbers = num1.concat(num2);

console.log(numbers);
// results in [[1], 2, [3]]

// num1 の最初の要素を変更する
num1[0].push(4);

console.log(numbers);
// results in [[1, 4], 2, [3]]

配列風オブジェクトを Symbol.isConcatSpreadable で連結

concat は既定ですべての配列風オブジェクトを配列として扱いません。 Symbol.isConcatSpreadable が真値(true など)に設定された場合のみ、配列として扱います。

js
const obj1 = { 0: 1, 1: 2, 2: 3, length: 3 };
const obj2 = { 0: 1, 1: 2, 2: 3, length: 3, [Symbol.isConcatSpreadable]: true };
console.log([0].concat(obj1, obj2));
// [ 0, { '0': 1, '1': 2, '2': 3, length: 3 }, 1, 2, 3 ]

疎配列に対する concat()

元の配列のいずれかが疎配列の場合、結果の配列も疎配列になります。

js
console.log([1, , 3].concat([4, 5])); // [1, empty, 3, 4, 5]
console.log([1, 2].concat([3, , 5])); // [1, 2, 3, empty, 5]

配列ではないオブジェクトに対する concat() の呼び出し

もし this の値が配列でなければ、オブジェクトに変換され、 concat() の引数と同じように扱われます。この場合、返値は常に新しい素の配列になります。

js
console.log(Array.prototype.concat.call({}, 1, 2, 3)); // [{}, 1, 2, 3]
console.log(Array.prototype.concat.call(1, 2, 3)); // [ [Number: 1], 2, 3 ]
const arrayLike = {
  [Symbol.isConcatSpreadable]: true,
  length: 2,
  0: 1,
  1: 2,
  2: 99, // length が 2 なので concat() からは無視される
};
console.log(Array.prototype.concat.call(arrayLike, 3, 4)); // [1, 2, 3, 4]

仕様書

Specification
ECMAScript® 2025 Language Specification
# sec-array.prototype.concat

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
concat

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報