JavaScript에서 camelCase 문자열을 공백으로 구분하기

문제

camelCase 형식의 문자열을 첫 번째이자 유일한 인수로 받는 JavaScript 함수를 작성해야 합니다.

이 함수는 입력된 문자열을 단어 사이에 공백을 넣어 분리한 새로운 문자열을 만들어 반환해야 합니다.

예를 들어, 함수의 입력이 다음과 같다면 −

입력

const str = 'thisIsACamelCasedString';

출력

const output = 'this Is A Camel Cased String';

예제 코드

다음은 이 문제를 해결하는 코드입니다 −

const str = 'thisIsACamelCasedString';
const breakCamelCase = (str = '') => {
    const isUpper = (char = '') => char.toLowerCase() !==
char.toUpperCase() && char === char.toUpperCase();
    let res = '';
    const { length: len } = str;
    for(let i = 0; i < len; i++){
        const el = str[i];
        if(isUpper(el) && i !== 0){
            res += ` ${el}`;
            continue;
        };
        res += el;
    };
    return res;
};
console.log(breakCamelCase(str));

출력 결과

this Is A Camel Cased String

코드 설명

이 코드의 동작 원리를 단계별로 살펴보겠습니다.

1. 대소문자 판별 헬퍼 함수

isUpper 함수는 전달받은 문자가 영문 대문자인지 확인합니다. 소문자로 변환한 값과 대문자로 변환한 값이 서로 다르고(즉, 영문자이며), 원본 문자와 대문자 변환 결과가 같다면 그 문자는 대문자입니다.

2. 문자열 순회 및 공백 삽입

반복문으로 문자열의 각 문자를 하나씩 확인하면서, 대문자를 만나고 그것이 첫 번째 문자가 아니라면 앞에 공백을 추가합니다. 첫 번째 문자가 대문자인 경우에는 공백 없이 그대로 두어야 하기 때문에 i !== 0 조건이 필요합니다.

3. 결과 반환

모든 문자를 처리한 뒤 완성된 문자열을 반환하면, camelCase 문자열이 공백으로 구분된 읽기 쉬운 문장으로 변환됩니다.

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

같은 작업은 정규 표현식과 replace() 메서드를 사용하면 한 줄로 처리할 수 있습니다.

const breakCamelCase = (str = '') =>
    str.replace(/([A-Z])/g, ' $1').trim();

console.log(breakCamelCase('thisIsACamelCasedString'));

이 코드는 모든 대문자 앞에 공백을 삽입한 후, 문자열 맨 앞에 불필요하게 생길 수 있는 공백을 trim()으로 제거합니다. 반복문 방식보다 코드가 짧고 가독성이 좋지만, 성능이 중요한 대용량 문자열 처리에서는 직접 순회하는 방식이 더 유리할 수 있습니다.