자바스크립트 split() 메서드 완벽 가이드: 문자열을 배열로 분할하는 방법

자바스크립트의 split() 메서드는 하나의 문자열을 여러 개의 부분 문자열(substring)로 나눈 뒤, 그 결과를 새로운 배열에 담아 반환합니다. 프로그래밍을 하다 보면 긴 문자열에서 원하는 텍스트만 추출해야 하는 경우가 자주 발생하는데, 이럴 때 split() 메서드가 가장 유용하게 사용됩니다.

예를 들어 하나의 문자열에 담겨 있는 사용자의 이름과 성을 각각 따로 가져오고 싶다면 어떻게 해야 할까요? 이 가이드에서는 split() 메서드의 사용법을 다양한 예제와 함께 자세히 알아보겠습니다.

문자열(String) 기본 개념 복습

split() 메서드를 본격적으로 살펴보기 전에, 문자열이 어떻게 동작하는지 간단히 짚고 넘어가겠습니다. 문자열은 문자, 숫자, 특수 기호 등 하나 이상의 문자가 연속된 형태를 의미합니다.

문자열의 각 문자는 인덱스(index) 번호를 통해 접근할 수 있으며, 인덱스는 0부터 시작합니다. 다음 예시를 통해 문자열의 인덱싱 방식을 확인해 보겠습니다.

위 예시에서 첫 번째 문자 'H'의 인덱스 값은 0이며, 마지막 문자 'e'의 인덱스 값은 10입니다. 주목할 점은 두 단어 사이의 공백도 하나의 문자로 취급되어 고유한 인덱스 값을 가진다는 것입니다.

자바스크립트 split() 메서드란?

자바스크립트의 split() 메서드는 문자열을 지정한 구분자(separator)를 기준으로 여러 개의 부분 문자열로 분리하고, 그 결과를 새로운 배열에 저장해 반환합니다. 구분자는 공백이나 쉼표처럼 문자열을 나눌 기준이 되는 문자입니다.

split() 메서드의 기본 문법은 다음과 같습니다.

var new_list = text.split(character, limit);

• text: 분할하고자 하는 원본 문자열입니다.
• character (구분자): 문자열을 나눌 기준이 되는 문자입니다. 생략하면 문자열 전체가 하나의 요소로 담긴 배열이 반환됩니다.
• limit (개수 제한): 최종 배열에 포함할 부분 문자열의 최대 개수를 지정합니다. 선택적으로 사용할 수 있습니다.

split() 메서드는 원본 문자열 변수 뒤에 붙여 사용하며, 실행 결과는 반드시 새로운 변수에 할당해야 합니다. split()은 기존 문자열을 직접 수정하지 않고 새로운 배열을 생성하기 때문입니다.

split() 메서드 실전 예제

사용자가 자신의 이름과 성을 하나의 문자열로 입력했다고 가정해 보겠습니다. 예를 들어 로그인 후 "홍길동님, 안녕하세요"처럼 전체 이름 대신 이름만 화면에 표시하고 싶다면, split() 메서드를 활용하면 됩니다.

다음 코드는 공백 문자를 구분자로 사용해 문자열을 분리합니다.

var fullName = "Forename Surname";
var fullNameSplit = fullName.split(" ");

console.log(fullNameSplit);

실행 결과는 다음과 같습니다.

["Forename", "Surname"]

split() 메서드가 문자열을 부분 문자열의 배열로 성공적으로 분할했습니다. 이제 배열의 각 요소에는 인덱스 번호를 이용해 접근할 수 있습니다.

fullNameSplit[1];

실행 결과:

Surname

split() 메서드는 배열을 반환하므로, 배열의 인덱스를 통해 개별 값에 자유롭게 접근할 수 있습니다. 위 예제에서는 인덱스 1에 해당하는 값, 즉 두 번째 단어를 가져왔습니다.

limit 매개변수로 분할 개수 제한하기

두 번째 매개변수인 limit을 사용하면 배열에 담길 부분 문자열의 개수를 제한할 수 있습니다.

var fruits = "apple, banana, cherry";
var result = fruits.split(",", 2);

console.log(result);

실행 결과:

["apple", "banana"]

쉼표를 구분자로 세 개의 과일 이름이 있지만, limit을 2로 지정했기 때문에 앞의 두 개 요소만 배열에 포함되었습니다.

문자열을 배열 하나로 변환하기

구분자를 지정하지 않고 split()을 호출하면, 문자열 전체가 하나의 요소로 담긴 배열이 반환됩니다. 다음 코드를 살펴보겠습니다.

var name_as_list = name.split();
console.log(name_as_list);

실행 결과:

["Forename Surname"]

구분자를 지정하지 않았기 때문에 문자열이 여러 개의 부분 문자열로 나뉘지 않고, 문자열 전체가 하나의 요소로 name_as_list 변수에 저장되었습니다.

마무리

split() 메서드는 문자열을 지정한 구분자를 기준으로 나누어 부분 문자열 배열을 생성합니다. 공백, 쉼표 등 어떤 문자든 구분자로 사용할 수 있으며, 인덱싱을 통해 문자열 내 개별 단어나 값에 손쉽게 접근할 수 있게 해주는 강력한 도구입니다.

참고로 split() 메서드에는 일반 문자열뿐만 아니라 정규표현식(regular expression)을 구분자로 전달할 수도 있으므로, 더 복잡한 패턴의 문자열 분할이 필요하다면 정규표현식 활용법도 함께 익혀두는 것을 추천합니다.