[javascript] 문자열을 배열로 만드는 자바스크립트 함수

문자열과 배열은 자바스크립트에서 밀접한 관련을 가지고 있습니다.

웹에서 입력 받는 모든 입력 값들은 기본적으로 문자열이기 때문에 문자열 입력을 배열 데이터로 변경해 여러가지 처리를 편리하게 할 수 있기 때문에 문자열 데이터는 많은 경우에 내부적으로 배열로 변경해 처리하게 됩니다.

자바스크립트에서는 split() 메서드가 이 역할을 담당하며, 강력한 기능을 제공합니다.

split() 메서드를 활용해 배열을 제어하는 다양한 방법들을 알아봅니다.

문자열을 배열로 만들때는 문자열 안의 내용이 무엇인가가 중요합니다.

문자열의 문자 1개씩을 단순히 배열로 변환해서 반환받을 건지, 별도의 구분자로 문자열을 나누어서 반환받을 건지를 정해야 합니다.

문자열을 문자 배열로 만들기

배열 메서드 from() 을 사용합니다.

문자열 안의 문자 1개를 하나의 배열요소로 변환합니다.

반환하는 배열은 중간 함수를 이용해 재가공을 할 수 있어 다양하게 활용할 수 있습니다.

const str1 = '1234567890';const str2 = 'abcdefghijk';
const arr_str1 = Array.from(str1);const arr_str2 = Array.from(str2, function(el){return el + ','});
console.log(arr_str1);console.log(arr_str2);

두번째 중간 함수 구현은 조금더 세련되게 화살표 함수를 사용해

const arr_str3 = Array.from(str2, el => el + ',');console.log(arr_str3);

이렇게 구현할 수도 있습니다.

from() 메서드와 배열을 하나의 문자열로 합치는 join() 메서드를 활용하면 문자 사이에 구분자가 들어간 하나의 문자열을 만드는 것도 가능합니다.

str2를 문자 배열로 바꾸면서 맵함수를 사용해 뒤에 쉼표를 붙입니다. 맵함수는 2번째 인자로 인덱스 위치를 넘길 수 있기 때문에 마지막 배열 요소 뒤에는 쉼표가 붙지 않도록 예외 처리를 해줍니다.

이렇게 반환된 배열을 join() 메서드로 하나의 문자열로 다시 합치면 각 문자가 쉼표로 구분된 하나의 문자열을 다시 만들 수 있습니다.

const str3 = Array.from(str2, (el,idx) => el + (idx<str2.length-1?',':'')).join('');console.log(str3);

화살표 함수(=>)에 대해선는 다른 부분에서 배우게 되므로 여기서는 이런게 있구나 하고 일단 넘어갑니다.

화살표 함수는 함수 표현을 짧게 표기할 수 있기 때문에 가독성이 좋아지는 장점이 있습니다.

구분자로 문자열을 배열로 나누기

split() 메서드를 사용해 하나의 문자열을 구분자를 사용해 문자열 배열로 나눕니다.

from() 메서드와 달리 나누어진 각 배열 요소는 문자열이 됩니다.

split() 메서드는 파일에서 읽은 데이터를 줄단위로 나누거나, 구분자 단위로 나누어서 정형화된 데이터를 만들때 주로 사용합니다.

split() 메서드를 사용하면 CSV 파일도 빠르게 2차원 배열로 재가공할 수 있습니다.

const str1 = '사과, 배, 복숭아, 포도, 귤, 한라봉';const str2 = `시애틀서울부산센프란시스코벤쿠버`
const arr_str1 = str1.split(', '); // 구분자를 문자열로 사용 가능
const arr_str2 = str2.split('\n'); // 개행문자와 같은 제어문자 사용 가능
console.log(arr_str1);console.log(arr_str2);

문자열 일부만 배열로 가져오기

split() 메서드는 두번째 인자를 사용할 수 있습니다.

두번째 인자는 구분자로 구분해 가져오는 배열의 요소 갯수를 한정하는 한정자 역할을 합니다.

const str2 = '아주, 아주 여러해 전, 어느 바닷가 왕국에, 당신도 알지 모를 한 소녀가 살았다네, 그녀 이름은 애너밸 리';
console.log(str2.split(', ', 2)); // ["아주", "아주 여러해 전"] 반환

한정자 길이가 2이므로 앞에서부터 2개까지만 배열 요소를 가져와 배열로 반환합니다.

정규표현식(Regular Expression)을 분리 구분자로 사용하기

정규표현식을 사용하면 복잡현 형태의 구분자를 구현해 배열로 만들 수 있습니다.

아래와 같은 문장을 배열로 분리를 할 경우

const str3 = '아주, 아주 여러해 전 ,  어느 바닷가 왕국에,당신도 알지 모를 한 소녀가 살았다네 . 그녀 이름은 애너밸 리';

', ' - '쉼표공백1개' 로 구분자를 사용하게 되면 

// ["아주", "아주 여러해 전 ", " 어느 바닷가 왕국에,당신도 알지 모를 한 소녀가 살았다네 . 그녀 이름은 애너밸 리"] 반환
console.log(str3.split(', '));

불규칙한 구분자 패턴을 졍규표현식 /\s*[\,|\.]\s*/ 으로 구분을 하게 되면

//["아주", "아주 여러해 전", "어느 바닷가 왕국에", "당신도 알지 모를 한 소녀가 살았다", "그녀 이름은 애너밸 리"] 반환
console.log(str3.split(/\s*[\,|\.]\s*/));

이렇게 깨끗하게 배열 요소의 앞뒤에 공백까지 정리된 깨끗한 배열을 얻을 수 있습니다.

문자열을 뒤집기

split() 메서드의 문자 배열 분리 기능을 활용하면 문자열을 간편하게 반대로 뒤집을 수 있습니다.

const str4 = 'abcdefghijklmnopqrstuvwxyz';console.log(str4.split('').reverse().join(''));
const str5 = '아주 오래전 바닷가 어느 왕국에 당신이 알지도 모를 한 소녀가 살았다.';
console.log(str5.split(' ').reverse().join(' ')); //쉼표를 구분자로 해서 단어 단위로 문자열 반전