본문 바로가기
dev/JavaScript

Number

by masankong 2023. 4. 4.

Number

숫자형은 숫자를 처리하기 위해 고안된 자료형이다.

💡 숫자 용어 정리
1. 정수 : 0을 기준으로 하는 양수와 음수
2. 실수 : 소수점을 포함하는 모든 수
3. 유효숫자 : 수의 정확도에 영향을 주는 수.주로 소수점 첫째자리에서부터 늘어져 있는 0들을 제외한 모든 수
0.0075 ==> 75
2.4300 ==> 2.430
8230 ==> 823​

 

📍부동소수점이 일어나는 이유

🤔 부동소수점이란? 실수를 표현할 때 소수점의 위치를 고정하지 않는 것을 말한다

  • computer 에서 10진수 연산이 정확하지 않음
  • 0.1이 컴퓨터 입장에선 무한수
  • 반복문 안에 0.1씩 증가하는 코드를 혹시 작성하게 된다면 예측 불가한 값이 생성된다.

<대표적인 오류>

// 0.1 + 0.2 (0.1씩 늘어갈 때) 반환값: 0.30000000000000004
// 0.1 * 3 반환값 :  0.30000000000000004
// 0.3 + 0.6 반환값 :  0.8999999999999999

let width = 0.3;
let height = 0.6;
if (width + height >= 0.9){
    console.log('실행해!') //실행되지 않음 우리가 예상하는 결과값이 나오지 않음
}

 

 

✅ 숫자형으로 전환!

let n1 = 10000;
let n2 = 10.123123;
let n3 = 31;
let n4 = 1001;
let n5 = 1111;
let s1 = '10000000000';
let s2 = '100,000,000,000';

-----------------------------
console.log(parseInt(n3, 2)); // NaN 출력
console.log(parseInt(n4, 2)); // 9출력 , 2진법으로 된 숫자를 10진법으로 바꿈
console.log(parseInt(n4, 8)); // 513 출력, 8진법으로 된 숫자를 10진법으로 바꿈
console.log(parseInt(n4, 10)); // 1001 출력, 10진법으로 된 숫자를 10진법으로
console.log(parseInt(n2)); //소수점 없애기 권장
console.log(~~n2); //소수점이 없애지긴 하나 안정하진 않은 방법
console.log(n2.toFixed(3)) // 10.123 소수점 3자리까지 자름 ****

📍 parseInt( string , radix )

문자열 인자(숫자 + 문자)를 받아서 숫자로 변환하는 함수이다. 받은 인자를 파싱하여 정수또는 NaN으로 리턴한다.

🤔 인자란? 함수를 호출할 때 전달하여 실행 결과에 영향을 미치는 값

🤔 parsing 파싱이란? 분해하고 해부하여 구문 분석 하는것

  • string : 파싱할 값입니다. 문자열이 아닐경우 ToString 추상 연산을 사용해 문자열로 변환합니다
  • radix : string 진수를 나타내는 2부터 36까지의 정수입니다. 입력하지 않으면 10으로 처리합니다.

console.log(parseInt(1001, 2)) 1001은 2진수입니다 ! ==> 1001을 10진수로 변환합니다 ==>  답은 9입니다!

console.log(parseInt('1000100100', 2)) ==> '1000100100'을 숫자형으로 변환합니다 ==> 2진수에서 10진수로 변환합니다 ==> 답은 548 입니다!

 

1. 소수점 제거하고 정수로 번환

let num = 34.234;
console.log(parseInt(num)) // 34 반환

let num2 = 34.dfsd234
console.log(parseInt(num2)) // 34 반환

2. 수가 아닌 문자로 시작하면 NaN 반환

let num3 = '34sdf'
console.log(parseInt(num3)) // 34반환

let num4 = 'sdf34'
console.log(parseInt(num4)) // 문자로 시작하기에 NaN반환

+) 추가로 소수점을 없앨때 사용하는 방식 2가지

// 방법 1
console.log(~~3.342) // 3

// 방법 2
console.log(3.432.toFixed(0)) // 3
console.log(3.423.toFixed(2)) // 3.42

 

📍parseFloat( string )

문자열 인자(숫자 + 문자)를 받아서 숫자로 변환하는 함수이다. 받은 인자를 파싱하여 부동소수점 숫자로 반환합니다.

 

1. 수로 시작할 때 그 수를 실수로 바꿉니다.

2. 띄어 쓰기로 여러개의 수가 있으면 첫번째 수만 바꿉니다.

3. 공백으로 시작하면 공백은 무시합니다.

4. 수가 아닌 문자로 시작하면 NaN으로 반환합니다.

 

 

📍Number( object )

문자열을 숫자로 변환하는 함수입니다.

1. object: 문자열 또는 문자열을 값으로 하는 변수 등을 입력

2. 숫자로 변환할 수 없는 값인 경우 NaN 반환

 

 

✅ parseInt(), parseFloat(), Number() 함수 비교!

📍 Boolean형 변환

console.log(Number(true)) // 1
console.log(Number(false)) // 0

console.log(parseInt(true)) // NaN
console.log(parseInt(false)) // NaN

console.log(parseFloat(true)) // NaN
console.log(parseFloat(false)) // NaN

 

📍 문자, 숫자+공백, 문자 + 숫자, 실수, 숫자

console.log(Number("hello")) // NaN
console.log(Number("10 20")) // NaN
console.log(Number("10abc")) // NaN
console.log(Number("10.123")) // 10.123
console.log(Number("10")) // 10


