JavaScript에서 문자열 배열을 결합하고 공백을 하이픈으로 바꾸는 방법

문제 개요

문자열 배열을 입력받는 JavaScript 함수를 작성해야 합니다. 이 함수는 배열에 담긴 모든 문자열을 하나로 연결한 뒤, 문자열 사이의 모든 공백을 하이픈(-)으로 바꾸어 최종 문자열을 반환합니다.

입력 예시

const arr = ["QA testing promotion ", " Twitter  ", "Facebook ", "Test"];

기대 출력

const output = "QA-testing-promotion-Twitter-Facebook-Test";

구현 코드

다음은 위 문제를 해결하는 전체 코드입니다.

const arr = ["QA testing promotion ", " Twitter ", "Facebook ", "Test"];
const joinArr = arr => {
    const arrStr = arr.join('');
    let res = '';
    for(let i = 0; i < arrStr.length; i++){
        if(arrStr[i] === ' '){
            if(arrStr[i-1] && arrStr[i-1] !== ' '){
                res += '-';
            };
            continue;
        }else{
            res += arrStr[i];
        };
    };
    return res;
};
console.log(joinArr(arr));

코드 동작 원리

1. join('')으로 병합: arr.join('')을 호출하면 구분자 없이 배열의 모든 문자열이 하나의 문자열로 합쳐집니다.

2. 한 글자씩 순회: 결합된 문자열을 처음부터 끝까지 반복문으로 탐색하면서 각 문자가 공백인지 확인합니다.

3. 공백 처리 규칙: 현재 문자가 공백이고, 바로 앞 문자가 존재하며 공백이 아닌 경우에만 하이픈을 추가합니다. 덕분에 단어 사이의 연속된 공백은 하나의 하이픈으로만 치환되고, 문자열 맨 앞과 맨 뒤의 불필요한 공백은 자연스럽게 제거됩니다.

4. 일반 문자는 그대로 유지: 공백이 아닌 문자는 결과 문자열에 그대로 더해집니다.

실행 결과

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

QA-testing-promotion-Twitter-Facebook-Test

정규식을 활용한 간결한 대안

같은 결과를 훨씬 짧은 코드로 얻을 수도 있습니다. 먼저 trim()으로 앞뒤 공백을 제거한 뒤, 정규식을 이용해 연속된 공백을 한 번에 하이픈으로 바꾸면 됩니다.

const joinArr = arr => arr.join('').trim().replace(/\s+/g, '-');
console.log(joinArr(arr)); // QA-testing-promotion-Twitter-Facebook-Test

반복문 방식은 로직이 명확하게 드러나는 장점이 있고, 정규식 방식은 코드가 간결하고 유지보수가 쉽다는 장점이 있습니다. 상황에 맞게 선택해서 사용하면 됩니다.