[공부 필기] JavaScript 문법 공부 24일차

※ 필자는 초초초보자입니다.

※ 틀린 내용에 대한 피드백은 언제든지 환영합니다.

 

 

공부하고 있는 자료 : modern JavaScript tutorial 

https://ko.javascript.info/number

숫자형

 

✅ 숫자 입력하기

- e 를 이용하는 방법이 있다.

"use strict";

let num1 = 1e9;
let num2 = 1e-6;

console.log(num1); //1000000000
console.log(num2); //0.000001

- 16진수 : 0x

- 8진수 : 0o

- 2진수 : 0b

- 16, 8, 2진법 외의 진법을 사용하려면 parseInt를 사용해야한다.

 

✅ toString(base)

- num.toString 메서드는 base 진법으로 num을 표현한 후 이를 문자형으로 변환해서 반환한다.

   ► base는 2~36까지 가능하다.

"use strict";

let num1 = 1e9;

console.log(num1.toString(2)); //111011100110101100101000000000
console.log(num1.toString(16)); //3b9aca00

- 숫자를 대상으로 메서드 toString을 호출하고 싶다면 점 두 개를 붙여야 한다.

   ► 혹은 소괄호를 붙여야한다.

console.log(123456..toString(2));
//또는
console.log((123456).toString(2));

 

- 다만 이는 10진수일 때 기준이고,

   숫자가 16진수나 8진수, 2진수는 점이 하나만 있어도 되는 듯 하다.

console.log(0o010.toString(10)); // 8
console.log(0b010.toString(10)); // 2

 

✅ 어림수 구하기(rounding)

- 어림수를 구하기 위해 사용하는 내장 함수가 몆 가지 있다.

   ► Math.floor / Math.ceil / Math.round / Math.trunc

   ► Math.trunc는 IE에서 지원하지 않는다.

 

✅ 부정확한 계산

- 숫자가 너무 커지면 Infinity로 처리된다.

   ► 1.7976931348623157e+308 까지만 표현되고 그 값을 넘어가면 Infinity가 되는 것 같다.

 

- 정밀도 손실(loss of precision)이라는 것도 있다.

   ► 가장 대표적인 예가 "0.1 + 0.2 != 0.3" 이 있다.

   ► 0.1 이나 0.2 등을 정확하게 저장하는 방법은 없지만

        1) toFixed(n) 메서드를 이용해서 어림수를 만들면 위의 문제를 해결할 수 있기는 하다. (0.1 + 0.2 == 0.3)

        혹은 2) 숫자에 100, 1000, 10000 등을 곱하여 정수로 바꾸고 원하는 연산을 한 후 다시 100, 1000, 10000으로 나눠도 된다.

   ► 다만, 2)의 방법은 마지막에 나눗셈이 들어가기 때문에 소수가 다시 등장할 수도 있다.

 

- toFixed(n) 메서드는 소수점 n번째 수까지의 어림수를 구하고 이를 문자형으로 반환해주는 메서드이다.

   ► toFixed(n)을 이용해서 0.1 + 0.2 == 0.3이 되도록 해보자

"use strict";

// 0.1 + 0.2가 0.3이 아니라는 것에 대한 증명(?)
let sum = 0.1 + 0.2;
console.log(sum); //0.30000000000000004
if (sum === 0.3) {
	console.log("sum과 0.3은 동일하다.");
} else {
	console.log("sum과 0.3은 동일하지 않다.");
}

// toFixed 메서드를 이용해서 0.1 + 0.2를 0.3으로 만들기
let roundingStr = sum.toFixed(2); // 소수점 2번째까지의 숫자를 문자열로 변환
console.log(roundingStr);

let roundingNum = +sum.toFixed(2); // 숫자로 강제 변환
console.log(roundingNum);
if (roundingNum === 0.3) {
	console.log("0.1+0.2와 0.3은 동일하다.");
} else {
	console.log("0.1+0.2와 0.3은 동일하지 않다.");
}

- 무한 소수를 방지하는 완벽한 방법은 없다.

   필요할 때마다 꼬리를 잘라서 어림수를 만드는 방법 뿐이다.

 