console.log(parseInt("hello")) // NaN
console.log(parseInt("10 20")) // 10
console.log(parseInt("10abc")) // 10
console.log(parseInt("10.123")) // 10
console.log(parseInt("10")) // 10

console.log(parseFloat("hello")) // NaN
console.log(parseFloat("10 20")) // 10
console.log(parseFloat("10abc")) // 10
console.log(parseFloat("10.123")) // 10
console.log(parseFloat("10")) // 10

 

📍공백

console.log(Number(" ")) // 0
console.log(Number("")) // 0
console.log(Number("    10")) // 10
console.log(Number("10    ")) // 10
console.log(Number("    10    ")) // 10


console.log(parseInt(" ")) // NaN
console.log(parseInt("")) // NaN
console.log(parseInt("    10")) // 10
console.log(parseInt("10    ")) // 10
console.log(parseInt("    10    ")) // 10

console.log(parseFloat(" ")) // NaN
console.log(parseFloat("")) // NaN
console.log(parseFloat("    10")) // 10
console.log(parseFloat("10    ")) // 10
console.log(parseFloat("    10    ")) // 10

 

✅ BigInt

J길이의 제약 없이 정수를 다룰 수 있게 해주는 숫자형입니다.

<Bigint type>

  • 함수 BigInt 로 호출시
  • 정수 리터럴 끝네 n을 붙였을시

1. BigInt는 대게 일반 숫자와 큰 차이 없이 사용할 수 있지만 BigInt형 값을 대상으로 한 연산은 BigInt 형 값을 반환한다. 또한 소수점이 나오는 연산 결과값은 정수로 변환한다.

console.log(3n + 1n) // 4n
console.log(3n * 2n) // 6n
console.log(3n / 2n) // 1n, 소수점 생략

2. BigInt형 값과 일반 숫자를 섞어서 사용할 순 없습니다. 일반 숫자와 섞어서 사용해야 한다면 BigInt() 나 Number() 를 사용해 명시적으로 형변환을 해주면 됩니다.

console.log(3n * 2) // Error

console.log(3n * BigInt(2)) // 6n
console.log(Number(3n) * 2) // 6

 

📍 BigInt는 언제 사용할까

BigInt는 주로 큰 숫자를 사용할때 사용한다. BigInt 형은 큰 숫자 연산으로 오는 에러상황들을 방지할 수 있다.

//의도 대로 작동하지 않는 연산

2 ** 53 - 1 //9007199254740991
9007199254740991 + 1 // 9007199254740992
9007199254740991 + 2 // 9007199254740992
9007199254740991 + 3 // 9007199254740994
9007199254740991 + 4 // 9007199254740996

//해결법
// 1. n 붙이기
9007199254740991n + 1n // 9007199254740992n
9007199254740991n + 3n // 9007199254740994n

//BigInt 사용
BigInt(9007199254740991) + BigInt(1) //9007199254740992n
BigInt(9007199254740991) + BigInt(3) //9007199254740994n

 

📍 BIgInt 주의사항

9007199254740991 이 숫자는 Number.MAX_SAFE_INTEGER와 동일 수 이다. 말 그대로 '안전한 숫자'입니다. 만약 BigInt 안의 숫자를 이 숫자보다 큰 숫자로 하였을 경우, 정확한 연산이 안된다.

그래서 BigInt로 큰 숫자를 표현하더라도, 그 안에 들어가는 값은 Number.MAX_SAFE_INTEGER 이하일 때만 안전하고 그 이상의 숫자를 넣으면 정확하게 결과값을 내어주지 않습니다. 따라서 BigInt()를 사용하여 더 큰 숫자를 표현하고 싶을 때에는 문자로 넣어야한다

 

✅ Math 

수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체입니다. 함수 객체가 아닙니다.

🧨 Math는 Number 자료형만 지원하며 BigInt와는 사용할 수 없습니다.

Math.abs(-10) // 절대값, 10 반환
Math.ceil(10.3) // 올림, 11 반환
Math.floor(10.3) // 내림, 10 반환
Math.round(10.5) // 반올림, 11 반환
Math.round(10.4) // 반올림, 10 반환
Math.sqrt(100) // square root 루트, 10 반환
Math.PI // 3.1415926535897
Math.pow(2, 3) // 2 ** 3
Math.random() // 0 이상 1 미만 숫자
Math.min(1, 3, 5, 6, 7, 23, 9) // 제일 작은 수 , 1
Math.max(1, 3, 5, 6, 7, 23, 9) // 제일 큰 수, 23
Math.min([1, 2, 3, 4, 5]) // 대괄호 안에서 작동안됨, NaN 반환

// 전개구문 활용
Math.min(...[1, 2, 3, 4, 5]) //  이렇게 사용 가능 '...' 전개 구문은 뒤에서 배움, 1 반환

let values = [1, 2, 3, 4, 5]
let values2 = [6, 7, 8, 9, 10]
Math.max(...values) // 5반환
Math.max(...values, ...values2) // 10반환

 

'dev > JavaScript' 카테고리의 다른 글

Object  (0) 2023.04.05
Array  (0) 2023.04.05
[간단 프로그램]미니 스타그래프트  (0) 2023.04.02
[간단 프로그램] 글자수 제한  (0) 2023.03.28
[간단 프로그램]lotto 프로그램 만들기  (0) 2023.03.28

댓글