[Javascript] 배열 메소드를 이용한 함수 만들기

문제

"my-short-string"같이 여러 단어를 대시(-)로 구분한 문자열을 카멜 표기법을 사용한 문자열 "myShortString"로 변경해주는 함수를 작성해보세요.

대시는 모두 지우고 각 단어의 첫 번째 글자는 대문자로 써주면 됩니다.

camelize("background-color") == 'backgroundColor';
camelize("list-style-image") == 'listStyleImage';
camelize("-webkit-transition") == 'WebkitTransition';

 

힌트: split을 사용해 문자열을 배열로 바꾼 다음 join을 사용해 다시 합치면 됩니다.

 

 

나의 풀이

function camelize(str) {
  // arr = [my, loving, city]
  let arr = str.split("-");

  // arr = [my, Loving, City]
  arr = arr.map((item, index) =>
    index == 0 ? item : item[0].toUpperCase() + item.slice(1)
  );

  return arr.join();
}

alert(camelize("my-loving-city"));

"my,Loving,city" 를 출력함 -> 실패

 

문제점

arr.join([separator])

• separator
  • 입력시, 중간 중간에 껴넣어짐
  • 생략시, 배열의 요소들이 쉼표로 구분됨
  • ''입력시, 아무 문자도 없이 연결됨
• 각 요소를 구분할 문자열 지정

이 점을 간과하고 아무것도 적지 않았다.
해결을 위해서는 array.join('') 이라고 고쳐야함

 

 

해답

function camelize(str) {
  return str
    .split('-') // splits 'my-long-word' into array ['my', 'long', 'word']
    .map(
      // capitalizes first letters of all array items except the first one
      // converts ['my', 'long', 'word'] into ['my', 'Long', 'Word']
      (word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1)
    )
    .join(''); // joins ['my', 'Long', 'Word'] into 'myLongWord'
}

 

하나의 인자를 이용해서 return 값을 구할 때는 굳이 매번 변수를 선언해주지 말고 위와 같이 연결할 수 있다.

 

---

참고

https://ko.javascript.info/array-methods

배열과 메서드