#5. Number ( 수 )
Number 데이터 타입의 형태, Double (실수) 와 Integer (정수)
Number 데이터 타입은 크게 실수와 정수, 2가지 형태의 숫자값을 취하고 있습니다. 저를 포함한 수포자분을 위해 간단히 용어 정리를 하자면.... 실수란 유리수와 무리수를 집합체로 0.228192 또는 -3.14920... 같은 숫자를 의미합니다. 정수는 10, 0, -21 등 양수, 0, 음수의 집합을 의미합니다.
소수점이 있으면 실수, 없으면 정수라고 정리하면 될 듯 싶습니다. ( 저도 수포자 중 한명이라..... )
Number 는 + (덧셈), - (뺄셈), * (곱셈), / (나눗셈), % (나머지) 를 구하는 연산이 가능합니다. 먼저 실수가 들어있는 2개의 변수를 선언한 후 연산 결과를 살펴보겠습니다.
var double1 = 7.208;
var double2 = 2.792;
위 코드 중 두 실수의 합이 정수 10으로 표시된 것에 주목해 주세요. 실수의 연산 결과가 소수점이 필요하지 않는 경우에는 실수 10.000 이 아닌 정수 10 을 반환하게 됩니다.
마찬가지로 정수도 연산 작업을 수행할 수 있습니다.
var int1 = 16;
var int2 = 5;
Number 와 함께 사용되는 연산자
자바스크립트에는 사칙 연산 외 관계 연산자, 일치 연산자 등 여러 연산자가 존재합니다. 자바스크립트의 연산자는 Number, String, Boolean 그리고 Object 까지 폭넓게 데이터를 조작할 수 있다는 점에서 C 나 Java 와 같은 개발 언어와는 다른 특징을 가지고 있습니다.
그럼 자주 사용되는 몇 가지 연산자에 대해 살펴보겠습니다.
1. 복합 연산자
복합 연산자는 다른 연산자를 하나로 묶어서 간략하게 표현할 때 사용합니다.
var a = 10;
a += 10; // a = a+ 10 의미입니다. + 외 다른 사칙연산도 적용이 가능합니다.
2. 증감 연산자
증감 연산자는 변수에 1을 더하거나 빼는 구문을 간략하게 표현할 때 사용합니다.
var a = 10;
++a;
var b = 10;
--b;
여기서 ++ 와 -- 는 변수 앞 또는 뒤에 위치할 수 있는데, 둘 사이에는 엄청난 차이가 있습니다. 다음 코드에서 변수 a, b 는 각각 어떤 값을 갖게되는지 살펴보겠습니다.
var a = 10;
var b = ++a;
먼저 변수 a, b 는 각각 11 의 값을 갖게 됩니다. ++a 를 해석하면 먼저 변수 a 에 자기 자신을 증가시킨 다음 변수 b 에 증가된 a 값을 할당합니다.
var a = 10;
a = a + 10;
var b = a; // 변수 b 에 증가된 변수 a 값을 할당합니다.
그럼 다음 코드에서 변수 a와 b 는 어떤 값을 가질까요?
var a = 10;
var b = a++;
위 코드를 실행하면 변수 a 는 11, 변수 b 는 10 을 반환합니다. a++ 를 해석하면 두 번째 코드는 변수 b 에 변수 a 를 먼저 반환한 다음에 자기 자신을 증가시키기 때문에 a와 b 의 값이 다르게 나타나게 됩니다.
var a = 10;
var b = a; // 변수 b 에 변수 a 값을 할당합니다.
a = a + 10;
3. 논리 연산자
논리 연산자는 그 논리가 맞는지 틀린지에 대해서 boolean 결과를 보여주는 연산자입니다. 자바스크립트의 논리 연산자는 다음 3 가지가 존재합니다.
1) ! ( NOT )
NOT 의미를 담고 있는 연산자로 값이 true 면 false, false 면 true 로 값을 갖게 됩니다.
2) && ( AND )
두 조건 모두 참인 경우 true 를 반환하며 둘 중 하나라도 거짓이면 false 를 반환합니다.
3) || ( OR )
두 조건 중 하나만 참이어도 true 가 반환됩니다.
4. 비교 연산자
비교 연산자는 두 개의 값을 비교하여 true / false 를 반환합니다.
1) ==
두 값이 동일한 경우 true 를 반환합니다. 수학의 "같다"는 의미로 생각하면 됩니다.
3번째 변수 편에서 왜 개발 언어의 "=" 을 수학에서의 같다로 해석해서는 안된다고 얘기했는지 이제야 알았을 겁니다.
== 의 반대, 즉 "같지 않다"는 != 으로 표기해 주시면 됩니다.
2) ===
두 값이 동일하고 타입까지 일치하는 경우에만 true 를 반환합니다. 예를 들어서 "3" 과 3 을 ==, === 으로 비교했을 때 결과값이 다르게 출력됩니다.
Number 3 과 String 3 을 == 로 비교했을 때는 값만 비교하기 때문에 true 가 반환되지만, === 는 데이터 타입까지 비교하기 때문에 false 가 출력됩니다.
=== 도 마찬가지로 같지 않다면으로 표기하고 싶다면 !== 을 사용해 주시면 됩니다.
자바스크립트에서는 정확하고 안전하게 값을 비교하기 위해 "==" 보다 "===" 을 사용하는 것이 좋습니다.
3) > >= < <=
크다, 크거나 같다, 작다, 작거나 같다의 의미합니다. 조건에 따라 true 또는 false 를 반환합니다.
가끔 실수로 >=, <= 을 =>, =< 으로 표기하는 경우가 있는데 틀린표현이니 주의해 주세요.
5. 삼항 연산자
삼항 연산자는 조건에 부합하는 결과를 반환할 때 사용되는 연산자입니다. 삼항 연산자의 구조는 다음과 같습니다.
a < b ? 'Yes' : 'No'; / a 가 b 보다 작다면 ? 참이면 'Yes' 출력 : 아니면 'No' 출력;
위 코드는 변수 a 가 변수 b 보다 작기때문에 Yes 를 반환하게 됩니다.
Is Not a Number? === 숫자가 아닙니까?
자바스크립트에는 변수 안에 있는 값이 숫자가 아닌지 판별하는 isNaN() 함수가 있습니다. isNaN() 은 판별대상이 숫자이면 false, 숫자가 아니면 true 를 반환합니다. 여기서 중요한 부분은 String "20" 이나 true / false 또한 isNaN() 을 사용하면 숫자로 판단하여 false 를 반환하게 됩니다.
NaN 은 Not a Number 의 줄임말입니다. 단어 그대로 숫자가 아닌지 판별할 때 사용되는 함수입니다.
위 코드를 살펴보면 Number 20, String "20", Boolean 은 숫자로 바꿀 수 있기 때문에 false, String "Hello World" 는 숫자로 바꿀 수 없기 때문에 true 를 반환합니다. 여기서 Boolean 을 숫자로 바꾸면 true 는 1, false 는 0 으로 반환됩니다.
먼저 String 으로 둘러싼 숫자의 사칙연산을 살펴보면 + 을 제외하고 동일한 숫자와 동일한 결과값을 도출하고 있다는 것을 확인할 수 있습니다.
String 의 덧셈은 숫자의 덧셈과 다르게 값이 출력됩니다. String 의 이러한 특징은 다음 장에서 살펴보겠습니다.
다음으로 숫자 + Boolean 살펴보면 true 는 1, false = 0 으로 반환되어 결과값으로 각각 21, 20이 반환된 것을 확인할 수 있습니다.
즉, isNaN() 은 사칙연산이 가능하면 false, 불가능하면 true 값을 취한다고 생각해도 됩니다.
숫자가 아닌 값을 숫자로 바꾸는 함수
데이터 타입이 Number 아닌 값을 Number 로 바꾸는 위해서는 Number(), parseInt(), parseFloat() 3가지 함수를 사용하면 됩니다.
1. Number()
Number() 함수에 true와 false 를 넘기면 각각 1과 0으로 반환합니다. null 을 넘겼다면 0을 반환하고, undefined 는 NaN, 그리고 "000033" 을 입력하면 리딩 제로는 무시한 33을 반환합니다. 마지막으로 "" 값을 입력하면 0을 반환합니다.
Number() 함수로 문자열을 숫자로 바꾸려면 복잡하고 이상한 규칙을 기억해야 하므로 정수 형태의 문자열을 숫자로 바꿀 때는 보통 pareseInt() 함수를 사용합니다.
2. parseInt()
함수의 특징을 살펴보기 전에 이름을 분석하면 parse + Int 의 합성어라는 것을 확인할 수 있습니다. parse 는 분석하다, Int 는 정수라는 의미를 갖고 있습니다. 즉, parseInt() 함수는 "정수를 분석하는 함수" 라는 의미를 담고 있습니다.
그럼 parseInt() 직접 사용하는 예제를 보여드리겠습니다.
위에서부터 순서대로 살펴보면 숫자와 문자가 섞여 있을 때, 숫자가 문자보다 앞에 있으면 숫자 부분만 반환하고 나머지 텍스트는 버립니다. 반대로 문자가 숫자보다 앞에 있으면 NaN 값을 반환합니다. 그리고 실수일 경에는 소수점 이하는 버리고 정수 부분만 반환합니다.
3. parseFloat()
parseFloat() 은 부동소수점까지 출력한다는 점을 제외하고는 parseInt()가 갖고 있는 대부분의 특징을 갖고 있습니다. 참고로 Float 은 소수, 실수라는 의미를 갖고 있습니다.
이번 장에서는 Number 데이터 타입이 갖고 있는 주요 특징을 알아 보았습니다. 대부분 초등학교, 중학교 때 배운 수식과 연결되는 부분이 많아 난이도는 높지 않은 편입니다. 다음 장에서는 String 데이터 타입이 갖고 있는 특징에 대해서 살펴보겠습니다.
