27. 자료구조 - 숫자형

현재 자바스크립트는 숫자를 나타내는 두 가지 자료형을 지원한다.

1. 배정밀도 부동소수점 숫자로 알려진 64비트 형식의 IEEE-754(부동소수점을 표현하는 표준)에 저장된다.
2. 숫자형으로 담을 수 없는 큰 숫자도 존재할 수 있다.
   그것을 BigInt라는 새로운 자료형으로 정의하였다.

---

숫자를 입력하는 방법

let billion = 1000000000;

일반적으로 10억을 입력하라고 한다면 위와 같이 입력을 할 것이다.
하지만 반복되는 0을 줄여서 표현할수 있다.
e표기법을 사용하는것이다.

let billion = 1000000000;
let 1bn = 1e9;

console.log(billion === 1bn); // true

e란 왼쪽 수에 오른쪽 수만큼 10의 거듭제곱을 곱하는 것이다.

1e3 =>  1 * 10 * 3
1.23e6 => 1.23 * 10 * 1000000

그리고 이 표기법은 큰 숫자가아닌 작은 소숫점 숫자도 표현이 가능하다.

let ms = 0.000001;
let ems = 1e-6;
console.log(ms === ems); // true;

-를 통하여 접근하면 e의 왼쪽의 수를 오른쪽수 만큼 10의 거듭제곱을 나눠주는 것이다.

1e-6 => 1 / 10 * 1000000

16진수 8진수 2진수

16진수는 문자를 인코딩할때나 hex값등 색을 나타낼때 등 많은곳에서 쓰이는 포맷이다. 다양한곳에서 사용하는만큼 짧게 표현하는 방법도 있다.

console.log(0xff); //255
console.log(0xFF); // 255

0x를 사용하여 16진수를 표현할 수 있다.
2진수는 0b 8진수는0o와같이 표현하여 사용할 수있다.

---

toString(n진수)

숫자.toString(n진수)메서드는 해당 파라미터로 받는 진법으로 숫자를 변환한 후 문자형으로 변환해 반환한다.

let num = 255;
console.log(num.toString(16)); // ff  -> 16진수
console.log(num.toString(2)); // 11111111 -> 2진수

---

.. 와 메서드 호출

123456..toString(36)에 있는 점 두개는 오타가 아니다.
숫자 리터럴을 대상으로 메서드 toString을 직접 호출하고 싶다면 숫자 뒤에 점 두 개 ..를 붙여야한다.
123456.toString(36)처럼 점을 한 개만 사용하면, 첫 번째 점 이후는 소수점처럼 인식이 되어 에러가 발생한다.
점을 두개작성하면 소수부가 없다고 판단하여 메서드를 호출한다.
대신 괄호로 묶어주면 점 하나로도 가능하다
(123456).toString(36)

---

Math함수

어림수를 구할때 Math함수를 많이 사용한다.

Math.floor

소숫점 첫째 자리에서 내림(버림)

3.1 -> 3
-1.1 -> -2

Math.ceil

소숫점 첫째 자리에서 올림

3.1 -> 4
-1.1 -> -1

Math.round

소숫점 첫째 자리에서 반올림

3.1 -> 3
3.6 -> 4
-1.1 -> -1

Math.trunc

소수부를 무시함

3.1 -> 3
-1.1 -> -1

특정 소수점 자리수까지 값을 얻기 위해서는 두가지 방법이 있다.

• 곱하기와 나누기

  소숫점 두 번째 자리 숫자까지만 남기고 싶을 때, 숫자에 100보다 큰 10의 거듭제곱 수를 곱한 후, 원하는 메서드를 호출한 뒤 처음 곱한수를 나눠주면 된다.

let num = 1.232323;
console.log(Math.floor(num * 100) / 100);
/*
1.232323 -> 123.2323 -> 123 -> 1.23
*/

• toFixed를 활용하기

let num = 12.34;
console.log(num.toFixed(1)); // "12.3"

toFixed는 인수만큼의 소숫점 자리수를 구한뒤 어림수로 바꾸고 문자열로 리턴해준다.
이때 입력받은 인자 자리수의 뒤에 숫자를 round처럼 반올림을 한다.

let num = 12.39;
console.log(numtoFixed(2)); // "12.4"

그리고 중요하게 생각해야되는것은 문자열을 반환하기 때문에
수의 범위를 넘어가는 인수를 받았을 경우에는 0을 붙여준다.

let num = 12.34;
console.log(numtoFixed(5)); // "12.34000"

