JavaScript에서 하이픈 문자열을 camelCase로 변환하는 방법

하이픈으로 구분된 문자열을 camelCase로 변환하기

JavaScript 개발을 하다 보면 this-is-an-example처럼 단어가 하이픈(-)으로 구분된 문자열을 만나는 경우가 많습니다. 예를 들어 CSS 클래스명이나 URL 슬러그를 처리할 때 자주 볼 수 있는 형식입니다.

이번 글에서는 이런 하이픈 문자열을 받아서 camelCase 형태로 변환하는 JavaScript 함수를 작성해 보겠습니다.

문제 정의

다음과 같은 문자열이 있다고 가정해 보겠습니다.

const str = 'this-is-an-example';

이 문자열을 입력받아 각 단어의 첫 글자를 대문자로 변경하고 하이픈을 제거한 camelCase 문자열로 변환해야 합니다. 즉, 위 문자열의 기대 출력 결과는 다음과 같습니다.

const output = 'thisIsAnExample';

여기서 주의할 점은 첫 번째 단어인 this는 그대로 소문자를 유지해야 한다는 것입니다. camelCase 표기법에서는 첫 단어만 소문자로 시작하고, 이후 단어들은 첫 글자가 대문자입니다.

구현 코드

변환 로직은 다음과 같은 순서로 진행됩니다.

1. split('-') 메서드로 문자열을 하이픈 기준으로 분리합니다.
2. map() 메서드로 각 단어를 순회하면서 인덱스가 0보다 크고(첫 단어 제외) 빈 문자열이 아닌 경우, 첫 글자를 대문자로 변환하고 나머지 부분은 그대로 붙입니다.
3. join('') 메서드로 모든 단어를 하나의 문자열로 합칩니다.

전체 코드는 다음과 같습니다.

const str = 'this-is-an-example';

const changeToCamel = str => {
    let newStr = '';
    newStr = str
    .split('-')
    .map((el, ind) => {
        return ind && el.length ? el[0].toUpperCase() + el.substring(1)
        : el;
    })
    .join('');
    return newStr;
};

console.log(changeToCamel(str));

실행 결과

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

thisIsAnExample

코드 설명

map() 콜백 함수 내부의 조건식 ind && el.length가 핵심입니다. ind가 0(첫 번째 단어)일 때는 falsy 값이므로 원본 단어가 그대로 반환되고, 나머지 단어는 첫 글자만 toUpperCase()로 대문자화된 후 substring(1)로 추출한 뒷부분과 결합됩니다. 또한 el.length 조건 덕분에 연속된 하이픈으로 인한 빈 문자열도 안전하게 처리됩니다.

참고로 최신 JavaScript에서는 el[0].toUpperCase() + el.substring(1) 대신 el.charAt(0).toUpperCase() + el.slice(1)를 사용해도 동일한 결과를 얻을 수 있으며, 정규표현식을 활용한 str.replace(/-([a-z])/g, (_, c) => c.toUpperCase()) 방식도 널리 사용되는 대안입니다.