자바스크립트에서 두 개의 배열을 결합하는 방법은 크게 두 가지가 있습니다. 어떤 방법을 선택하느냐는 기존 배열을 유지하고 싶은지, 아니면 기존 배열 자체를 변경하고 싶은지에 따라 달라집니다.
1. concat 메서드 — 새로운 배열 생성하기
두 배열을 합치면서 기존 배열은 그대로 유지하고, 결과물을 새로운 배열로 받고 싶다면 concat 메서드를 사용하는 것이 가장 좋습니다.
예제
let arr1 = [1, 2, 3, 4];
let arr2 = [5, 6, 7, 8];
let arr3 = arr1.concat(arr2);
console.log(arr1);
console.log(arr2);
console.log(arr3);
실행 결과
[1, 2, 3, 4]
[5, 6, 7, 8]
[1, 2, 3, 4, 5, 6, 7, 8]
출력 결과를 보면 arr1과 arr2는 전혀 변경되지 않은 채 그대로 유지되고, 두 배열이 합쳐진 새로운 배열 arr3만 생성된 것을 확인할 수 있습니다.
2. push와 apply 조합 — 기존 배열에 직접 추가하기
반대로 새 배열을 만들지 않고 기존 배열 자체를 변경하며(in-place) 결합하고 싶다면 push 메서드를 apply와 함께 사용해야 합니다. apply는 배열의 요소들을 하나씩 풀어내어(unpack) 함수의 인자로 전달해 주는 역할을 합니다.
예제
let arr1 = [1, 2, 3, 4];
let arr2 = [5, 6, 7, 8];
arr1.push.apply(arr1, arr2);
console.log(arr1);
console.log(arr2);
실행 결과
[1, 2, 3, 4, 5, 6, 7, 8]
[5, 6, 7, 8]
이번에는 첫 번째 배열인 arr1 자체가 변경되어 두 배열의 모든 요소를 담게 되었습니다. 반면 arr2는 그대로 유지됩니다.
참고: 스프레드 문법(ES6)으로 더 간결하게
ES6 이상 환경에서는 스프레드 연산자(...)를 사용하면 apply 없이도 동일한 작업을 훨씬 직관적으로 수행할 수 있습니다.
let arr1 = [1, 2, 3, 4];
let arr2 = [5, 6, 7, 8];
arr1.push(...arr2);
console.log(arr1); // [1, 2, 3, 4, 5, 6, 7, 8]
정리
- 원본 배열 유지 + 새 배열 필요 → concat() 사용
- 원본 배열을 직접 수정 → push.apply() 또는 push(...배열) 사용
상황에 맞는 방법을 선택하면 불필요한 부작용 없이 깔끔하게 배열을 다룰 수 있습니다.