• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Basic] JS - Number - JS숫자

JavaScript Numbers JS 숫자


학습전 알아 둘 것

 

1. 

JS는 오직 한 가지 타입의 숫자만 가짐. 

즉, number 키워드 하나로 모두 정의하며, 키워드조차 생략 가능.

ps1. C언어 경우, 데이터 크기에 따라 byte, short, long, int, float, double 등 키워드로 정의.
ps2. TypeScript 경우, number 하나로 정의하나, 키워드를 반드시 명시해줘야 함.
 
[JS : JavaScript]
let a = 12; // 정수
let b = 12.34; // 소수
 
[TS : TypeScript]
let a: number = 12; // 정수
let b: number = 12.34; // 소수

 


 

2. 

숫자는 소수점이 붙든 안 붙든 상관 없음.

즉, 정수든 소수든 동일 방식으로 할당함.

 


 

3.

연산할 때 숫자가 유효한 숫자인지 꼭 확인 !!

(예)

const 1/0; // 결과값: Infinity (양의 무한대)

const -1/0; // 결과값: -Infinity (음의 무한대)

const 'Not a Number'/2; // 결과값: NaN (숫자 아님)

 


 

4.

JS는 (-2**53 ~ 2**53) 구간의 숫자만 표현 가능. (** : 제곱기호)

최근, 

bigInt 타입 추가됨. 숫자 끝에 n 붙이면 bigInt 타입으로 간주됨.  ECMAScript 2001 (ECMA-262)

(예제)

'use strict';

const hz = 1234567890123456789012345678901234567890n;

console.log(`value: ${hz}, type: ${typeof hz}`); // Template Literal (String)

Number.MAX_SAFE_INTEGER;

결과보기 ※ 맨 좌측 하단 console 버튼 클릭 후 확인.

 

 

PS. 
엘리 님 (JS 3. 데이터타입 강의)

https://youtu.be/OCCpGh4ujb8

mdn bigInt 강의 참고.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/BigInt 

 

※ var, let, const 키워드 차이 모르시면 먼저 학습 후, 공부 권장.
 
 
1. JS 숫자

1. 숫자는 소수점을 붙일 수도 있고, 안 붙일 수도 있음.

 

var x = 34.00;    //  소수점 붙인 숫자
var y = 34;       //  소수점 안 붙인 숫자

 


2. 너무 큰 숫자나 너무 작은 숫자는 지수로 표현 가능

 

<p id="homzzangx"></p>

<p id="homzzangy"></p>

<script>

var x = 34e5;    // 3400000을 지수로 표현

var y = 34e-5;   // 0.00034을 지수로 표현

document.getElementById("homzzangx").innerHTML = "x = " + x; // 3400000

document.getElementById("homzzangy").innerHTML = "y = " + y; // 0.00034

</script>


결과보기

 

 

 

2. JS 숫자는 항상 64비트 부동(浮動) 소수점으로 표현.

 

1. 

다른 프로그램 언어 (예: C언어)들과 달리, JS는 다른 타입을 정의 안 함.

오직, number 타입 하나로 모두 정의하며, TypeScipt와 달리 생략 가능.
※ TypeScript는 JS의 이런 성격을 보완하고자 최근에 나온 언어임.

※ 맨 위에서 이미 설명.

2. 

JS 숫자는 항상 2배 정밀도 부동소수점으로 저장. (국제 IEEE 754 표준 따름.)
이러한 포맷은 숫자를 64비트로 저장.

52 비트 (0 - 51 비트 구간) : 값 (분수, 가수)

11 비트 (52 - 62 구간) : 지수

1비트 (63 구간) : 부호

 

 
 
 
3. 정확도
1. 정수(즉, 소수점이나 지수 표기가 안 붙은 숫자) 경우, 15자리까지만 인식.
Integers (numbers without a period or exponent notation) are considered accurate up to 15 digits.


<p id="homzzang"></p>

<script>
    var x = 333333333333333; // 15자리까지는 정상적으로 인식
    var y = 9999999999999999; // 15자리가 넘어가면 제대로 인식 못 함.  
    document.getElementById("homzzang").innerHTML = "x = " + x + "<br>" + "y = " + y;
</script>


결과값:
x = 333333333333333
y = 10000000000000000


2.
소수점은 최대 17자리까지 인식함.
그러나, 부동소수점연산(floating-point arithmetic)은 항상 100% 정확한 것은 아님.

<p id="homzzang"></p>

<script>
    x = 0.2 + 0.1; // 0.2와 0.3을 더한 값은 변수 x에 할당
    document.getElementById("homzzang").innerHTML = "0.2 + 0.1 = " + x; // 0.2와 0.1을 더한 값은 x와 같다.
</script>


결과값: 0.2 + 0.1 = 0.30000000000000004    
※ 원래는 같아야 정상이나, JS는 멍청해서 제대로 인식 못 함.


3. 부동소수점연산 오류를 해결하기 위해서는 일단 특정 값을 곱해준 다음, 그 곱해준 값으로 다시 나누면 됨.

<p id="homzzang"></p>

