강좌 & 팁
|
[JavaScript] Number vs parseInt
프로젝트 때문에 웹 화면을 만지게 되다보니, 다시 JavaScript에 대해서 공부하게 되었네요. JavaScript를 사용하면서 궁금했던 부분이나 비교했던 부분들을 강좌로 적어볼까 합니다. ^^ JavaScript 에 대해서 쓰다보면 자연스럽게 Jquery로 넘어갈거 같습니다.
첫번째로 숫자로 변환하는 함수인 Number 와 parseInt 에 대해서 알아보도록 하겠습니다.
1. 디버깅
저는 주로 크롬 브라우저를 사용하는 편입니다. F12를 눌러서 Console 을 선택하거나 Ctrl + Shift + J 를 누르면 자바스크립트 콘솔창으로 넘어갑니다.
소스상에서 console.log(); 메시지로 값을 출력하면서 결과를 확인할 수 있습니다.
파이어폭스, 사파리, 익스플로러 등... 디버깅 모드가 있을거 같은데.. 제가 관심있게 안봐서 설명은 넘어가겠습니다.
2. Number Number 말 그대로 숫자입니다.
아래와 같이 1111 이라고 값을 넣어주면, 숫자로 인식하지만, 때로는 문자로 인식하기도 합니다.
var test1 = 1111;
그래서 int 형이라고 확실히 알수 있도록 아래와 같이 Number로 선언해줍니다.
var test1 = Number(1111);
3. parseInt
parseInt 는 말그대로 다른 형태의 값을 int 형태로 변경해줍니다.
아래와 같이 문자형태로 된 숫자가 있다고 할때, parseInt를 사용해서 int 형으로 변경할 수 있습니다.
var test2 = "1111";
test2 와 test3은 같은 1111 이지만, test2 는 문자로, test3 는 숫자로 표현됩니다.
3. Number 와 parseInt 비교 (1)
둘다 숫자를 나타내는 것으로 하나만 사용하면 될거 같은데 왜 둘다 있을까요?
몇가지 테스트를 통해서 비교를 해보겠습니다.
먼저 위의 parseInt 를 사용한 부분을 Number로 대입해보겠습니다.
var fa = "1234";
위의 내용을 웹 브라우져에서 실행해보면 아래와 같이 출력됩니다.
Number : 1234
숫자로 보이는 문자열을 int 형으로 변경하는 것은 동일합니다.
예전에 parseInt는 앞에 0이 붙어 있으면 8진수로 인식을 해서 값이 다르게 보이곤 했습니다. 지금도 똑같은지 확인해보도록 하겠습니다.
var fa = "01";
예전에는 아래와 같이 나왔습니다.
Number : 1
하지만, 언제부터인지는 모르겠지만, 요즘 브라우저에서는 동일하게 나타나네요. 어떤 것을 써도 별 문제가 없어보입니다.
Number : 1
예전에는 문자와 숫자가 같이 들어간 문자열 파싱도 달라졌는데, 요즘엔 결과가 동일하니 다음 단계로 넘어가겠습니다.
4. Number 와 parseInt 비교 (2)
Number 와 parseInt 가 다른 점이 있다면 parseInt는 진수별로 변환이 가능하다는 것이었습니다.
예를 들어 단순히 숫자가 아니라 2진수나 16진수 문자가 넘어왔을 때, 변경해서 처리를 해야할 때가 있습니다. 그런 경우에 parseInt로 비교를 하면 됩니다. parseInt 는 (값 , 진수) 처럼 사용할 수 있습니다.
아래는 0111 이라는 값이 넘어왔을 때, 처리하는 것을 예로 들었습니다.
var fa = "0111";
출력을 하면 아래와 같이 나타납니다. 진수 변환이 없는 Number 와 parseInt 의 경우는 0111에서 0을 뺀 111를 int 형으로 가져왔습니다.
하지만, 2진수로 형태로 선언한 parseInt는 111(2진수) -> 7(10진수) 로 변경하여 출력했습니다.
Number : 111
아래는 진법을 좀 더 늘려서 확인해보도록 하겠습니다.
방법은 동일하고 값만 다르게 넣어보도록 하겠습니다.
var fa = "32";
32를 출력하면 아래와 같이 나타납니다.
Number : 32
32(2진수) -> 2진수가 아니므로 표현할 수 없기 때문에 NaN 으로 나타납니다. 26(8진수) -> 26(10진수) 값으로 변환합니다. 32(10진수) -> 32(10진수) 값으로 그대로 변환합니다. 32(16진수) -> 50(10진수) 값으로 변환합니다.
parseInt 는 주어진 값을 인자에 적용한 진수를 10진수로 변경하는 것을 확인할 수 있습니다.
우리가 보통 16진수를 표현할 때, 0x를 붙입니다. 16진수 표기법을 붙여서 테스트 해보도록 하겠습니다.
var fa = "0x32";
0x32를 출력하면 아래와 같이 나타납니다.
Number : 50
0x 라는 것이 붙어서 그런지 0x를 변환할 수 없는 parseInt(2), parseInt(8) 은 0을 표현하였고, Number 와 parseInt(10), parseInt(16)은 16진수 0x32 값을 10진수인 50으로 변경하였습니다.
^ㅇ^!!!
Number 와 parseInt 사용법이 예전엔 다르게 적용되는 부분이 있었는데, 요즘엔 비슷하게 바뀌었습니다. 익스플로러 6 같이 구형 브라우저에서는 어떤 값이 나올진 모르겠네요 ^^;
예전이든 지금이든 Number 함수는 문자열 그대로 숫자로 표시해주기 있지만, parseInt 의 경우 예전 브라우저에서 값이 어떻게 표시될지 모르니 한번 더 테스트 해보고 가는게 좋을거 같습니다. 웹에서 진수 변환을 할 필요가 있는 경우, parseInt를 사용하면 좋을거 같습니다.
|
