JavaScript에서 문자열의 공백을 제거하고 배열로 분할하는 방법

문제 상황

JavaScript를 사용하다 보면 쉼표(,)로 구분된 문자열을 배열로 변환해야 하는 경우가 자주 발생합니다. 예를 들어 다음과 같은 문자열이 있다고 가정해 보겠습니다.

const str = "a, b, c, d , e";

이 문자열에는 요소 사이에 불필요한 공백이 포함되어 있습니다. 단순히 split(',')만 실행하면 ' d '처럼 공백이 섞인 값이 배열에 그대로 남게 되어 원하는 결과를 얻기 어렵습니다.

따라서 우리가 작성해야 할 함수는 다음 두 가지 작업을 순차적으로 수행해야 합니다.

문자열에 포함된 모든 공백(whitespace) 제거
공백이 제거된 문자열을 쉼표를 기준으로 분할하여 배열로 반환

반복문을 활용한 구현

먼저 반복문으로 공백을 직접 제거한 뒤 분할하는 방식의 코드입니다.

const str = "a, b, c, d , e";

const shedAndSplit = (str = '') => {
  const removeSpaces = () => {
    let res = '';
    for(let i = 0; i < str.length; i++){
      const el = str[i];
      if(el === ' '){
        continue;
      };
      res += el;
    };
    return res;
  };
  const res = removeSpaces();
  return res.split(',');
};

console.log(shedAndSplit(str));

코드 동작 원리

removeSpaces 함수: 문자열을 한 글자씩 순회하면서 공백(' ')인 경우 continue로 건너뛰고, 나머지 문자만 새로운 문자열에 이어 붙여 공백 없는 문자열을 만듭니다.
split 메서드: 공백이 제거된 문자열을 쉼표(',')를 기준으로 분할하여 문자열 배열을 생성하고 반환합니다.

실행 결과

콘솔에는 다음과 같이 모든 공백이 제거된 깔끔한 배열이 출력됩니다.

[ 'a', 'b', 'c', 'd', 'e' ]

더 간결한 대안: replace()와 정규식 활용

위 방식은 반복문을 사용하기 때문에 코드가 다소 길어집니다. replace() 메서드와 정규식을 조합하면 훨씬 간결하게 같은 결과를 얻을 수 있습니다.

const shedAndSplit = (str = '') => str.replace(/\s+/g, '').split(',');

console.log(shedAndSplit("a, b, c, d , e"));
// [ 'a', 'b', 'c', 'd', 'e' ]

정규식 /\s+/g는 하나 이상 연속된 모든 공백 문자를 의미하며, 전역 플래그(g) 덕분에 문자열 전체에서 일치하는 모든 공백을 빈 문자열로 치환합니다. 탭이나 줄바꿈 등 다른 종류의 공백 문자까지 함께 처리할 수 있다는 점도 장점입니다.

마무리

쉼표로 구분된 문자열을 배열로 변환할 때는 공백 처리가 중요합니다. 학습 목적이라면 반복문 방식으로 로직을 이해하고, 실무에서는 replace(/\s+/g, '').split(',')처럼 정규식과 결합한 한 줄 코드를 활용하는 것이 효율적입니다.