JavaScript로 어떤 표기법이든 camelCase(카멜 케이스)로 변환하는 방법

문제 상황

JavaScript에서 문자열을 입력받아, 해당 문자열이 일반 표기법(normal case), 스네이크 케이스(snake_case), 파스칼 케이스(PascalCase) 등 어떤 형식이든 상관없이 항상 camelCase(카멜 케이스)로 변환하는 함수를 작성해야 한다고 가정해 보겠습니다.

예를 들어, 함수에 다음과 같은 문자열이 입력되면:

입력

const str = 'New STRING';

함수는 아래와 같은 결과를 반환해야 합니다:

출력

const output = 'newString';

해결 방법 및 코드 예시

정규표현식과 배열 메서드를 조합하면 간단하게 구현할 수 있습니다. 아래 코드를 살펴보겠습니다:

const str = 'New STRING';
const toCamelCase = (str = '') => {
  return str
    .replace(/[^a-z0-9]/gi, ' ')
    .toLowerCase()
    .split(' ')
    .map((el, ind) => ind === 0 ? el : el[0].toUpperCase() + el.substring(1, el.length))
    .join('');
};
console.log(toCamelCase(str));

실행 결과

newString

코드 동작 원리

이 코드가 작동하는 방식을 단계별로 살펴보면 다음과 같습니다:

• replace(/[^a-z0-9]/gi, ' '): 영숫자(alphanumeric)가 아닌 모든 문자를 공백으로 치환하여 단어의 경계를 만듭니다. 덕분에 하이픈(-)이나 언더스코어(_)로 구분된 kebab-case, snake_case 문자열도 함께 처리할 수 있습니다.
• toLowerCase(): 전체 문자열을 소문자로 통일합니다.
• split(' '): 공백을 기준으로 문자열을 개별 단어 배열로 분리합니다.
• map(...): 첫 번째 단어는 그대로 유지하고, 나머지 단어들은 첫 글자만 대문자로 변환합니다.
• join(''): 모든 단어를 하나로 이어 붙여 최종적인 camelCase 문자열을 완성합니다.

이 방식은 대소문자가 뒤섞인 문자열은 물론, snake_case나 PascalCase처럼 서로 다른 표기법으로 작성된 문자열도 안정적으로 camelCase로 변환할 수 있다는 장점이 있습니다.