snake_case to cameCase

SYhwang·2023년 1월 12일
0

snake case로 작성된 변수명을 camel case로 바꿔 쓰다가 든 생각. 함수로 작성할 수 있지 않을까?
고민과 검색 끝에 다음과 같은 코드를 작성했다.

1. snake_case 로 이루어진 string을 cameCase로 변환하기

    
    function camelCase(string) {
      return string.split("_").reduce((acc, cur) => 
     	 acc + (cur.charAt(0).toUpperCase()+ cur.slice(1)) );
    }
    
    camelCase('camel_test_abc') //camelTestAbc 리턴

위 camelCase()함수의 실행 과정은 다음과 같다.

  1. .split("_")을 이용해 주어진 'camel_test_abc' 를 [ 'camel' , 'test', 'abc' ] 로 분리한다.

  2. . reduce(acc, cur)를 이용해 위 배열의 요소들을 합친다.
    reduce는 콜백 함수를 사용해 배열 안의 모든 요소를 차례대로 연산한 뒤 하나의 값을 리턴한다 (인자의 초기값을 지정하지 않으면 배열의 요소가 인덱스 0부터 순서대로 들어간다.)
    따라서 acc = 'camel', cur = 'test'로 실행되어 camel + test.charAt(0).toUpperCase() + test.slice(1) 를 진행한다.

  3. 'test'의 첫 글자를 .charAt[0]으로 분리한 결과 't'를 .toUpperCase를 사용해 대문자 'T'로 변환하고, .slice(1)로 두 번째 글자부터 마지막 글자까지를 잘라내 'est'를 남긴다. 여기까지 진행되고 나면 camel + T + est, 즉 camelTest가 되었다.
    이 과정이 끝나면 reduce는 camelTest를 acc에 저장하고, 세 번째 요소인 abc를 cur에 저장해 동일한 과정을 반복한다. 반복이 끝나면 camelTestAbc를 결과로 리턴하게 된다.

2. 배열 안의 string들을 한번에 camelCase로 변환하기

	const snakeCaseData = ['id', 'first_name', 'last_name', 'mobile_number']

	const camelCaseData = snakeCaseData.map(function (key) {
		return camelCase(key); // ['id', 'firstName', 'lastName', 'mobileNumber'] 리턴
     })

['id', 'first_name', 'last_name', 'mobile_number'] 으로 이루어진 배열 안의 요소들을 camelCase로 변환한 새로운 배열을 반환하는 코드이다.

  1. .map() method를 사용했다. map() 은 배열 안의 모든 요소에 대해 동일한 연산을 수행한 뒤 해당 연산의 결과값들로 이루어진 배열을 반환한다.

  2. .map() 안에 아까 작성한 camelCase 함수를 실행하도록 작성하면 , 각각의 요소에 대해 camelCase 함수를 실행한 뒤 그 결과값으로 새로운 배열 ['id', 'firstName', 'lastName', 'mobileNumber'] 를 반환하게 된다.

0개의 댓글