JavaScript에서 문자열의 모든 단어 앞에 특정 문자를 추가하는 방법

JavaScript로 프로그래밍을 하다 보면 문자열의 각 단어 앞에 특정 기호나 텍스트를 붙여야 하는 경우가 종종 있습니다. 예를 들어 해시태그를 만들거나, 특수한 형식의 데이터를 처리할 때 유용하게 활용할 수 있습니다.

이번 글에서는 두 개의 문자열을 인자로 받아, 첫 번째 문자열의 모든 단어 시작 부분에 두 번째 문자열을 추가한 새로운 문자열을 반환하는 함수를 작성해 보겠습니다.

문제 정의

예를 들어 다음과 같이 동작하는 함수가 필요합니다.

입력 → 'hello stranger, how are you', '@@'
출력 → '@@hello @@stranger, @@how @@are @@you'

만약 두 번째 인자가 전달되지 않는다면, 기본값으로 '#' 문자를 사용하도록 구현합니다.

구현 방법

가장 간단하고 직관적인 접근 방식은 다음 세 단계로 이루어집니다.

split() 메서드로 문자열을 공백 기준으로 분리하여 배열로 만듭니다.
map() 메서드로 각 단어 앞에 지정된 텍스트를 붙입니다.
join() 메서드로 배열을 다시 하나의 문자열로 합칩니다.

아래는 실제 코드 예시입니다.

const str = 'hello stranger, how are you';

const prependString = (str, text = '#') => {
    return str
        .split(" ")
        .map(word => `${text}${word}`)
        .join(" ");
};

console.log(prependString(str));
console.log(prependString(str, '43'));

실행 결과

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

#hello #stranger, #how #are #you
43hello 43stranger, 43how 43are 43you

코드 설명

함수 선언부를 자세히 살펴보겠습니다.

기본 매개변수(Default Parameter): text = '#'처럼 매개변수에 기본값을 지정하면, 호출 시 두 번째 인자가 생략되더라도 자동으로 '#'이 사용됩니다.
split(" "): 문자열을 공백 문자를 기준으로 나누어 ['hello', 'stranger,', 'how', 'are', 'you']와 같은 배열을 생성합니다.
map(word => `${text}${word}`): 템플릿 리터럴(백틱)을 활용해 각 단어 앞에 지정한 텍스트를 연결합니다.
join(" "): 처리된 배열 요소들을 공백으로 이어붙여 최종 문자열을 완성합니다.

마무리

이처럼 JavaScript의 내장 배열 메서드인 split(), map(), join()을 조합하면 복잡한 반복문 없이도 간결하고 가독성 높은 코드로 문자열을 손쉽게 변형할 수 있습니다. 여러 단어로 구성된 문장에서 각 단어를 일괄적으로 가공해야 하는 다양한 상황에 응용해 보시기 바랍니다.