JavaScript split() 함수

📌 split() 함수란?

split() 함수는 문자열을 특정 구분자(separator)를 기준으로 나누어 배열로 만드는 함수이다. 문자열을 여러 부분으로 쪼개야 할 때 매우 유용하다.

---

🎯 기본 문법

문자열.split(구분자, 제한개수);

• 구분자(separator): 문자열을 나눌 기준이 되는 문자 (필수)
• 제한개수(limit): 배열의 최대 개수 (선택, 생략 가능)

---

💡 기본 예제

예제 1: 간단한 구분자 사용

const fruit = "apple,banana,orange";
const result = fruit.split(",");

console.log(result);
// 출력: ["apple", "banana", "orange"]

예제 2: 공백으로 나누기

const sentence = "Hello World JavaScript";
const words = sentence.split(" ");

console.log(words);
// 출력: ["Hello", "World", "JavaScript"]

예제 3: 빈 문자열로 나누기

const text = "ABC";
const chars = text.split("");

console.log(chars);
// 출력: ["A", "B", "C"]

---

🔧 파라미터 상세 설명

1) 구분자(separator)

문자열 구분자

const date = "2024-11-19";
const parts = date.split("-");
console.log(parts); // ["2024", "11", "19"]

정규표현식 구분자

const text = "apple123banana456cherry";
const result = text.split(/[0-9]+/);
console.log(result); // ["apple", "banana", "cherry"]

구분자 생략 (전체 배열로 반환)

const text = "Hello";
const result = text.split();
console.log(result); // ["Hello"]

2) 제한개수(limit)

const fruits = "apple,banana,orange,mango";

// 제한개수 없음
console.log(fruits.split(",")); 
// ["apple", "banana", "orange", "mango"]

// 제한개수 2개
console.log(fruits.split(",", 2)); 
// ["apple", "banana"]

// 제한개수 3개
console.log(fruits.split(",", 3)); 
// ["apple", "banana", "orange"]

---

📚 실전 예제들

예제 1: CSV 데이터 처리

const csvData = "이름,나이,직급";
const [name, age, position] = csvData.split(",");

console.log(name);      // "이름"
console.log(age);       // "나이"
console.log(position);  // "직급"

예제 2: URL에서 쿼리 파라미터 추출

const url = "https://example.com?name=John&age=30";
const queryString = url.split("?")[1]; // "name=John&age=30"
const params = queryString.split("&");

console.log(params); // ["name=John", "age=30"]

예제 3: 파일명과 확장자 분리

const filename = "document.pdf";
const parts = filename.split(".");

const name = parts[0];      // "document"
const extension = parts[1]; // "pdf"

console.log(`이름: ${name}, 확장자: ${extension}`);
// 출력: 이름: document, 확장자: pdf

예제 4: 전화번호 포맷팅

const phone = "01012345678";
const parts = phone.split("");
const formatted = `${parts.slice(0, 3).join("")}-${parts.slice(3, 7).join("")}-${parts.slice(7).join("")}`;

console.log(formatted); // "010-1234-5678"

예제 5: 경로에서 마지막 폴더명 추출

const path = "C:/Users/Documents/MyProject";
const folders = path.split("/");
const lastFolder = folders[folders.length - 1];

console.log(lastFolder); // "MyProject"

---

⚠️ 자주 하는 실수

실수 1: 구분자 지정 안 함

// ❌ 잘못된 예
const text = "a,b,c";
const result = text.split();
console.log(result); // ["a,b,c"] - 나뉘지 않음!

// ✅ 올바른 예
const result = text.split(",");
console.log(result); // ["a", "b", "c"]

실수 2: 존재하지 않는 구분자 사용

const text = "apple,banana,orange";
const result = text.split(";"); // ";"가 없음
console.log(result); // ["apple,banana,orange"] - 원본 문자열 그대로

실수 3: split 후 공백 처리 안 함

// ❌ 문제: 불필요한 공백 포함
const text = "apple , banana , orange";
const result = text.split(",");
console.log(result); // ["apple ", " banana ", " orange "]

// ✅ 해결: map으로 공백 제거
const cleaned = text.split(",").map(item => item.trim());
console.log(cleaned); // ["apple", "banana", "orange"]

---

🔄 split()과 다른 메서드 함께 사용하기

join()과 함께 사용 (나누었다가 다시 붙이기)

const text = "hello-world-javascript";
const result = text
  .split("-")           // ["hello", "world", "javascript"]
  .map(word => word.charAt(0).toUpperCase() + word.slice(1))
  .join(" ");           // 다시 붙이기

console.log(result); // "Hello World Javascript"

filter()와 함께 사용 (빈 값 제거)

const text = "apple,,banana,,orange"; // 빈 값이 있음
const result = text
  .split(",")
  .filter(item => item !== ""); // 빈 값 제거

console.log(result); // ["apple", "banana", "orange"]

---

📝 요약

기능	설명
기본 사용	문자열.split("구분자")
반환값	배열
원본 변경	아니오 (새로운 배열 생성)
구분자 미지정	전체 문자열을 배열 요소 1개로 반환
제한개수	배열 크기 제한 가능

---

🎓 마치며

split() 함수는 데이터를 처리할 때 매우 자주 사용되는 기본적이지만 강력한 도구다. 문자열을 나누고 가공하는 많은 작업에서 활용할 수 있으니, 다양한 예제를 직접 시도해보며 익숙해지는 것을 권장한다.