jQuery 쉽게하기 - 기본부터 시작하자, Number 편

JavaScript 의 변수 선언에는 자료형 표현이 없습니다.

int a, String str 과 같은 변수타입이 없죠. 모든 변수는 var 로 표현됩니다. 아마 variable 의 약자인 것 같습니다. 게다가 var 를 생략해도 전혀 문제가 되지 않습니다.

이번에는 저번 포스트에 이어 다른 자료형들에 대해 어떻게 설명하고 있는지 보겠습니다.

 

NUMBER : 숫자형

Javascript 의 Number 는 IEEE 754 의 64비트 배정도(double-precision 64-bit) 형식을 따릅니다. string 과 마찬가지로 변경 불가(immutable)한 값입니다. 그리고 C 언어의 기본적인 연산자들을 모두 지원합니다.

지원하는 연산자 : +, -, *, /, %, =, +=, -=, *=, /=, ++, --

무슨 말인지 잘 모르겠습니다. IEEE 754는 뭐고 64비트 배정도는 뭘까요? ㅎㅎㅎ;; 그래서 좀 찾아봤습니다. 자료가 많이 있더군요. 열심히 봤습니다. 그래도 잘 모르겠습니다. ^^;;. 제가 이해한 부분만 간단히 말씀드리고 링크들로 대체하겠습니다.

IEEE 754 는 컴퓨터에서 부동소수점를 표현하는 가장 널리 쓰이는 표준입니다. ±0 등의 수와 무한, NaN 등의 기호를 표시하는 법과 이러한 수에 대한 연산을 정의하고 있습니다.(위키백과 발췌) IEEE 754 는 숫자형에 대한 표준정의가 되어 있는 문서라고 얘기하는 것 같습니다. 맞겠죠? ^^;; 이 문서안에 64비트 배정도 형식도 같이 정의되어 있다고 합니다. 이 형식은 각각 소수표현을 2진수 표현형식으로 바꾸는 방법이라고 합니다. 즉 컴퓨터가 알아들을 수 있게 숫자형을 2진수로 표현을 하되 64비트 형태로 그 숫자형을 2진수로 배열한다는 뜻인것 같습니다. 아~ 머리 아픕니다. 링크 드립니다.

위키백과 http://ko.wikipedia.org/wiki/IEEE_754
izimcjs 님의 네이버 블로그 http://blog.naver.com/izimcjs/90097385403
Google 검색하기 검색하기

이런 것들을 접할 때마다 저는 뭐했나 싶습니다. 에혀~~. 그래도 힘을 내봅니다. 아래 예제를 파이어폭스에서 확인해 보시기 바랍니다.

console.log(typeof 12); // "number"
console.log(typeof 3.543); // "number"

 

Boolean Default : 기본 논리형

숫자형의 0 은 기본이 거짓입니다. 숫자형의 참/거짓은 아래와 같습니다

console.log(!0); // true
console.log(!1); // false
console.log(!-1); // false

다음 예제는 상식을 깨는 결과를 보여줍니다. 이 결과는 위에서 언급된 배정수(double-precision values)에 의해 나온 에러없는 결과입니다. 2진수로 변환 후 계산을 하면 이렇게 떨어지나 보네요. 흠.. 숫자형 사용할 때는 길이를 잘 생각해서 써야 겠네요. 원하는 결과랑 다른 결과가 나올 수도 있겠습니다. 자바스크립트로 타이머를 만들면 1초의 길이가 들쭉날쭉 하는데 이게 원인일 수도 있겠네요. ^^;

console.log(0.1 + 0.2); // 0.30000000000000004

 

Math : 수학함수

JavaScript 는 숫자형을 다룰수 있는 Math 라는 유틸 함수를 제공합니다. Math 함수에 대해 더 보고 싶으시면 예제 아래의 링크를 클릭하세요.(꼭 한번씩 가셔서 보셨으면 합니다.)

console.log(Math.PI); // 3.141592653589793 : 파이값
console.log(Math.cos(Math.PI)); // -1 : 파이값의 코사인값

Math 유틸 더 보기 http://www.w3schools.com/jsref/jsref_obj_math.asp

 

Parsing Numbers : 숫자형 타입으로 형변환

가끔 숫자 문자열이 있습니다. 계산을 하기 위해 문자열을 숫자형으로 변환 하는 경우가 있죠. "1" + "2" = "12" 가 됩니다. 우리는 "1" + "2" = 3 의 결과를 원하실 때는 형변환을 해야 하죠. 그때 사용할 수 있는 parseInt, parseFloat 가 있습니다. parseInt는 소수점이 없는 정수형으로 반환하고, parseFloat는 소수점이 있는 실수형으로 반환해 줍니다.

console.log(parseInt("123")); // = 123 (implicit decimal) 암시적 10진수
console.log(parseInt("010")); // = 8 (implicit octal) 암시적 8진수
console.log(parseInt("0xCAFE")); // = 51966 (implicit hexadecimal) 암시적 16진수
console.log(parseInt("010", 10)); // = 10 (explicit decimal) 명시적 10진수
console.log(parseInt("11", 2)); // = 3 (explicit binary) 명시적 2진수
console.log(parseFloat("10.10")); // = 10.1

 

