JavaScript에서 특정 문자로 배열의 모든 요소를 감싸 하나의 문자열로 결합하는 방법

이번 글에서는 두 개의 인수를 받는 함수를 작성해 보겠습니다. 첫 번째 인수는 문자열 또는 숫자 리터럴로 구성된 배열이고, 두 번째 인수는 문자열입니다. 이 함수는 배열의 모든 요소 앞뒤에 해당 문자열을 붙여 하나의 문자열로 만들어 반환해야 합니다.

예를 들어 다음과 같습니다.

applyText([1,2,3,4], 'a');

위 호출은 'a1a2a3a4a'를 반환해야 합니다.

for 루프보다 map() 메서드가 좋은 이유

이러한 요구 사항을 처리할 때는 for 루프보다 배열의 map() 메서드를 사용하는 것이 더 간결하고 가독성이 뛰어납니다. map()은 배열의 각 요소를 변환해 새로운 배열을 생성하고, 여기에 join()을 적용해 하나의 문자열로 합친 뒤, 마지막에 동일한 문자열을 한 번 더 이어 붙이면 원하는 결과를 얻을 수 있습니다.

예제 코드

const numbers = [1, 2, 3, 4];
const word = 'a';
const applyText = (arr, text) => {
    const appliedString = arr.map(element => {
        return `${text}${element}`;
    }).join("");
    return appliedString + text;
};
console.log(applyText(numbers, word));

동작 원리

코드의 실행 흐름을 단계별로 살펴보면 다음과 같습니다.

1. map()이 배열의 각 요소를 템플릿 리터럴 `` `${text}${element}` `` 형태로 변환하여 ['a1', 'a2', 'a3', 'a4']라는 새로운 배열을 만듭니다.
2. join("")이 이 배열을 구분자 없이 하나로 연결해 'a1a2a3a4' 문자열을 생성합니다.
3. 마지막으로 문자열 끝에 text('a')를 한 번 더 붙여 최종 결과인 'a1a2a3a4a'를 완성합니다.

출력 결과

이 코드의 콘솔 출력 결과는 다음과 같습니다.

a1a2a3a4a