<script>
    x = (0.2*10 + 0.1*10) / 10; // JS가 제대로 인식하도록 일단 10을 곱해준 다음 다시 10으로 나눴음.
    document.getElementById("homzzang").innerHTML = "0.2 + 0.1 = " + x;
</script>


결과값: 0.2 + 0.1 = 0.3



4. 16진법 (Hexadecimal)

1. JS는 숫자가 0x로 시작하면, 숫자 상수를 16진법으로 해석함.

<button onclick="myFunction()">클릭</button>

<p id="homzzang"></p>

<script>
function myFunction() {
    document.getElementById("homzzang").innerHTML = "0xFFF = " + 0xFFF;  // 0xFFF를 16진법으로 해석해 출력
}
</script>


결과값: 0xFFF = 4095    ※ 0xFFF를 16진법으로 해석해, 16진법 값은 4095를 출력함.


[주의]
숫자를 적을 때, 0으로 시작해 적지 마세요. (예: 03)
어떤 JS 버전은 숫자가 0으로 시작할 경우, 그 숫자를 8진법으로 해석합니다.


2. JS는 기본적으로 숫자를 16진법으로 보여줍니다.
    하지만, toString() 메서드을 이용할 경우, 숫자를 16진법, 8진법, 2진법으로 출력 가능함.
    즉, 10진수 숫자를 객체(Object)로 만든 후, 아래 toString(진법을 나타내는 숫자) 적으시면 됩니다. (아래 예제 참고) 

    toSring(16) : 16진법
    toSring(8) :    8진법
    toSring(2) :    2진법


<p id="homzzang"></p>

<script>

    var myNumber = 64; // 변수 myNumber를 선언하고, 여기에 숫자 64를 할당
    document.getElementById("homzzang").innerHTML = "64 = " + 
    myNumber + " (10진법), " +  // 결과값 64
    myNumber.toString(16) + " (16진법), " +  // 결과값 40
    myNumber.toString(8) + " (8진법), " + // 결과값 100
    myNumber.toString(2) + " (2진법)" // 결과값 1000000

</script>


결과값:  64 = 64 (10진법), 40 (16진법), 100 (8진법), 1000000 (2진법)





5. 무한대 (Infinity)

1. JS가 계산할 수 있는 수 범위를 넘어선 경우, JS는 Infinity (또는 -Infinity)를 반환(=출력)합니다.

<button onclick="homzzangcom()">클릭</button>

<p id="homzzang"></p>

<script>
function homzzangcom() {
    var myNumber = 9; // 변수
    var txt = ""; // 아래 반복문 실행 결과를 txt 변수에 담으려고 미리 선언
    while (myNumber != Infinity) { // 변수 myNumber에 할당된 숫자가 무한대가 아닐 때까지 반복 실행
        myNumber = myNumber * myNumber; // 변수 myNumber에 할당된 수의 제곱값을 변수 myNumber에 할당
        txt = txt + myNumber + "<br>"; // 위 식을 계산해 txt 변수에 추가 
    }
    document.getElementById("homzzang").innerHTML = txt; // 변수 txt 출력
}
</script>


결과값:
81
6561
43046721
1853020188851841
3.4336838202925124e+30
1.1790184577738583e+61
1.3900845237714473e+122
1.9323349832288915e+244
Infinity


2. 숫자를 0으로 나눌 경우에도, JS는 infinity(무한대)를 반환

<button onclick="myFunction()">클릭</button> <--아래 JS 함수를 실행시키는 방아쇠 -->

<p id="homzzang"></p> <!--결과값이 출력될 위치-->

<script>
function myFunction() {
    var x = 3/0; // 변수 x 선언 후, 양수3을 0으로 나눈 값을 변수 x에 할당
    var y = -3/0; // 변수 y 선언 후, 음수3을 0으로 나눈 값을 변수 y에 할당
    document.getElementById("homzzang").innerHTML = x + "<br>" + y; // 변수 x와 y를 아이디 homzzang에 출력
}
</script>

결과값:
infinity  (양의 무한대)
_infinity (음의 무한대)


3. infinity(무한대)의 데이터 유형은 숫자입니다.
   ※ 데이터 유형 알아볼 때 사용하는 typeof  적을 때 반드시 소문자로 적어야 함. 한 글자라도 대문자 들어가면 출력 안 됨.

<button onclick="myFunction()">클릭</button>

<p id="homzzang"></p>

<script>
function myFunction() {
    document.getElementById("homzzang").innerHTML = typeof Infinity; // infinity(무한대)의 데이터 유형을 출력
}
</script>


결과값: number  (숫자이다)



6. NaN (숫자 아님) - Not a Number

1. NaN은 JS가 숫자가 아닌 값을 받은 걸 나타냅니다.

2. 숫자가 아닌 문자열로 연산을 하려고 할 때 발생합니다.

<p id="homzzang"></p>

<script>
document.getElementById("homzzang").innerHTML = 300 / "홈짱";  // 숫자가 아닌 문자열로 연산
</script>


결과값: NaN


3. 그러나, 문자열이 숫자를 포함한 경우, 결과는 숫자가 나옵니다.

<p id="homzzang"></p>