Numbers to Strings : 숫자형을 문자형으로 변환

문자형을 숫자형으로 변환할 수 있으니 그 반대도 할 수 있어야 겠죠? 자바스크립트는 숫자형 + 문자형을 하면 항상 문자형을 반환합니다. 만약 숫자를 더한 후 문자로 만들고 싶으시면 괄호를 잘 사용하셔서 연산을 하셔야 합니다. 예제를 보시죠.

console.log("" + 1 + 2); // "12"
console.log("" + (1 + 2)); // "3"
console.log("" + 0.0000001); // "1e-7"
console.log(parseInt(0.0000001)); // 1 (!)

1 + 2 의 괄호에 따라 결과값이 상이해 지는 것을 확인하셨습니까? 그리고 4번째의 결과는 예상과는 좀 다르네요. parseInt() 가 정수를 반환하는 함수이니 당연히 0이 나와야 할 것 같은데 결과를 보면 1이 나옵니다. loading....??

이 궁금증이 해결되는데 1시간이 넘게 걸렸습니다. 에혀~ 그나마 반뿐이 해결 못했습니다. 일단 결과를 말씀드리면
3번째 줄의 "" + 0.0000001 = "1e-7" 이지 않습니까?
그러니까 parseInt(0.0000001) 은 parseInt("1e-7") 과 같게 된것 같구요.
이 구문을 정수화 하니 "1e-7" 에서 1만 남게 되는 것 같습니다.

에혀~ 저는 이렇게 뿐이 생각을 못하겠네요. ㅡㅡ;; 더 궁금한건 아주 큰 수를 해도 같은 결과가 나온다는 겁니다. 그것도 "1.1192233720368548e+21" 이 되서 그렇게 처리가 되나 봅니다. 그런데 여기서 제가 테스트 했던 숫자를 하나 보여드리겠습니다.
9223372036854775807
이 값을 찍어보면
9223372036854776000
이렇게 나와요. 이것도 왜 그런지 모르겠습니다. ㅎㅎ 아시는 분~~ 손!! ㅡ,.ㅡ;;

2011.07.14 업데이트
위의 이상한 현상에 대해서는 댓글로 inux 님께서 명퀘하게 설명해 주셨습니다. 답글의 일부를 옮겨 왔습니다.

IEEE 754 의 부동소수점 연산의 특징은 값에 대한 근사값을 나타낸다는데 있습니다.
0.1 + 0.2의 값이 0.30000000000000004 로 출력되는것도 이때문입니다.
parseInt(0.0000001) 의 값이 1이 나오는것도 같은 경우입니다.
9223372036854775807 의 값이 부정확하게 나오는것은 9223372036854775807 의 값은 int로 표현되기에 너무 큰값이라 내부적으로 double 로 캐스팅되면서 부동소수점 연산이 되어서 부정확하게 나오게됩니다.
inux님의 댓글 중에서

parseInt 말고 String 클래스를 사용하여 문자형으로 변환할 수 있습니다.

console.log(String(1) + String(2)); //"12"
console.log(String(1 + 2)); //"3"

 

NaN and Infinity

모두 정수화가 되는 것은 아닙니다. parseInt 의 인자에 따라 변환할 인자가 숫자가 아니라는 NaN과 0 으로 나눴을 경우 나타나는 무한대(Infinity) 가 있습니다.

console.log(parseInt("hello", 10)); // NaN
console.log(isNaN(parseInt("hello", 10))); // true

"hello" 라는 문자열은 숫자 문자열이 아니기 때문에 NaN 을 반환합니다. isNaN() 함수는 "NaN 이냐?" 라고 묻는 함수입니다. 그래서 두번째 예제에는 true 가 반환되고 있습니다. 가끔 나누기를 하다보면 분모 인자가 잘못 계산되어 0이 되는 경우가 있습니다. 아래 예제를 보시죠.

console.log(1 / 0); // Infinity

Infinity 즉, 무한대가 반환되고 있습니다.

재미있게도 NaN 과 Infinity 는 숫자형 입니다. 두개의 타입을 찍어보면 아래와 같은 결과를 보여줍니다. 한번 실행해 보세요.

console.log(typeof NaN); // "number"
console.log(typeof Infinity); // "number"

또 하나 재밌는게 있습니다. jQuery.com 에서도 strange way 라고 표현한 결과입니다. 자기들도 궁금한가 봅니다. ^^

console.log( NaN == NaN );// false (!)
console.log(Infinity == Infinity );// true

왜 NaN 끼리 비교했는데 false 가 반환될까요? 이것도 아시는 분 손~~

 

쓰다 보니 계속 길어지네요. 아직 Object 와 Array 외에 몇 가지가 더 남아 있는데. 4편으로 끝을 낼 수 있을지 모르겠습니다. 휴우~;; 저도 공부를 참 많이 하게 됬습니다. 그냥 무작정 사용했던 parseInt 와 같은 함수들은 저에게는 거의 재발견이네요. ^^;;

여기 있는 내용들은 숙지하시되 외우실 필요까지는 없습니다. 코딩은 외워서 하는게 아니라 찾아서 하는거니까요.

그럼 다음 포스팅에서 뵙겠습니다. 즐프하세요.