바닐라 JavaScript로 배열 병합하기: ES5와 ES6 방법 완벽 정리

앞선 글에서 우리는 JavaScript의 push() 메서드를 사용해 배열에 항목을 추가하고 제거하는 방법을 배웠습니다.

그렇다면 기존 배열에 또 다른 배열 전체를 추가하려면 어떻게 해야 할까요? 다시 말해, 서로 다른 두 개의 배열을 하나로 합치고 싶을 때 말입니다.

JavaScript에서 두 개 이상의 배열을 병합하려면 Array.prototype.push.apply() 메서드를 사용할 수 있습니다.

예를 들어 과일 바구니가 두 개 있고, 모든 과일을 한 바구니에 담고 싶다고 가정해 봅시다. 전혀 문제없습니다.

ES5 방식: Array.prototype.push.apply()

var fruitBasketOne = ["apple", "banana", "grapes"]
var fruitBasketTwo = ["orange", "apricot", "pear"]
Array.prototype.push.apply(fruitBasketOne, fruitBasketTwo)

// 결과: ['apple', 'banana', 'grapes', 'orange', 'apricot', 'pear']
console.log(fruitBasketOne)

// 결과: ["orange", "apricot", "pear"]
console.log(fruitBasketTwo)

위 코드는 두 번째 배열을 첫 번째 배열에 병합합니다. 여기서 주목할 점은 두 번째 배열인 fruitBasketTwo가 여전히 메모리에 그대로 남아 있다는 것입니다. 즉, 이 메서드는 원본 배열을 삭제하지 않습니다.

ES6 방식: 스프레드 연산자(Spread Operator)

ES6의 스프레드 연산자를 사용하면 배열 병합이 훨씬 더 간단해집니다:

let fruitBasketOne = ["apple", "banana", "grapes"]
let fruitBasketTwo = ["orange", "apricot", "pear"]
fruitBasketOne.push(...fruitBasketTwo)

// 결과: ['apple', 'banana', 'grapes', 'orange', 'apricot', 'pear']
console.log(fruitBasketOne)

...(점 세 개)만 붙여주면 두 번째 배열의 모든 요소가 첫 번째 배열의 push() 메서드에 개별 인수로 전달됩니다. 코드가 짧아지고 가독성도 크게 향상되죠.

브라우저 호환성

첫 번째 방법(push.apply())은 모든 최신 브라우저에서 지원되며, 최소한 IE6까지 거슬러 올라가는 구형 브라우저에서도 동작합니다.

반면 두 번째 방법(스프레드 연산자)은 최신 브라우저에서만 작동합니다. 하지만 Babel과 같은 트랜스파일러를 사용하면 ES6 코드를 ES5 호환 코드로 변환할 수 있으므로, 구형 브라우저에서도 문제없이 사용할 수 있습니다.

배열의 push() 메서드에 대해 더 자세히 알고 싶다면 관련 공식 문서(MDN)를 참고하는 것을 추천합니다.