JavaScript 문자열을 배열로 변환하기: `split()` 메서드 완벽 가이드

JavaScript에서 문자열 데이터를 다루다 보면, 특정 기준에 따라 문자열을 여러 조각으로 나누어 배열 형태로 다룰 필요가 생길 때가 많습니다. 이때 가장 유용하게 사용되는 메서드가 바로 `String.prototype.split()`입니다. 이 가이드에서는 `split()` 메서드의 기본적인 사용법부터 복잡한 시나리오까지, 다양한 예제와 함께 자세히 알아보겠습니다.

`String.prototype.split()` 메서드란?

`split()` 메서드는 특정 **구분자(separator)**를 기준으로 문자열을 여러 부분으로 나눈 후, 나눠진 부분들을 **배열**에 담아 반환하는 강력한 도구입니다.

문법:

str.split(separator, limit)
    

• `separator` (선택 사항): 문자열을 나눌 기준이 되는 문자열 또는 정규 표현식(Regular Expression)입니다.
  • 만약 `separator`를 생략하거나 `undefined`로 전달하면, 전체 문자열이 배열의 단일 요소로 들어갑니다.
  • `separator`가 빈 문자열(`""`)이면, 문자열의 각 문자가 개별 요소로 배열에 들어갑니다.
• `limit` (선택 사항): 배열에 포함될 최대 요소 수를 지정합니다. 이 수를 초과하는 부분은 버려집니다.

`split()` 메서드 활용 예제

1. 공백을 기준으로 문자열을 단어 배열로 분리

가장 흔한 사용 사례로, 문장을 단어 단위로 분리할 때 공백을 `separator`로 사용합니다.

const sentence = "Hello world! This is a JavaScript example.";

// 공백(' ')을 기준으로 문자열을 나눕니다.
// split() 메서드는 원본 문자열에서 모든 공백을 찾아 그 부분을 기준으로 문자열을 자르고,
// 잘려진 각 조각을 새로운 배열의 요소로 반환합니다.
const words = sentence.split(' ');

console.log("공백 기준 분리:", words);
// 출력: ["Hello", "world!", "This", "is", "a", "JavaScript", "example."]
    

2. 쉼표(`,`)를 기준으로 문자열 분리

CSV(Comma Separated Values)와 같이 쉼표로 구분된 데이터를 처리할 때 유용합니다.

const csvData = "apple,banana,orange,grape";

// 쉼표(,)를 기준으로 문자열을 나눕니다.
const fruitsArray = csvData.split(',');

console.log("쉼표 기준 분리:", fruitsArray);
// 출력: ["apple", "banana", "orange", "grape"]
    

3. 여러 글자의 특정 단어를 기준으로 분리

구분자가 한 글자가 아닌 여러 글자로 이루어진 단어나 문장일 수도 있습니다.

const textWithSeparator = "안녕하세요.---반갑습니다.---또 만나요.";
const separatorWord = "---";

// '---' 라는 특정 단어를 기준으로 문자열을 나눕니다.
const parts = textWithSeparator.split(separatorWord);

console.log("특정 단어 기준 분리:", parts);
// 출력: ["안녕하세요.", "반갑습니다.", "또 만나요."]
    

4. `limit` 인자 사용하기

결과 배열의 길이를 제한하고 싶을 때 `limit` 인자를 사용합니다. 이는 특히 큰 문자열을 다룰 때 메모리나 성능 최적화에 도움이 될 수 있습니다.

const longSentence = "The quick brown fox jumps over the lazy dog.";

// 공백을 기준으로 나누되, 최대 3개의 요소만 배열에 포함합니다.
// limit 인자(여기서는 3)는 split()이 반환할 배열의 최대 길이를 제한합니다.
// 초과하는 나머지 부분은 버려집니다.
const limitedWords = longSentence.split(' ', 3);

console.log("limit 인자 사용:", limitedWords);
// 출력: ["The", "quick", "brown"]
    

5. 정규 표현식(`RegExp`)을 구분자로 사용하기

더 복잡한 분리 기준이 필요할 때는 정규 표현식을 사용할 수 있습니다. 예를 들어, 공백이나 쉼표, 마침표 등 여러 구분자를 한꺼번에 처리하고 싶을 때 유용합니다.

const mixedSeparators = "Apple, Banana; Orange. Grape!";

// 공백, 쉼표, 세미콜론, 마침표, 느낌표 중 하나 이상을 기준으로 나눕니다.
// /[\s,;.!]+/:
//   - []: 문자 클래스, 괄호 안의 문자들 중 하나와 일치합니다.
//   - \s: 모든 공백 문자(스페이스, 탭, 줄바꿈 등)를 의미합니다.
//   - ,;.!: 리터럴 쉼표, 세미콜론, 마침표, 느낌표입니다.
//   - +: 앞의 패턴(여기서는 문자 클래스)이 한 번 이상 반복됨을 의미합니다.
const wordsWithRegex = mixedSeparators.split(/[\s,;.!]+/);

// 정규 표현식을 사용하면 구분자 위치에 따라 빈 문자열이 포함될 수 있습니다.
// .filter(Boolean)을 추가하여 배열에서 빈 문자열('')과 같은 falsy 값을 제거하여 깔끔한 결과를 얻습니다.
const cleanedWords = wordsWithRegex.filter(Boolean);

console.log("정규 표현식 분리 (원래 결과):", wordsWithRegex);
// 출력: ["Apple", "", "Banana", "Orange", "Grape", ""] (정규식 패턴에 따라 빈 문자열이 포함될 수 있음)
console.log("정규 표현식 분리 (정돈된 결과):", cleanedWords);
// 출력: ["Apple", "Banana", "Orange", "Grape"]
    

6. 빈 문자열을 기준으로 분리 (각 문자 분리)

문자열을 한 글자씩 나누어 배열로 만들려면 빈 문자열 `""`을 구분자로 사용합니다.

const greeting = "Hello";

// 빈 문자열('')을 기준으로 나누어 각 문자를 배열에 담습니다.
const characters = greeting.split('');

console.log("각 문자 분리:", characters);
// 출력: ["H", "e", "l", "l", "o"]
    

`split()` 메서드 사용 시 주의사항

• `split()` 메서드는 **원본 문자열을 변경하지 않고**, 항상 새로운 배열을 반환합니다.
• `separator`가 문자열에 존재하지 않으면, `split()`은 원본 문자열을 유일한 요소로 갖는 배열을 반환합니다.

  
  const str = "apple";
  const result = str.split("banana");
  console.log(result); // 출력: ["apple"]
              

`split()` 메서드를 잘 이해하고 활용하면 문자열 데이터를 효율적으로 파싱하고 원하는 형태로 조작하는 데 큰 도움이 될 것입니다. 다양한 상황에서 이 메서드를 사용해보면서 숙달해 보세요!