JavaScript 배열 병합의 기본: concat() 메서드
JavaScript에서 두 개의 배열을 하나로 합치려면 Array.concat() 메서드를 사용하면 됩니다. concat() 메서드는 호출한 배열에 두 개 이상의 배열 또는 값을 연결한 새로운 배열을 반환합니다. 원본 배열은 그대로 유지되므로 기존 데이터를 훼손하지 않고 안전하게 병합 작업을 수행할 수 있다는 점이 큰 장점입니다.
예제 코드
아래 코드를 실행하면 문자열 배열과 숫자 배열이 하나로 병합되는 과정을 확인할 수 있습니다.
<html>
<head>
<title>JavaScript Array concat Method</title>
</head>
<body>
<script>
var alpha = ["a", "b", "c"];
var numeric = [1, 2, 3];
var alphaNumeric = alpha.concat(numeric);
document.write("alphaNumeric : " + alphaNumeric);
</script>
</body>
</html>
실행 결과
alphaNumeric : a,b,c,1,2,3
concat() 메서드의 주요 특징
- 새 배열 반환: 원본 배열은 변경되지 않고, 병합된 결과가 담긴 새로운 배열이 생성됩니다.
- 다중 병합 가능: 여러 개의 배열과 값을 한 번에 인수로 전달하여 병합할 수 있습니다. 예:
arr1.concat(arr2, arr3) - 값 직접 추가: 배열뿐만 아니라 문자열, 숫자 등 개별 값도 함께 추가할 수 있습니다.
참고: ES6 전개 연산자(Spread Operator) 활용하기
ES6(ES2015)부터는 전개 연산자(...)를 사용해 더욱 간결하게 배열을 병합할 수도 있습니다.
const alpha = ["a", "b", "c"];
const numeric = [1, 2, 3];
const alphaNumeric = [...alpha, ...numeric];
console.log(alphaNumeric); // ["a", "b", "c", 1, 2, 3]
두 방식 모두 결과는 동일하므로, 프로젝트의 JavaScript 버전과 코드 스타일에 맞게 선택하여 사용하면 됩니다.