[Javascript] split - 정수 배열 만들기

var list = "1,2,3,4,5,6,7,8".split(",").map(function(num){ return parseInt(num); });

 

 일반적으로 문자열값을 배열로 만들 때 사용하는 함수는 split입니다. 하지만 이때 split는 문자열 기준이기 때문에, 결과가 문자열 기준으로 반환됩니다.

문자열 형태가 split된 결과

 하지만 이 결과는 개발자가 원하지 않는 결과를 가져오기도 합니다.

 만약, 해당 split된 배열중에서 4가 몇 번째 순번에 있는지 indexOf 함수를 사용하여 확인하려고 한다면,

x값 4는 split 된 list의 "4" 위치를 알지 못함

 결과가 위와 같이 -1이 반환됩니다. 이유는 list에 있는 4는 문자열이고, 비교 대상인 x값 4는 정수이기 때문입니다. 아무리 변수 속성을 보지 않는다는 javascript이지만, 이렇게 문자열이냐 정수냐를 비교하고는 합니다.

 

 이 경우 쉽게 생각해볼 수 있는 방법은 비교값인 x를 문자열로 변환하는 것입니다.

x값을 문자열로 변환

 가장 손쉬운 방법이지만, 만약 x값을 어디에선가 받아온다면 어떻게 해야 할까요? (받아온 값이 정수인지 문자열인지 파악이 어려운 경우) 이 경우에는 아래와 같이도 가능합니다.

 이 경우에도 물론 위에서 처럼 x값을 문자열로 바꿔주면 되지만, x가 받아오는 정보 (파라미터 또는 Database 등등)라고 한다면, 변환이 필요할 겁니다. 이 경우에도 물론 아래와 같이 가능합니다.

toString을 사용하여 변수 val값 변환

이렇게 find 함수 첫 번째 줄이 toString으로 값을 변환해주면 됩니다. 단, find의 val이 들어오지 않는 경우 아래와 같이 오류가 발생하므로 예외처리는 필요합니다.

val값이 들어오지 않는 경우 형변환 오류 발생

형변환 오류에  대한 오류 방지

 하지만 개발에서 전달 파라미터를 최대한 가공하면 기존에 의도와는 다른 결과가 발생할 가능성이 있기 때문에 웬만하면 전달 파라미터는 가공하지 않는 것이 좋습니다. 그러면 비교 대상인 list를 정수형 배열로 바꿔주면 어떻게 될까요?

 list를 변환한 경우 형변환하지 않아도 empty 값이 처리되지만, 오히려 문자열에 대한 결과가 -1로 반환됩니다. 이 경우에는 오히려 반대로 정수인지 체크하는 isNaN을 사용해서 아래와 같이 작성해도 됩니다.

 위와 같은 방식으로 처리하는 경우 빛을 발하는 경우는 int형 보다 float형 일 때 보입니다.

 기존 함수의 parseInt를 parseFloat로 변환해주고 위와 같이 값을 3 또는 3.0을 넣고 확인해 보면, 위와 같이 index가 2라고 반환되지만, 만약 해당 값이 문자열인 경우에는 정확히 소수점 아래 0 또는 그 외 숫자까지 일치하여야 하므로 값을 찾는 게 쉽지 않을 겁니다. (물론 방법이 없는 건 아닙니다.)