[자바스크립트] 숫자형, toString(), Math함수, isNaN, isFinite, Object.is(), parseInt, parseFloat
반응형
숫자형, toString()
- 자바스크립트의 일반적인 숫자에 대해서 알아보자.
숫자 입력 방법
- 10억처럼 뒤에 0이 많이 붙으면 잘못 입력하기 쉽다.
- 그래서 10억을 나타낼 때는
1bn을 사용하고, 73억을 나타낼 때는7.3bn을 사용한다. - 또한, 숫자 옆에 '
'e'를 붙이고 0의 개수를 옆에 붙여주면 숫자를 줄 일 수 있다. (10의 거듭제곱)
let billion = 1e9; // 10억, 1과 9개의 0
alert( 7.3e9 ); // 73억 (7,300,000,000)
// 작은 숫자도 아래처럼 표현할 수 있다.
let ms = 0.000001;
let ms = 1e-6; // 1에서 왼쪽으로 6번 소수점 이동
toString(base)
num.toString(base)메서드는base진법으로num을 표현한 후, 이를 문자형으로 변환해 반환해준다.
let num = 255;
alert( num.toString(16) ); // ff
alert( num.toString(2) ); // 11111111- base는 2에서 36까지 가능하고, 기본값은 10이다.
- base= 16
- 16진수 색, 문자 인코딩 등을 표현할 때 사용.
- 숫자 : 0 ~ 9
- 10 이상의 수는 A - F 사용하여 표현
- base=2
- 비트 연산 디버깅에 사용
- 숫자는 0 or 1이 될 수 있다.
- base=36
0..9,A ..Z를 사용해서 숫자를 표현한다.- 알파벳 전체가 숫자를 표현하는 데 사용
- base= 16
⚠️ 점 두 개와 메서드 호출
123456..toString(36)에 있는 점 두 개는 오타가 아니다!- 숫자 대상으로 메서드 toString을 직접 호출하고 싶다면 숫자 다음에 점 두개
..를 붙여야 한다. 123456.toString(36)처럼 점을 한 개만 사용하면, 첫 번째 점 이후는 소수부로 인식되어 에러가 발생된다.
어림수
Math.floor
- 소수 첫째 자리에서 내림
Math.ceil
- 소수 첫째 자리에서 올림
Math.round
- 소수 첫째 자리에서 반올림
Math.trunc
- Internet Explorer 지원 X
- 소수부를 무시
만약 소수 둘째 자리까지만 남기고 싶을 때는 어떻게 할까?
- 두 가지 방법이 있다.
- 곱하기와 나누기
- 10의 거듭제곱을 해준 뒤 math함수를 이용하여 곱해줬던 10의 거듭제곱으로 나눠준다.
let num = 1.23456; alert( Math.floor(num * 100) / 100 ); // 1.23456 -> 123.456 -> 123 -> 1.23 - 소수점 n번째 수까지의 어림수를 구한 후 문자형으로 반환해주는 메서드
toFixed(n)를 사용toFixed(n)은 round와 비슷하게 가까운 값을 반올림해준다.- 주의할 점은 반환 값이 문자열이다. 소수부의 길이가 인수보다 작으면 끝에 0이 추가된다.
+단항 덧셈 연산자를 붙이거나,Number()를 호출해서 숫자형으로 변환해야 한다.
let num = 12.34; alert( num.toFixed(1) ); // "12.3" let num = 12.34; alert( num.toFixed(5) ); // "12.34000"
부정확한 계산
- 숫자는 내부적으로 64비트 형식으로 표현된다.
- 숫자를 저장하려면 64비트가 필요한데, 52비트는 숫자를 저장하는 데 사용되고 11비트는 소수점 위치를 1비트는 부호를 저장하는 데 사용된다.
- 숫자가 너무 커지면 64비트 공간이 넘쳐서 Infinity로 처리된다.
alert( 1e500 ); // Infinity
정밀도 손실(loss of precision)
alert( 0.1 + 0.2 == 0.3 ); // false
// 왜 false일까??
alert( 0.1 + 0.2 ); // 0.30000000000000004
왜 이런 일이 발생될까?
- 숫자는 0과 1로 이루어진 이진수로 표현되어 연속된 메모리 공간에 저장된다.
- 그런데 10진법을 사용하면 쉽게 표현할 수 있는 0.1, 0.2 같은 분수는 이진법으로 표현하면 무한 소수가 된다.
0.1은 1을 10으로 나눈 수인1/10이다.1/10과1/3을 비교하면1/3은 무한 소수0.33333(3)이 된다.- 이처럼 10의 거듭제곱으로 나눈 값은 10진법에서 잘 동작하지만
- 3으로 나누게 되면 10진법에서 제대로 동작되지 않는다.
- 이처럼 2진법 체계에서 2의 거듭제곱으로 나눈 값은 잘 동작하지만 1/10와 같이 2의 거듭제곱이 아닌 값으로 나누게 되면 무한 소수가 된다.
해결방법은?
toFixed(n)메서드를 사용해 어림수를 만드는 것이다.
let sum = 0.1 + 0.2;
alert( sum.toFixed(2) ); // 0.30
// 주의할 점은 `toFixed(n)`는 항상 문자열로 변환한다는 것!! -> 소수점 다음에 오는 숫자가 항상 2개가 될 수 있다.
//문자형으로 바뀐 숫자를 다시 숫자형으로 강제 변환하려면 단항 덧셈 연산자를 사용하면 된다.
alert( +sum.toFixed(2) ); // 0.3
ℹ️ 숫자가 증가하기도 한다.
alert( 9999999999999999 ); // 10000000000000000이 출력- 이 현상도 정밀도 손실 때문이다.
🔔 두 종류의 0
- 자바스크립트에서는
0,-0두 종류의 0이 존재한다. - 숫자의 수호가 단일 비트에 저장되는데 0을 포함한 모든 숫자에 부호를 설정 or 설정 X 할 수 있다.
- 대부분의 연산에서는
0,-0을 동일 취급하기 때문에 차이가 두드러지지 않는 편
isNaN(value)
- NaN인지 확인하는 함수
- 괄호 안에 인자를 넣어주면 확인해준다.
isNaN은 Boolean값을return한다.- true면 숫자가 아니다!
- false면 숫자다!
- 인수를 숫자로 변환한 다음
NaN인지 테스트한다.
alert( isNaN(NaN) ); // true
alert( isNaN("str") ); // true
// === NaN으로 비교해도 되지 않을까? -> 아니다.
// NaN은 NaN 자기 자신을 포함하여 그 어떤 값과도 같지 않다
alert( NaN === NaN ); // false
isFinite(value)
- 인수를 숫자로 변환하고 변환한 숫자가
NaN/Infinity/-Infinity가 아닌 일반 숫자인 경우true를 반환한다.
alert( isFinite("15") ); // true
alert( isFinite("str") ); // false, NaN이기 때문에
alert( isFinite(Infinity) ); // false, Infinity이기 때문에
//isFinite는 문자열이 일반 숫자인지 검증하는 데 사용한다.
let num = +prompt("숫자를 입력하세요.", '');
// 숫자가 아닌 값을 입력하거나 Infinity, -Infinity를 입력하면 false가 출력된다.
alert( isFinite(num) ); // 빈 문자열이나 공백만 있는 문자열은 isFinite를 포함한 모든 숫자 관련 내장 함수에서 0으로 취급
Object.is()
- 비교 결과가 정확해야 할 때 사용한다.
- 두 값이 같은 값인지 결정한다.
Object.is(value1, value2);- 결과를 Boolean으로 반환한다.
- Object.is()는
==연산자와 같지 않다.==연산자는 같음을 테스트하기 전에 양 쪽(이 같은 형이 아니라면)에 다양한 강제(coercion)를 적용하지만("" == false가 true가 되는 그런 행동을 초래), Object.is는 어느 값도 강제하지 않는다.
같은 값인지 결정되는 조건
- 둘 다
undefined - 둘 다
null - 둘 다
true또는 둘 다false - 둘 다 같은 문자에 같은 길이인 문자열
- 둘 다 같은 객체
- 둘 다 숫자이며
- 둘 다
+0 - 둘 다
-0 - 둘 다
NaN - 둘 다 0이나
NaN이 아니고 같은 값을 지님
- 둘 다
Object.is('foo', 'foo'); // true
Object.is(window, window); // true
Object.is('foo', 'bar'); // false
Object.is([], []); // false
Object.is(NaN, NaN) === // true
var test = { a: 1 };
Object.is(test, test); // true
Object.is(null, null); // true
// 특별한 경우
Object.is(0, -0); // false
Object.is(-0, -0); // true
Object.is(NaN, 0/0); // true
parseInt와 parseFloat
- 자바스크립트는 입력받은 값을
string으로 저장하기 때문에 입력받은 값을 사용하려면 형 변환을 해야 한다. string을number로 변환- 문자형에서 숫자형으로 변환할 때 단항 덧셈 연산자(
+) orNumber()을 사용하는 데 엄격한 규칙이 적용된다. 또한, 피연산자가 숫자가 아니면 형 변환이 실패한다.
alert( +"100px" ); // NaN- 하지만 문자열의 처음 or 끝에 공백이 있어서 공백을 무시할 때이다.
- css에서
'100px','12pt'나 금액 뒤 통화 기호 등에서 숫자만 추출할 때parseInt와parseFloat가 필요하다.
alert( parseInt('100px') ); // 100
alert( parseFloat('12.5em') ); // 12.5
alert( parseInt('12.3') ); // 12, 정수 부분만 반환된다.
alert( parseFloat('12.3.4') ); // 12.3, 두 번째 점에서 숫자 읽기를 멈춘다.
alert( parseInt('a123') ); // NaN, a는 숫자가 아니므로 숫자를 읽는 게 중지된다.
🔔 parseInt(str, radix)의 두 번째 인수
- 두 번째 인수는 선택적으로 사용 가능하다.
- radix자리에 원하는 진수를 지정해 줄 때 사용한다.
parseInt를 사용하면 16진수 문자열, 2진수 문자열 등을 파싱 할 수 있다.
alert( parseInt('0xff', 16) ); // 255
alert( parseInt('ff', 16) ); // 255, 0x가 없어도 동작한다.
alert( parseInt('2n9c', 36) ); // 123456
Math 함수
Math.random()
- 0과 1 사이의 난수를 반환합니다(1은 제외).
alert( Math.random() ); // 0.1234567894322
alert( Math.random() ); // 0.5435252343232
alert( Math.random() ); // ... (무작위 수)
Math.max(a, b, c...) / Math.min(a, b, c...)
- 인수 중 최대/최솟값을 반환
alert( Math.max(3, 5, -10, 0, 1) ); // 5
alert( Math.min(1, 2) ); // 1
Math.pow(n, power)
n을 power번 거듭제곱한 값을 반환
lert( Math.pow(2, 10) ); // 2의 10제곱 = 1024
Math.abs(x)
- 숫자의 절댓값을 반환
Math.max()
- 0개 이상의 인수에서 제일 큰 수를 반환
Math.min()
- 0개 이상의 인수에서 제일 작은 수를 반환
📌 참고
반응형
'프로그래밍 > JavaScript' 카테고리의 다른 글
| [자바스크립트] 배열 (0) | 2021.07.04 |
|---|---|
| [자바스크립트] 문자열 및 관련 메소드 (0) | 2021.07.04 |
| [자바스크립트] 원시값의 메서드, 래퍼 객체(object wrapper) (0) | 2021.07.04 |
| [자바스크립트] new 연산자, 생성자 함수 (0) | 2021.07.04 |
| [자바스크립트] 메서드와 this (0) | 2021.07.04 |