📌 0과 -0

- 자바스크립트에는 0과 -0이 존재한다.

 

✅ isNaN과 isFinite

- Infinity, -Infinity 와 NaN은 특수한 숫자 값이다.

- 이러한 숫자는 정상적인 숫자는 아니므로

   정상적인 숫자와 구분하기 위해서 특별한 함수가 존재한다.

- 그게 바로 isNaN과 isFinite

 

- isNaN : 인수를 숫자로 변환한 다음 NaN인지 테스트한다. 맞다면 true, 아니면 false 반환

   ► [값] === NaN 으로 비교하면 되지 않나 싶을 수 있는데.. 안된다.

   ► NaN은 자기 자신을 포함해서 그 어떤 값과도 같지 않다고 평가하기 때문이다. (아래 코드 참고)

"use strict";

console.log(NaN === NaN); // false
console.log(NaN == NaN); // false
console.log(isNaN(NaN)); // true

 

- isFinite : 인수를 숫자로 변환하고 변환한 숫자가 NaN/Infinity/-Infinity가 아닌 유한한(finite) 숫자인지 확인한다.

                  맞다면 true, 아니라면 false를 반환한다.

"use strict";

console.log(isFinite(1)); // true
console.log(isFinite(0)); // true
console.log(isFinite(-0)); // true

console.log(isFinite(NaN)); // false
console.log(isFinite(Infinity)); // false
console.log(isFinite(-Infinity)); // false

- 참고로, 문자형이 들어가면 false이다.

console.log(isFinite('a')); // false

- 하지만 빈 문자열은 0으로 취급 되기 때문에 true이다.

   ► 내장 함수에서 빈 문자열이나 공백은 0으로 취급된다.

console.log(isFinite('')); // true

 

📌 Object.is

두 개의 값을 비교할 때 사용하는 내장 메서드이다.

=== 보다는 좀 더 신뢰할만한 결과를 보여준다.

 

어떤 점에서 그러냐면 다음과 같은 경우에서다.

- NaN을 대상으로 비교할 때, Object.is(NaN, NaN)은 true가 반환된다.

앞서 보였던 === 결과보다는 훨씬 정확하다.

- 0과 -0을 비교할 때, Object.is(0, -0)은 false가 반환된다.

사실 둘은 비트 단위로 봤을 때 다르기 때문에 다른 값이 맞긴 하다.

 

위의 두 가지 경우를 제외하고는 Object.is(a, b)라는 코드는 a === b 와 동일한 결과를 반환해준다.

 

✅ parseInt 그리고 parseFloat

- 단항 덧셈 연산자(+) 혹은 Number()를 사용하면 숫자형으로 변형이 가능하다.

- 이때 적용되는 규칙은 꽤나 엄격한데, 숫자가 아니면 형 변환이 실패한다.

   ► 단, 문자열의 처음이나 끝에 공백이 있을 때는 공백을 무시하고 변환을 한다.

 

- 1080px, 12pt 등과 같이 숫자와 단위가 혼합되어 사용될 때 숫자만 추출하는 방법은 무엇일까

   ► 바로 parseInt와 paresFloat이 이를 위해 만들어졌다.

 

- 두 함수는 불가능할 때까지 문자열에서 숫자를 읽는다.

   ► 읽을 수 있는 숫자가 없으면 NaN을 반환한다.

"use strict";

console.log(parseInt('12px')); // 12

let num = parseInt('100vw');
console.log(typeof num); // number

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

 

📌 parseInt의 두번째 인수

- parseInt의 두번째 인수는 선택이기 때문에 생략될 수 있다.

- 두번째 인수는 원하는 진수(base)를 지정해 줄 때 사용한다.

let num = parseInt('100vw', 2);
console.log(num); // 4

 

✅ 기타 수학 함수

- Math.random() : 0과 1 사이의 난수를 반환한다.

- Math.max(a, b, c...) 또는 Math.min(a, b, c...)

   : 인수 중 최댓값(또는 최솟값)을 반환한다.

- Math.pow(n, power)

   : n을 power번 거듭제곱한 값을 반환한다.

- 기타 등등 MDN 문서를 참고