---

부정확한 계산

정밀도 손실(loss of precision)이라는 현상을 알아보겠다.

console.log(0.1 + 0.2 == 0.3); //flase
console.log(0.1 + 0.2); // 0.300000000000004

0.1 + 0.2 은 0.3과 같지가 않다고 나온다.
그 이유는 위의 결과를 참고한다면 0.1과 0.2같은 분수의 값은 이진법으로 변환했을 때 무한 소수가 된다.
10진법에서 1/3을 소수로 0.33333....과 같은 무한소수가 되듯이
2진법에서 2의 거듭제곱으로 나눈 값은 잘 동작하지만 그 이외의 값으로 나누게 되면 무한 소수가 된다.
그래자바스크립트는 이런 무한소수를 가장 가까운 숫자로 반올림하여 표기하게 된다.

console.log(0.1.toFixed(20))' // 0.100000000000000555

이것을 해결하기위해서는

• toFixed를 이용한다.

let sum = 0.1 + 0.2;
console.log(+sum.toFixed(2)); // 0.3

• 임의로 100또는 정수로 바꿀수 있게 10의 제곱의 수로 곱한다음 연산하고 그뒤에 10의 제곱의 수만큼 나눠준다.

console.log((0.1 * 10 + 0.2 * 10) / 10); // 0.3

하지만 완전히 무한소수가 나오는것을 차단할 수 없다.
그래서 어림수를 이용해 소수의 연산을 할때는 꼬리를 잘라줘야한다.

- 재밌는 경우가 존재한다.

위와같이 콘솔에 9로이루어진 큰 숫자를 적으면 자동으로 숫자의 값을 늘려버린다.
이것 또한 정밀도 손실 때문이다.

- 두 종류의 0이 존재한다.

0, -0
대부분의 연산은 두 가지를 동일하게 취급하기 때문에 연산에 크게 영향을 미치지는 않는다.

---

isNaN과 isFinite

NaN, Infinity의 값은 Number타입에 속하지만 정상적인 값은 아니기에 이것을 구분하기 위한 특별한 함수가 존재한다.

isNaN(value)

인수를 숫자로 변환한 다음 NaN인지 테스트하여 true 또는 false값을 리턴함.

NaN은 비교연산자를 통해서 구분을 할수 없기 때문에 식별할 수 있는 위의 함수를 사용해야한다.

isFinite()

인수를 숫자로 변환하여 그 값이 일반 숫자일때 true
아닐때(NaN,Infinity) false를 반환 한다.

---

parseInt와 parseFloat

단항 연산자인 + 또는 Number()를 사용해서 숫자형으로 변환할 수 있다. 하지만 피연산자가 숫자가 아닐때는 NaN을 반환한다.

console.log(Number('100a')); // NaN
console.log(+'100px'); // NaN

이러한 엄격한 규칙이 적용이 되어 Number타입의 숫자로 변환이 되지만 우리는 실무에서 CSS코드의 100px, 20em등의 값을 추출하고싶을때가 있다.
이럴 때 사용할 수 있는 함수가 내장함수 parseInt와 parseFloat이다.
두 함수는 불가느할 때까지 문자열에서 숫자를 읽는다.
숫자를 읽는 도중 요류가 발생하면 지금까지 수집된 숫자만 반환한다.
parseInt는 정수, parseFloat는 실수

let width = '100px';
let heigth = '12.5em';

// parseInt
console.log(parseInt(width)); // 100
console.log(parseInt(100.23)); // 100

// parseFloat
console.log(parseFloat(height)); // 12.5
console.log(parseInt(12.234.55)); // 12.234

하지만 이 메소드들도 NaN을 반환할 때가 있다.
처음부터 읽을 숫자가 없는 경우이다.

console.log(parseInt('a123')); // NaN

parseInt의 두번째 파라미터

console.log(parseInt('0xff', 16)); // 255
console.log(parseInt('ff', 16)); // 255

parseInt('2n9c', 36); // 123456

두번째 파라미터 -> 진수를 지정

---

기타 수학함수

Math객체의 여러 메소드들은 다양한 수학적 기능을 제공한다.

random() -> 0과 1사이의 난수 생성
max(a, b, c) -> 최대값 반환
min(a, b, c) -> 최소값 반환
pow(2, 10) -> 2의 10제곱
sqrt(16) -> 16의 제곱근
...
...

많은 메서드가 존재하며 필요시 MDN사이트를 참고하여 찾아서 사용한다