잘 알려진 것처럼 자바스크립트에서 변수는 선언시에 타입을 지정하지 않는다. 어떤 형태의 값이든 담을 수 있지만 종종 담겨진 값을 특정 타입으로 변환할 필요가 생길 때도 있다.
최근 코딩 중에 문득 문자를 숫자로 바꾸는 가장 좋은 방법(혹은 깔끔한 스타일)은 무엇일까 궁금해졌다.
마침 http://jsperf.com/ 에 잘 설계되어 있는 벤치마크가 있어서 해당 내용을 정리해보려고 한다.
각 변환 방법들에 대한 브라우저별 속도 비교
http://jsperf.com/best-of-string-to-number-conversion-allowing-defaultnan
위의 링크에 가면 직접 브라우저상에서 속도 테스트를 수행해 볼 수 있다. 위의 테스트 결과 그래프는 브라우저들 중 일부의 결과를 인용했는데, 사실 다른 브라우저들에서도 엎치락 뒷치락하며 각 방법별로 큰 차이를 보여주지는 않는 것을 볼 수 있다.
최대 약 10% 정도 차이가 나는데, 테스트를 반복할 때마다 수치가 달라지고 느리고 빠른 방법이 자주 바뀌는 것으로보아 절대적으로 성능상 우위에 있는 방법은 따로 없다고 봐도 좋을 것 같다.
비트 연산을 활용하는 방법
//Bitwise Bitwise Right Shift var num = "111" >>> 0 //Bitwise Right Shift var num = "111" >> 0 //Bitwise Left Shift var num = "111" << 0 //Bitwise OR var num = 0 | "111" //Bitwise XOR var num = 0 ^ "111" //Bitwise NOT NOT var num = ~~"111"
비트 연산을 사용하는 방법은 위의 여섯 가지 정도로 요약된다. 대부분 0과 비트 연산을 수행할 경우 자동으로 숫자로 변환된다는 것을 알 수 있다.
비트 연산을 하게 될 경우 "123.001" 과 같이 소수점이 있는 숫자는 모두 정수로 변환된다는 점을 주의해야 한다. 소수점을 가진 숫자나 문자열을 정수로 변경해야한다면 위의 방법들로 간단하게 구현 가능하다.
함수를 활용하는 방법
//parseInt()
var num = parseInt("111")
//parseFloat()
var num = parseFloat("111")
//Number()
var num = Number("111")자바스크립트에서 기본적으로 제공하는 함수를 활용하는 방법이다.
parseInt 함수를 사용하면 소수점을 포함하는 숫자나 문자열도 정수로 변환된다는 점을 주의해야 한다.
Number 함수는 자바스크립트에서 형변환을 위해 제공하는 함수이기 때문에 가장 의도를 잘 나타내는 코드를 작성할 수 있는 장점이 예상(?)된다.
그 밖의 방법
//implicit var num = +"111" var num = 1 * "111" var num = "111" / 1
그 밖에도 더하기나 곱하기, 나누기 등의 연산을 시도하면 자동 형변환이 되는 특징을 사용할 수도 있다.
마치며
지금까지 자바스크립트에서 문자를 숫자로 바꾸는 방법에 대해서 알아봤다. 사실 시작은 성능상 가장 이점이 있는 방법을 찾기 위함이었지만, 살펴본 것처럼 각 방법들간에 큰 성능차는 확인할 수 없었다.
형변환을 위해 자바스크립트에서 제공하는 Number 함수를 사용하는 것이 읽기 좋은 코드를 작성하는데 그나마 도움이 될 수 있을 것 같고, 그 외의 방법은 기호에 따라 적절히 선택해서 사용해도 큰 문제는 없을 것으로 보인다.
