자바스크립트 concat() 함수 – 배열 합치기 및 중복 제거

`Array.prototype.concat()` 사용법

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]

concat() 함수는 두 개 이상의 배열을 연결하여(합쳐서) 이전 배열의 끝에 값들을 추가합니다.
이 함수의 반환 값은 연결되어 병합된 배열입니다.
concat() 함수는 배열의 요소를 그대로 연결하기 때문에 중복되는 요소를 제거하지 않습니다.
concat() 함수는 배열의 요소를 그대로 연결하기 때문에 중복이 발생할 수 있기 때문에 중복을 제거하는 방법에 대해서도 알아봅니다.

concat() 함수의 형식은 다음과 같습니다.

구문

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() 함수는 배열에서 인수로 전달된 요소를 찾아 첫 번째로 검색된(등장한) 요소의 인덱스를 반환하는 함수입니다.