JavaScript에서 배열을 병합하는 5가지 방법

for 루프 사용

배열에서 요소를 다른 배열로 병합하려면 먼저 모든 배열 요소를 반복합니다(루프를 돌아야 함).

루프 내에서 배열에서 각 요소를 검색한 다음 다른 배열에 삽입합니다.

const merge = (first, second) => {
  for(let i=0; i<second.length; i++) {
    first.push(second[i]);
  }
  return first;
}

이제 merge()함수를 호출하고 병합을 위한 인수로 두 개의 배열을 전달합니다.

merge([1,2,3], [4,5,6]);

 

3개의 배열을 병합하는 경우 다음과 같이 처리할 수 있습니다.

 

merge(merge([1,2,3], [4,5,6]), [7,8,9]);

 

for-loop를 사용하는 방법은 배열을 병합하기에 그리 좋은 방법은 아닙니다.

 

2. Spread연산자(...) 사용

ES6부터 ...(3개의 연속 점)을 스프레드 연산자로 사용하여 배열을 분해할 수 있습니다. 배열 리터럴( []) 내의 배열에서 스프레드 연산자를 사용하여 병합하는 방법습니다.

 

두 개의 배열 arr1, arr2을 정의하고 배열리터럴에서 스프레드 연산자( ... )를 사용하여 병합합니다 .

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const merged = [...arr1, ...arr2];
console.log(merged); // [1,2,3,4,5,6]
console.log(arr1); // [1,2,3]
console.log(arr2); // [4,5,6]

배열 arr1과 arr2가 병합되고 해당 요소가 new배열로 병합됩니다. arr1과 arr2 배열은 변경되지 않습니다.

두개 이상의 배열을 병합할 수 있고 방법은 같습니다.

 

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [7,8,9];
const merged = [...arr1, ...arr2, ...arr3];
console.log(merged); // [1,2,3,4,5,6,7,8,9]

 

3. concat() 메서드 사용

JavaScript Array객체 concat 메서드를 사용해 두 배열을 병합합니다.

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const merged = arr1.concat(arr2);
console.log(merged); // [1,2,3,4,5,6]
console.log(arr1); // [1,2,3]
console.log(arr2); // [4,5,6]

코드에서 concat()메서드를 사용하여 두 개의 배열을 병합합니다. 그러나 이렇게 하면 arr1에 arr2를 병합하면서 arr1배열 자체를 변경하는 것으로 잘못 이해할 수 있습니다. spread연산자를 사용한 것처럼 concat메서드는 병합하는 배열을 변경하지 않습니다. 모든 입력 배열을 병합하는 새 배열을 만들고 반환합니다.

concat()배열을 사용하는 더 좋은 방법 빈배열을 사용하는 것입니다.

const merged = [].concat(arr1, arr2);

이 방법의 장점은 인수로 전달되는 여러 배열을 병합 할 수 있다는 점 입니다.

Spread연산자와 결과가 동일하게 출력되지만 사용하는 경우가 다릅니다.

병합할 요소들이 모두 배열인 경우 Spread연산자를 사용하고. 입력 요소 유형이 확실하지 않은 경우 concat()메서드를 사용합니다. 

 

4. push() 메서드 사용

push() 메서드와 Spread 연산자를 사용하여 두 개 이상의 배열을 병합할 수 있습니다. 

 

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [7,8,9];// Merge more than two arrays
arr1.push(...[...arr2, ...arr3]); // [1,2,3,4,5,6,7,8,9]

 

5. reduce() 배열 고차함수 사용

reduce( ) 함수에 arr1을 초기값으로 설정후 arr2의 각 요소를 하나씩 push()메서드를 통해 arr 배열에 삽입합니다.

 

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const merged = arr2.reduce((arr, item) => {
    arr.push(item);
    return arr;
}, arr1);
console.log(merged);