개요
JavaScript로 개발하다 보면 배열 안의 여러 요소를 특정 기준에 따라 하나로 병합해야 하는 경우가 종종 발생합니다. 예를 들어, 숫자들 사이에 구분자가 섞여 있는 배열을 그대로 두지 않고, 구분자 단위로 묶인 숫자들을 각각 하나의 값으로 합치고 싶을 수 있습니다.
이번 글에서는 join(), split(), filter(), map() 메서드를 조합하여 배열 내부의 특정 요소를 손쉽게 병합하는 방법을 알아보겠습니다.
문제 상황
다음과 같은 배열이 있다고 가정해 보겠습니다.
var values = [7,5,3,8,9,'/',9,5,8,2,'/',3,4,8];
위 배열에서 슬래시('/')로 구분된 숫자들을 각각 하나의 숫자로 병합하려면 어떻게 해야 할까요? 원하는 결과는 [75389, '/', 9582, '/', 348] 형태입니다.
특정 요소를 병합할 때는 split()과 함께 map()을 사용하면 효과적입니다.
예제 코드
전체 코드는 다음과 같습니다.
var values = [7,5,3,8,9,'/',9,5,8,2,'/',3,4,8];
var afterMerge = values.join('')
.split(/(\d+)/).
filter(Boolean).
map(v => isNaN(v) ? v : +v);
console.log(afterMerge);코드 동작 원리
각 단계별로 살펴보면 다음과 같습니다.
join(''): 배열의 모든 요소를 구분자 없이 하나의 문자열로 연결합니다. 결과는"75389/9582/348"이 됩니다.split(/(\d+)/): 정규식 캡처 그룹을 사용해 연속된 숫자 단위로 문자열을 나눕니다. 이때 캡처 그룹 덕분에 숫자와 구분자가 함께 배열로 반환됩니다.filter(Boolean): 분할 과정에서 생긴 빈 문자열('')을 제거합니다.map(v => isNaN(v) ? v : +v): 숫자로 변환 가능한 문자열은 단항 더하기(+) 연산자를 통해 실제 숫자 타입으로 변환하고, 구분자('/')는 그대로 유지합니다.
실행 방법
위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 입력합니다.
node fileName.js
여기서는 파일 이름이 demo301.js라고 가정하겠습니다.
실행 결과
프로그램을 실행하면 콘솔에 아래와 같은 출력이 표시됩니다.
PS C:\Users\Amit\javascript-code> node demo301.js [ 75389, '/', 9582, '/', 348 ]
결과를 보면 슬래시로 구분되었던 숫자들이 각각 75389, 9582, 348이라는 하나의 숫자로 성공적으로 병합된 것을 확인할 수 있습니다.
마무리
이처럼 join()으로 배열을 문자열로 만든 뒤, 정규식 기반의 split()으로 분할하고, filter()와 map()으로 후처리하면 복잡한 반복문 없이도 배열 내 특정 요소를 깔끔하게 병합할 수 있습니다. 이 패턴은 로그 파싱, 데이터 정제 등 다양한 상황에서 유용하게 활용될 수 있으니 꼭 익혀두시기 바랍니다.