JavaScript에서 구분자(|)가 포함된 문자열을 객체 배열로 변환하는 방법

JavaScript로 개발을 하다 보면 특정 구분자로 이어진 문자열 데이터를 다뤄야 하는 경우가 종종 있습니다. 이번 글에서는 |(파이프) 기호로 구분된 문자열을 옵션 이름과 값으로 분리하여 객체 배열 형태로 변환하는 방법을 알아보겠습니다.

문제 상황

다음과 같은 문자열이 있다고 가정해 보겠습니다.

const str = 'Option 1|false|Option 2|false|Option 3|false|Option 4|true';

이 문자열은 옵션 이름과 값(true/false)이 | 기호를 기준으로 번갈아 가며 나열되어 있습니다.

우리가 만들 함수는 이러한 문자열을 입력받아, 각 옵션과 그 값을 짝지은 객체들의 배열로 반환해야 합니다. 즉, 원하는 출력 결과는 다음과 같습니다.

const output = [
  {
    "option": "Option 1",
    "value": false
  },
  {
    "option": "Option 2",
    "value": false
  },
  {
    "option": "Option 3",
    "value": false
  },
  {
    "option": "Option 4",
    "value": true
  }
];

해결 방법: 반복문을 활용한 변환 함수

핵심 아이디어는 간단합니다.

split('|') 메서드로 문자열을 배열로 쪼갭니다.
배열의 요소를 두 개씩 건너뛰며 순회합니다. 홀수 인덱스는 옵션 이름, 짝수 인덱스(바로 뒤)는 값에 해당하기 때문입니다.
값 부분은 JSON.parse()를 사용해 문자열 'false'/'true'를 실제 불리언 타입으로 변환합니다.
옵션과 값을 하나의 객체로 묶어 결과 배열에 추가(push)합니다.

이 로직을 코드로 구현하면 다음과 같습니다.

예제 코드

const str = 'Option 1|false|Option 2|false|Option 3|false|Option 4|true';

const stringToObject = (str = '') => {
  const res = [];
  for (
    let i = 0, a = str.split('|');
    i < a.length;
    i += 2
  ) {
    const option = a[i];
    const value = JSON.parse(a[i + 1]);
    res.push({ option, value });
  }
  return res;
};

console.log(stringToObject(str));

실행 결과

위 코드를 실행하면 콘솔에 아래와 같은 결과가 출력됩니다.

[
  { option: 'Option 1', value: false },
  { option: 'Option 2', value: false },
  { option: 'Option 3', value: false },
  { option: 'Option 4', value: true }
]

코드 동작 방식 살펴보기

코드가 어떻게 동작하는지 단계별로 정리하면 다음과 같습니다.

str.split('|')을 호출하면 문자열이 ['Option 1', 'false', 'Option 2', 'false', ...] 형태의 배열로 변환됩니다.
for 루프는 인덱스를 i += 2만큼 증가시키므로, 한 번의 반복마다 옵션 이름(a[i])과 값(a[i + 1])을 함께 처리합니다.
JSON.parse(a[i + 1])는 문자열 "false" 또는 "true"를 실제 불리언 값으로 변환해 줍니다.
ES6의 단축 속성명(shorthand property) 문법인 { option, value } 덕분에 코드가 더 간결해집니다.

추가 팁: map()을 활용한 함수형 접근

반복문 대신 Array.prototype.map()을 활용하면 더 선언적인 방식으로 같은 결과를 얻을 수 있습니다.

const stringToObject = (str = '') => {
  const parts = str.split('|');
  return parts
    .filter((_, i) => i % 2 === 0)
    .map((option, i) => ({
      option,
      value: JSON.parse(parts[i * 2 + 1])
    }));
};

두 방식 모두 동일한 결과를 반환하지만, 팀의 코드 스타일이나 가독성 선호도에 따라 적절한 방식을 선택하시면 됩니다.

마무리

이처럼 구분자로 연결된 문자열은 split()과 간단한 반복 처리만으로 손쉽게 구조화된 객체 배열로 변환할 수 있습니다. 실무에서는 설정 파일 파싱, 폼 데이터 처리, CSV 유사 데이터 변환 등 다양한 곳에서 응용할 수 있으니 참고하시기 바랍니다.