자바스크립트에서 두 개의 쉼표 구분 문자열로 객체 생성하기

이번 글에서는 쉼표(,)로 구분된 두 개의 문자열을 입력받아 하나의 객체(Object)를 생성하는 자바스크립트 함수를 만들어 보겠습니다.

첫 번째 문자열은 키(key)가 담긴 문자열이고, 두 번째 문자열은 값(value)이 담긴 문자열입니다. 두 문자열에 포함된 요소의 개수는 항상 동일하다고 가정하며, 우리가 작성할 함수는 첫 번째 문자열의 각 키에 두 번째 문자열의 대응되는 값을 매핑한 객체를 반환해야 합니다.

문제 이해하기

예를 들어 키 문자열이 [atty_hourly_rate], [paralegal_hourly_rate], [advanced_deposit]이고 값 문자열이 250, 150, 500이라면, 최종 결과는 atty_hourly_rate: '250', paralegal_hourly_rate: '150', advanced_deposit: '500' 형태의 객체가 되어야 합니다.

구현 단계

1단계: 키 문자열 분리하기

split(',') 메서드로 키 문자열을 배열로 나눈 뒤, map()과 slice(1, -1)를 사용해 각 항목 앞뒤의 대괄호([ ])를 제거합니다.

const keys = str1.split(',').map(a => a.slice(1, -1));

2단계: 값 매핑으로 객체 완성하기

값 문자열 역시 split(',')으로 나눈 후 reduce()를 활용합니다. 초기값으로 빈 객체 {}를 지정하고, 각 값을 인덱스 i에 해당하는 키에 차례대로 할당하면 됩니다.

const object = str2.split(',').reduce((r, a, i) => {  r[keys[i]] = a;  return r;}, {});

전체 코드

const str1 = '[atty_hourly_rate],[paralegal_hourly_rate],[advanced_deposit]';const str2 = '250,150,500';const mapStrings = (str1 = '', str2 = '') => {  const keys = str1.split(',').map(a => {    return a.slice(1, -1);  });  const object = str2.split(',').reduce((r, a, i) => {    r[keys[i]] = a;    return r;  }, {});  return object;};console.log(mapStrings(str1, str2));

실행 결과

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

{  atty_hourly_rate: '250',  paralegal_hourly_rate: '150',  advanced_deposit: '500'}

마무리

split(), map(), reduce()만 잘 조합하면 별도의 반복문 없이도 두 문자열을 깔끔하게 하나의 객체로 결합할 수 있습니다. CSV 데이터나 설정 문자열을 파싱할 때 특히 유용한 패턴이므로 익혀 두면 좋습니다.