JavaScript에서 두 문자열을 2글자씩 번갈아 합치는 방법

두 개의 문자열을 입력받아, 첫 번째 문자열에서 두 글자씩, 두 번째 문자열에서 두 글자씩 번갈아 가며 추출한 뒤 하나의 새로운 문자열로 합쳐서 반환하는 JavaScript 함수를 작성해 보겠습니다.

예를 들어 다음과 같은 두 문자열이 있다고 가정해 봅시다.

const str1 = 'Hello world';
const str2 = 'How are you btw';

이때 기대되는 출력 결과는 다음과 같습니다.

const output = 'HeHollw o arwoe rlyodu btw';

결과를 자세히 보면 첫 번째 문자열의 앞 두 글자 'He' 바로 뒤에 두 번째 문자열의 앞 두 글자 'Ho'가 이어지고, 이후에도 같은 방식으로 두 문자열이 교차하며 합쳐집니다. 한쪽 문자열이 먼저 끝나면, 남은 쪽의 문자들은 그대로 뒤에 붙습니다.

구현 코드

이 함수는 다음과 같이 작성할 수 있습니다.

const str1 = 'Hello world';
const str2 = 'How are you btw';
const twiceJoin = (str1 = '', str2 = '') => {
    let res = '', i = 0, j = 0, temp = '';
    for(let ind = 0; i < str1.length; ind++){
        if(ind % 2 === 0){
            temp = (str1[i] || '') + (str1[i+1] || '')
            res += temp;
            i += 2;
        }else{
            temp = (str2[j] || '') + (str2[j+1] || '')
            res += temp;
            j += 2;
        }
    };
    while(j < str2.length){
        res += str2[j++];
    };
    return res;
};
console.log(twiceJoin(str1, str2));

코드 설명

동작 원리를 단계별로 살펴보면 다음과 같습니다.

• res: 최종 결과를 담을 문자열입니다.
• i, j: 각각 str1과 str2에서 현재 읽을 위치를 가리키는 인덱스입니다.
• ind % 2 === 0: 반복 턴이 짝수일 때는 str1에서, 홀수일 때는 str2에서 두 글자씩 가져옵니다.
• (str1[i] || ''): 인덱스가 문자열 길이를 벗어나 undefined가 결과에 섞이는 것을 막기 위해 빈 문자열로 대체하는 안전 장치입니다.
• for 루프가 종료되면 str1은 모두 소진된 상태이므로, while 루프를 통해 str2에 남아 있는 나머지 문자들을 결과 뒤에 추가합니다.

더 간결한 대안: slice 활용

문자열 메서드인 slice()를 사용하면 같은 로직을 훨씬 간결하게 표현할 수 있습니다.

const twiceJoin = (str1 = '', str2 = '') => {
    let res = '';
    for(let k = 0; k < Math.max(str1.length, str2.length); k += 2){
        res += str1.slice(k, k + 2) + str2.slice(k, k + 2);
    }
    return res;
};
console.log(twiceJoin(str1, str2)); // HeHollw o arwoe rlyodu btw

slice(k, k + 2)는 해당 위치부터 두 글자를 잘라내며, 범위를 벗어나도 오류 없이 빈 문자열을 반환하기 때문에 별도의 예외 처리가 필요하지 않습니다.

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

HeHollw o arwoe rlyodu btw