문자열을 카멜 케이스로 변환하기

문자열을 카멜 케이스로 변환해 봅시다!

저 같은 경우, URL 파라미터를 카멜 케이스로 변경해야 했어요.

USER_NAME 같은 변수인데.. 이런 경우를 어퍼 스네이크 케이스라고 하더군요?

일단 변환하기 전에 카멜 케이스랑 어퍼 케이스가 무엇인지 간략하게 알아봅시다.

 

---

1. 어퍼 스네이크 케이스(Upper Snake Case)

어퍼 스네이크 케이스는 여러 단어를 연결할 때, 각 단어를 대문자로 쓰고, 단어 사이에 언더스코어(_)를 사용하는 표기법입니다.

예를 들어, user name이라는 문장은 USER_NAME으로 되는 것이죠.

 

---

2. 카멜 케이스(Camel Case)

카멜 케이스는 여러 단어를 연결할 때, 첫 단어는 소문자로 시작하고, 그 이후의 각 단어는 대문자로 시작하는 표기법입니다.

얘를 들어, user name이라는 문장은 userName이 되는 것이죠.

 

---

3. 어퍼 스네이크 케이스에서 카멜 케이스로 변환

그럼 이제 어퍼 스네이크 케이스에서 카멜 케이스로 변환해 봅시다!

 

먼저, 다음과 같은 문자열로 이루어진 변수가 있다고 가정해 봅시다.

const juices = "APPLE_JUICE, KIWI_JUICE, BANANA_JUICE";

 

그러면 이 변수를 split( ) 함수를 이용하여, 문자열 쉼표(,)를 기준으로 나누어 배열로 변환해요.

const toCamelCase = juice.split(", ")

 

그 다음, map 메서드로 각 요소에 대해 작업을 수행합니다.

• .toLowerCase( )로 현재 단어를 모두 소문자로 변환해요.
• .split("_")로 소문자로 변환된 단어를 언더스코어(_)를 기준으로 나누어 배열로 변환합니다.
• index === 0 ? w : w,charAt(0).toUpperCase( ) + w. slice(1)로 index가 0인 경우(첫 번째 단어)는 그대로 반환하고, 그렇지 않은 경우, 첫 글자를 대문자로 반환한 뒤, 나머지 부분을 이어붙입니다.
• .join("")로 반환된 배열을 빈 문자로 합쳐서 하나의 문자열로 만들어요.
• .join(", ")으로 마지막 반환된 문자열 배열을 쉼표(,)로 합쳐서 최종 결과를 만듭니다.

  .map((word) => { // map 메서드로 각 요소에 대해 작업 수행
    return word
      .toLowerCase() // 현재 단어를 모두 소문자로 변환
      .split("_") // 소문자로 변환된 단어를 _를 기준으로 나누어 배열로 변환
      .map((w, index) =>
        // index가 0인 경우(첫 번째 단어)는 그대로 반환하고,
        // 그렇지 않은 경우, 첫 글자를 대문자로 반환한 뒤,
        // 나머지 부분을 이어붙임
        index === 0 ? w : w.charAt(0).toUpperCase() + w.slice(1)
      )
      .join(""); // 반환된 배열을 빈 문자열로 합쳐서 하나의 문자열로 만듦
  })
  .join(", "); // 마지막으로 반환된 문자열 배열을 ,로 합쳐서 최종 결과를 만듦

 

이렇게 하면, appleJuice, kiwiJuice, bananaJuice 라는 값이 출력됩니다.

console.log(toCamelCase); // appleJuice, kiwiJuice, bananaJuice

 

---

4. 정리하며

지금까지 어퍼 스네이크 케이스에서 카멜 케이스로 변환하는 과정에 대해 알아보았습니다.

상수 또는 파라미터를 카멜 케이스로 변환해야 하는 상황에 사용하면 될 것 같아요.

 

전체 코드

// 어퍼 케이스 -> 카멜 케이스
const juices = "APPLE_JUICE, KIWI_JUICE, BANANA_JUICE";

const toCamelCase = juices
  .split(", ") // juices 문자열을 , 기준으로 나누어 배열로 변환
  .map((word) => { // map 메서드로 각 요소에 대해 작업 수행
    return word
      .toLowerCase() // 현재 단어를 모두 소문자로 변환
      .split("_") // 소문자로 변환된 단어를 _를 기준으로 나누어 배열로 변환
      .map((w, index) =>
        // index가 0인 경우(첫 번째 단어)는 그대로 반환하고,
        // 그렇지 않은 경우, 첫 글자를 대문자로 반환한 뒤,
        // 나머지 부분을 이어붙임
        index === 0 ? w : w.charAt(0).toUpperCase() + w.slice(1)
      )
      .join(""); // 반환된 배열을 빈 문자열로 합쳐서 하나의 문자열로 만듦
  })
  .join(", "); // 마지막으로 반환된 문자열 배열을 ,로 합쳐서 최종 결과를 만듦

console.log(toCamelCase);