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.

Array 인스턴스의 concat() 메서드는 두 개 이상의 배열을 병합하는 데 사용됩니다. 이 메서드는 기존 배열을 변경하지 않고, 새 배열을 반환합니다.

시도해보기

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(value0)
concat(value0, value1)
concat(value0, value1, /* …, */ valueN)

매개변수

valueN Optional

새 배열로 연결할 배열 및/또는 값입니다. 모든 valueN 매개변수가 생략된 경우, concat은 호출된 기존 배열의 얕은 복사본을 반환합니다. 자세한 내용은 아래 설명을 참조하세요.

반환값

새로운 Array 객체.

설명

concat 메서드는 새 배열을 만듭니다. 먼저 배열은 호출된 객체의 요소로 채워집니다. 그런 다음, 각 인자의 값이 배열에 연결됩니다. 일반 객체나 원시 값의 경우, 인자 자체가 최종 배열의 요소가 되고, Symbol.isConcatSpreadable 속성이 참 값으로 설정된 배열 또는 유사 배열 객체인 경우, 인자의 각 요소가 최종 배열에 독립적으로 추가됩니다. concat 메서드는 중첩된 배열 인자로 재귀하지 않습니다.

concat() 메서드는 복사 메서드입니다. 이 메서드는 이 배열 또는 인자로 제공된 배열을 변경하지 않는 대신, 원래 배열의 요소와 동일한 요소를 포함하는 얕은 복사본을 반환합니다.

concat() 메서드는 소스 배열 중 하나라도 희소 배열이 있다면 배열의 빈 슬롯을 보존합니다.

concat() 메서드는 범용 메서드입니다. this 값은 다른 인자와 동일한 방식으로 처리됩니다(객체로 먼저 변환된다는 점을 제외하면). 즉, 일반 객체는 결과 배열 바로 앞에 붙고, @@isConcatSpreadable이 참인 유사 배열 객체는 결과 배열에 전개됩니다.

예제

두 배열 연결

다음 예제는 두 배열을 연결합니다.

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

const alphaNumeric = letters.concat(numbers);
console.log(alphaNumeric);
// 결과는 ['a', 'b', 'c', 1, 2, 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);
// 결과는 [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);
// 결과는 ['a', 'b', 'c', 1, 2, 3]

중첩된 배열 연결

다음 코드는 중첩된 배열을 연결하고 참조 유지를 설명합니다.

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

const numbers = num1.concat(num2);

console.log(numbers);
// 결과는 [[1], 2, [3]]

// num1의 첫 번째 요소를 수정합니다.
num1[0].push(4);

console.log(numbers);
// 결과는 [[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 값이 배열이 아닌 경우, 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

같이 보기