과제 : 문자열, 케밥 케이스를 카멜 케이스로 바꾸기

모던 JavaScript 튜토리얼 내용 중 일부 문제를 정리한 내용입니다.

케밥케이스로 작성된 문자열을 카멜 표기법으로 바꾸는 과제다. (my-short-string => myShortString) 문제를 보고 떠 오른 것은 일단 split("-") 스플릿을 활용해 - 기준으로 문자열을 나누고 일부 문자열의 앞 글자를 toUpperCase() 를 활용해 대문자로 바꾸는 것인데, 여기까지만 생각해서는 이 문제를 풀 수 없다. 그래서 정답을 보았다. 역시 메서드 자체가 아직 익숙하지 않다. 여기에는 map, slice, join 메서드가 추가로 사용된다.

우선 split 을 통해 문자열을 특정 기호 기준으로 나누어 배열로 만든다는 것을 이해하고, 그렇게 만들어진 배열을 map 함수를 통해 특정 요소만 선택해(index가 0이 아닌, 두번째 문자부터 수정하도록) 첫글자를 대문자로 바꾸고, 대문자로 바뀌지 않은 부분을 붙여주어야 한다. 이때 삼항연산자를 사용한다.

let str = "my-short-string";

// split 으로 특정 기호 기준으로 문자 나누어서 배열 담기
str.split("-") // ["my", "short", "string"];

// map 함수로 인덱스 0이 아닌 문자열의 첫글자 대문자로 바꾸고
// 대문자로 바꾼 문자의 인덱스 1부터 끝까지 뒤에 붙이기
str.split("-").map((word, index) => index === 0 ? word : word[0].toUpperCase() + word.slice(1)) // 
["my", "Short", "String"]

// join 의 빈칸 기준으로 문자열 붙이기
str.split("-").map((word, index) => index === 0 ? word : word[0].toUpperCase() + word.slice(1)).join(""); // "myShortString"

이런 식이다. 함수 형태로 완성하면,

function camelize(str) {
  return str
    .split('-')
    .map(
      (word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1)
    )
    .join(''); 
}

무엇이든 배열로 만들어진다면 map 메서드로 해당 요소와 인덱스 넘버를 활용해 자유롭게 선택하고 수정할 수 있을 것 같다.