다음과 같은 형식의 문자열이 있다고 가정해 보겠습니다.
const str = 'dress/cotton/black, dress/leather/red, dress/fabric, houses/restaurant/small, houses/school/big, person/james';
이 문자열을 받아서 각 카테고리(dress, houses, person)를 키로 하고, 그 뒤에 오는 값들을 모아 담은 배열을 값으로 갖는 객체를 만들어야 합니다. 즉, 최종적으로 다음과 같은 구조가 되어야 합니다.
const output = {
dress: ["cotton", "leather", "black", "red", "fabric"],
houses: ["restaurant", "school", "small", "big"],
person: ["james"]
};해결 방법
핵심 접근 방식은 두 단계로 나눌 수 있습니다. 먼저 전체 문자열을 쉼표 기준으로 분리해 개별 경로를 얻고, 다시 각 경로를 슬래시(/) 기준으로 분리합니다. 이때 첫 번째 요소는 객체의 키가 되고, 나머지 요소들은 해당 키에 연결된 배열에 순서대로 추가됩니다.
const str = 'dress/cotton/black, dress/leather/red, dress/fabric, houses/restaurant/small, houses/school/big, person/james';
const buildObject = (str = '') => {
const result = {};
const strArr = str.split(', ');
strArr.forEach(el => {
const values = el.split('/');
const key = values.shift();
result[key] = (result[key] || []).concat(values);
});
return result;
};
console.log(buildObject(str));
실행 결과
위 코드를 실행하면 콘솔에 다음과 같이 출력됩니다.
{
dress: [ 'cotton', 'black', 'leather', 'red', 'fabric' ],
houses: [ 'restaurant', 'small', 'school', 'big' ],
person: [ 'james' ]
}코드 동작 원리
- str.split(', ') : 전체 문자열을 쉼표와 공백을 기준으로 분리하여 각 경로를 담은 배열을 만듭니다.
- el.split('/') : 각 경로를 슬래시 기준으로 분리합니다. 예를 들어 'dress/cotton/black'은 ['dress', 'cotton', 'black']이 됩니다.
- values.shift() : 배열의 첫 번째 요소('dress')를 제거하면서 반환받아 객체의 키로 사용합니다.
- result[key] || [] : 해당 키가 아직 객체에 없으면 빈 배열로 초기화하고, concat()으로 남은 값들을 이어 붙여 누적합니다.
이처럼 split(), shift(), concat() 세 가지 메서드만 활용하면 중첩 반복문 없이도 깔끔하게 원하는 구조의 객체를 만들 수 있습니다.