정의 및 사용 방법

배열의 concat() 함수는
하나 이상의 배열 또는 값들을 전달된 순서대로 합쳐서(concatenate, 사슬처럼 잇다) 새로운 배열을 만듭니다.

이 함수는 여러 배열을 하나로 병합하거나, 배열과 값을 함께 이어 붙일 때 유용합니다.

특징

  • 여러 배열을 원하는 순서대로 이어서 합칠 수 있습니다.
  • 배열에 하나 이상의 값을 순서대로 추가할 수 있습니다.
  • 원본 배열은 변경되지 않으며, 합친 결과를 담은 새로운 배열을 반환합니다.
  • 각 배열의 요소는 전달된 순서대로 이어 붙여져 병합된 새로운 배열이 만들어집니다.

기본 예제

JavaScript 
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

// 두 개의 배열 합치기(연결하기)
const twoConcatarray = array1.concat(array2);
console.log(twoConcatarray); // 출력: [1, 2, 3, 4, 5, 6]

// 세 개의 배열 합치기(연결하기)
const array3 = [6, 7, 8];
const threeConcatarray = array1.concat(array2, array3);
console.log(threeConcatarray); // 출력: [1, 2, 3, 4, 5, 6, 6, 7, 8]

// 배열과 하나 이상의 값 합치기(연결하기)
const arrayWithValues = array1.concat(9, 10, 11);
console.log(arrayWithValues); // 출력: [1, 2, 3, 9, 10, 11]

구문

JavaScript 
arr.concat(value1[, ...[, valueN]])

arr은 concat() 함수를 적용할 배열입니다.

매개변수

concat() 함수의 매개변수 설명
value1, valueN 새 배열로 연결할 배열 및/또는 값입니다.
배열에 연결할 하나 이상의 배열 및/또는 값을 지정할 수 있습니다.

반환 값

매개변수로 지정된 배열들을 순서대로 하나씩 연결하여 새로운 하나의 Array 객체로 반환합니다.

예제

예제로 살펴보겠습니다.

두 배열 연결하기

JavaScript 
// 두 개의 배열을 만듭니다.
const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];

// concat() 함수를 사용하여 두 배열을 합칩니다.
const concatenatedArray = arr1.concat(arr2);
console.log(concatenatedArray); // 출력: [1, 2, 3, 3, 4, 5]

세 배열 연결하기

JavaScript 
// 세 개의 배열을 만듭니다.
const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];
const arr3 = [7, 8, 9];

// concat() 함수를 사용하여 세 배열을 합칩니다.
const concatenatedArray = arr1.concat(arr2, arr3);
console.log(concatenatedArray); // 출력: [1, 2, 3, 3, 4, 5, 7, 8, 9]

값을 배열에 연결하기

JavaScript 
// concat() 함수에 적용할 배열을 만듭니다.
const arr1 = ["a", "b", "c"];

// concat() 함수를 사용하여 배열에 값을 합칩니다.
const concatenatedArray = arr1.concat(1);
console.log(concatenatedArray); // 출력: ['a', 'b', 'c', 1]

concat() 함수는 배열의 요소를 그대로 연결하기 때문에 중복이 발생할 수 있습니다. 중복을 제거하려면 다음과 같은 방법을 사용할 수 있습니다.

  • Set() 객체 사용
  • filter() 함수를 사용

Set() 객체 사용

Set() 객체는 중복되지 않은 요소만 저장할 수 있는 컬렉션입니다. concat() 함수로 합친 배열을 Set() 객체에 저장한 다음, 다시 스프레드(...) 구문을 사용해서 배열로 변환합니다.

JavaScript 
// 두 개의 배열을 만듭니다.
const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];

// concat() 함수를 사용하여 두 배열을 합칩니다.
const concatenatedArray = arr1.concat(arr2);

// 중복 항목을 제거하기 위해 Set을 사용합니다.
// 스프레드(...) 구문을 사용해서 배열로 변환합니다.
const uniqueArray = [...new Set(concatenatedArray)];
console.log(uniqueArray); // 출력: [1, 2, 3, 4, 5]

filter() 함수를 사용

filter() 함수를 사용하여 concat() 함수로 합친 배열의 요소를 하나씩 확인하고 중복되는 요소는 제거합니다.

JavaScript 
// 두 개의 배열을 만듭니다.
const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];

// concat() 함수를 사용하여 두 배열을 합칩니다.
const concatenatedArray = arr1.concat(arr2);

// filter() 함수를 사용하여 중복 항목을 제거합니다.
const uniqueArray = concatenatedArray.filter((item, index) => {
    return concatenatedArray.indexOf(item) === index;
});

console.log(uniqueArray); // 출력: [1, 2, 3, 4, 5]

코드 부연설명
배열에서 filter() 함수는 배열의 요소를 순회하면서 콜백 함수를 사용하여 원하는 조건에 따라 필터링하는 함수입니다. 필터링된 배열을 반환합니다.

코드 부연설명
배열에서 indexOf() 함수는 배열에서 인수로 전달된 요소를 찾아 첫 번째로 검색된(등장한) 요소의 인덱스를 반환하는 함수입니다.

명세서

concat() 함수에 대한 명세서 사양
명세서 사양
concat() ECMAScript Language Specification
#sec-array.prototype.concat

브라우저 호환성

concat() 함수에 대한 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
concat() 1 12 1 1

참고문헌

같이 보기