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));

코드 설명

먼저 join('') 메서드를 사용해 배열의 모든 문자열을 구분자 없이 하나의 문자열로 합칩니다. 이후 반복문을 돌며 각 문자를 검사하는데, 공백을 만나면 바로 앞 문자가 존재하고 공백이 아닌 경우에만 하이픈을 추가합니다. 이렇게 하면 연속된 공백이 여러 개 있어도 하이픈이 중복해서 삽입되지 않습니다. 공백이 아닌 일반 문자는 그대로 결과 문자열에 추가됩니다.

출력 결과

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

QA-testing-promotion-Twitter-Facebook-Test

대안: 정규 표현식 활용하기

같은 작업은 정규 표현식을 사용하면 한 줄로 더 간결하게 처리할 수 있습니다.

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

\s+ 패턴은 하나 이상의 연속된 공백을 의미하며, 이를 하이픈으로 치환합니다. 또한 trim()으로 문자열 앞뒤의 공백을 제거하면 불필요한 하이픈이 생기는 것을 방지할 수 있습니다. 상황에 따라 반복문 방식과 정규 표현식 방식 중 더 적합한 것을 선택해 사용하면 됩니다.