<script>
document.getElementById("homzzang").innerHTML = 300 / "30"; // 숫자를 따옴표로 묶어 문자열로 표시한 경우
</script>


결과값:10
 

4. isNaN()  : 값이 숫자인지 아닌지 알아볼 때 사용하는 JS 내장 함수.
                   즉, ( )에 들어가는 값이 숫자가 아니면 참(true), 숫자면 거짓(false)로 나옴.

<p id="homzzang"></p>

<script>
var x = 100 / "홈짱닷컴";  // 숫자 100을 문자열 홈짱닷컴으로 나눈 값을 변수 x에 할당
document.getElementById("homzzang").innerHTML = isNaN(x); // x는 숫자인지 아닌지 결과값을 반환해라.
</script>


결과값: true  즉, 숫자가 아니다.


5. 연산에 NaN이 사용될 경우, 연산 결과값 역시 NaN으로 나옴.

<p id="homzzang"></p>

<script>
var x = NaN;  // 변수 x에 숫자가 아닌 값 NaN을 할당
var y = 3;
document.getElementById("homzzang").innerHTML = x + y;  // 숫자 아닌 NaN과 숫자를 연산한 값을 반환해라.
</script>


결과값: NaN


6. 그러나, NaN의 데이터 유형을 알아보는 키워드 typeof를 이용해 조사해보면, NaN은 숫자로 나옴.

<p id="homzzang"></p>

<script>
document.getElementById("homzzang").innerHTML = typeof NaN; // NaN의 데이터 유형이 어떻게 되냐?
</script>


결과값: number   즉, Nan은 숫자이다.




7. 숫자도 객체(object)가 될 수 있음.

1. 숫자에 키워드 new를 사용하면 객체(object)로 만들 수 있습니다. 즉, new Number(숫자) 경우, 그 숫자를 객체화 시킴.

<p id="homzzang"></p>

<script>
var x = 345;  // 변수 x는 숫자 345가 할당된 숫자에 해당.
var y = new Number(345); // 변수 y는 숫자 345를 객체화 시킨 데이터 값이 할당된 객체에 해당 

document.getElementById("homzzang").innerHTML = typeof x + " " + typeof y; // 변수 x와 y의 데이터 타입?
</script>


결과값: number object     즉, x는 숫자, y는 객체이다.


2. 그러나, 숫자를 객체로 만들진 마세요. 처리 속도가 떨어질 수 있으며, 특히 치명적인 부작용이 생길 수 있습니다.

3. === (데이터의 유형 모두를 비교해 같은 경우의 등호)를 이용해 비교하면, 결과값이 false (거짓)으로 나옴.

<p id="homzzang"></p>

<script>
var x = 345;              // 변수 x는 숫자 345가 할당된 숫자.
var y = new Number(345);  // 변수 y는 숫자 345를 객체화 시킨 객체
document.getElementById("homzzang").innerHTML = x===y; // x와 y가 데이터 유형과 값 모두가 같냐?
</script>


결과값: false   즉, 데이터 값은 같지만, 유형은 다르다.





8. JS 경우, 숫자도 속성(property)과 메서드(object) 보유 가능.
왜냐하면, 숫자에 속성과 메서드이 붙게되면, JS는 숫자를 객제(object)로 간주하기 때문.


9. 숫자의 속성 (Property)  

1. 속성 종류     ※ 주의: 대소문자 구별하니, 반드시 아래 써진대로 사용해야 함. 
 
  속성

 의미
 
  MAX_VALUE

 JS에서 가능한 가장 큰 숫자를 반환
 
  MIN_VALUE

 JS에서 가능한 가장 작은 숫자를 반환
 
  NEGATIVE_INFINITY

 음의 무한대 표시 (즉, JS로 표현 가능한 음수 범위를 넘어설 때 사용)
 
  NaN

 숫자가 아닌 값을 표시
 
  POSITIVE_INFINITY

 양의 무한대 표시 (즉, JS로 표현 가능한 양수 범위를 넘어설 때 사용)


(예제) JS로 표현 가능한 최대 숫자    주의:  대소문자 구분하므로, 하나라도 바뀌면 정상 출력 안 됨.

<p id="homzzang"></p>

<script>
document.getElementById("homzzang").innerHTML = Number.MAX_VALUE// JS가 표현 가능한 최대값은?
</script>


결과값:  1.7976931348623157e+308



2. 숫자 속성은 Number 라는 JS 숫자 객체에 붙여 사용합니다. Number 적을 때 첫글자만 대문자로 적어야 함.
   만약, Number가 아닌 숫자에 붙여 사용할 경우, undefined (정의 안 됨) 오류가 반환됨.

<p id="homzzang"></p>

<script>
var x = 3; // 변수 x 선언하고, 숫자 3 할당
document.getElementById("homzzang").innerHTML = x.MAX_VALUE; // 숫자 객체인 Number 대신 x 사용한 경우
</script>


결과값: undefined   즉, 정의 안 됨 오류 뜸



숫자의 메서드 (Methods)는 다음 장에서 설명 ^!~
 
방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
게시물이 없습니다.
목록
찾아주셔서 감사합니다. Since 2012