자바스크립트에서 두 개 이상의 배열을 결합할 때는 기본 제공 메서드인 array.concat()을 사용할 수 있습니다. 하지만 스프레드(spread) 연산자를 활용하면 훨씬 더 직관적이고 간결한 코드로 배열을 합칠 수 있습니다. 스프레드 연산자는 ES6(ES2015)에서 도입된 문법으로, 최신 브라우저 환경에서 널리 지원됩니다.
기본 구문
var merged = [...arr1, ...arr2];
스프레드 연산자의 장점을 제대로 이해하기 위해, 먼저 스프레드 연산자 없이 배열을 결합하는 전통적인 방법부터 살펴보겠습니다.
concat() 메서드로 배열 결합하기
다음 예제에서는 스프레드 연산자 대신 array.concat() 메서드를 사용하여 두 개의 배열을 하나로 합칩니다.
예제
<html>
<body>
<script>
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var merged = arr1.concat(arr2);
document.write(merged);
</script>
</body>
</html>실행 결과
1,2,3,4,5,6
스프레드 연산자로 두 배열 결합하기
같은 작업을 스프레드 연산자로 수행하면 코드가 한층 간결해집니다. 다음 예제에서는 스프레드 연산자를 사용하여 두 개의 배열을 결합합니다.
예제
<html>
<body>
<script>
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var merged = [...arr1, ...arr2];
document.write(merged);
</script>
</body>
</html>실행 결과
1,2,3,4,5,6
세 개 이상의 배열 결합하기
다음 예제에서는 스프레드 연산자를 사용해 세 개의 배열을 한 번에 결합합니다. concat() 메서드는 결합할 배열이 많아질수록 호출을 반복하거나 인수를 계속 나열해야 해서 코드가 복잡해지기 쉽습니다. 반면 스프레드 연산자를 사용하면 배열의 개수와 관계없이 동일한 패턴으로 매우 쉽게 확장할 수 있다는 큰 장점이 있습니다.
예제
<html>
<body>
<script>
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [7,8,9];
var merged = [...arr1, ...arr2, ...arr3];
document.write(merged);
</script>
</body>
</html>실행 결과
1,2,3,4,5,6,7,8,9
정리
배열 결합에는 concat() 메서드와 스프레드 연산자 두 가지 방법이 모두 유효하지만, 스프레드 연산자는 다음과 같은 이유로 실무에서 더 선호됩니다.
- 코드가 짧고 읽기 쉽습니다.
- 중간에 다른 값을 삽입하는 것도 자유롭습니다. 예: [...arr1, 0, ...arr2]
- 세 개 이상의 배열을 결합할 때도 동일한 패턴으로 간단히 확장할 수 있습니다.