자바스크립트(JavaScript)로 두 문자열을 번갈아 가며 병합하는 방법

문제 개요

두 개의 문자열을 입력받아, 각 문자열에서 문자를 하나씩 번갈아 가며 추출해 하나의 새로운 문자열로 만들어 반환하는 자바스크립트 함수를 작성해야 합니다.

예를 들어, 다음과 같은 두 문자열이 주어졌다고 가정해 보겠습니다.

const str1 = 'abc';
const str2 = 'def';

기대 출력

위 두 문자열을 번갈아 병합하면 결과는 다음과 같아야 합니다.

const output = 'adbecf';

구현 방법

핵심 아이디어는 두 문자열을 각각 문자 배열로 분리한 뒤, 반복문을 돌면서 같은 인덱스의 문자를 순서대로 새 문자열에 이어 붙이는 것입니다. 이때 한쪽 문자열이 더 긴 경우에도 남은 문자들이 모두 포함되도록 조건 처리를 해주는 것이 중요합니다.

const str1 = 'abc';
const str2 = 'def';
const mergeAlternatively = (str1, str2) => {
    const a = str1.split("").filter(el => !!el);
    const b = str2.split("");
    let mergedString = '';
    for(var i = 0; i < a.length || i < b.length; i++){
       if(i < a.length){
           mergedString += a[i];
       };
       if(i < b.length){
           mergedString += b[i];
       };
   }; 
    return mergedString;
};
console.log(mergeAlternatively(str1, str2));

코드 설명

split(""): 문자열을 한 글자씩 잘라 배열로 변환합니다. 예를 들어 'abc'는 ['a', 'b', 'c']가 됩니다.

filter(el => !!el): 혹시 생길 수 있는 빈 문자열 요소를 제거하여 안전하게 정리합니다.

반복문 조건 (i < a.length || i < b.length): 두 배열 중 어느 한쪽이라도 아직 처리하지 않은 문자가 남아 있다면 반복을 계속합니다. 덕분에 길이가 서로 다른 문자열도 문제없이 병합됩니다.

조건부 추가: 각 인덱스에서 해당 배열에 문자가 존재할 때만 mergedString에 이어 붙이므로, 짧은 쪽 문자열이 소진된 이후에는 긴 쪽의 나머지 문자만 자연스럽게 뒤에 붙습니다.

실행 결과

코드를 실행하면 콘솔에 다음과 같은 출력이 표시됩니다.

adbecf

마무리

이처럼 split()과 반복문만 활용하면 길이가 다른 문자열까지도 손쉽게 번갈아 병합할 수 있습니다. 실무에서는 문자열 결합 성능을 고려해 배열에 담은 후 join('')으로 합치는 방식을 사용하기도 하니, 상황에 맞게 응용해 보시기 바랍니다.