6장 숫자
자바스크립트에서 모든 숫자는 64 비트 부동 소수점으로 저장된다. 부동 소수점으로 저장된 숫자 데이터는 실제 프로그램에서 정수와 부동 소수점 두 가지로 사용된다. 6장엣는 숫자를 다루기 위한 Number 객체의 메서드와 프로퍼티에 대해 공부한다. 또한 진수 변환, 문자열을 정수와 부동 소수점으로 변환하는 방법에 대해서도 학습한다.
6.1 숫자란?
C++, 자바 등의 프로그래밍 언어에서 숫자는 int, short, long, float, double 등 다양한 형태로 저장된다. 이러한 프로그래밍 언어들과는 달리 자바스크립트에서 모든 숫자는 64 비트의 부동 소수점(floating-point)로 저장된다.
자바스크립트에서 컴퓨터 메모리에 부동 소수점으로 저장된 숫자는 다음 예제에서와 같이 정수와 소수점이 있는 숫자 두 가지 형태로 사용된다. 더불어 매우 큰 수와 매우 작은 수를 표현하는 데에는 지수(exponential)가 사용된다.
예외적으로 아주 큰 정수를 표현하는 데에는 BigInt 데이터 형을 사용한다. BigInt에 대해서는 2장의 2.2.2절을 참고하기 바란다.
| 예제 6-1. 자바 스크립트에서 사용되는 숫자 | number1.html | 코드 원문 |
<p id="show"></p>
<script>
let a = 235.27; // 부동 소수점(floating-point)
let b = -12; // 정수(integer)
let c = 253e8; // 양의 지수(positive exponential)
let d = 253e-8 // 음의 지수(nagative exponential)
let text = "";
text += a + "<br>";
text += b + "<br>";
text += c + "<br>";
text += d;
document.getElementById("show").innerHTML = text;
</script>| 예제 6-1. 자바 스크립트에서 사용되는 숫자 | number1.html | 코드 분석 |
<p id="show"></p>
<script>
let a = 235.27; // 부동 소수점(floating-point)
let b = -12; // 정수(integer)
let c = 253e8; // 양의 지수(positive exponential)
let d = 253e-8 // 음의 지수(nagative exponential)
let text = "";
text += a + "<br>";
text += b + "<br>";
text += c + "<br>";
text += d;
document.getElementById("show").innerHTML = text;
</script>위 예제에서와 같이 자바스크립트에서는 부동 소수점과 정수가 주로 사용되고 매우 큰 수와 작은 수에 대해서는 지수(expoenetial)를 사용하기도 한다. 이 모든 숫자들이 메모리에 저장될 때에는 64비트 부동 소수점으로 저장된다.
6.1.1 숫자와 문자열 연산
3과 "3"은 전혀 다른 데이터이다. 3은 숫자이고 "3"은 문자열이다. 숫자 3이 메모리에 저장될 때에는 10진수가 2진수(0 또는 1)로 변환되어 저장된다. 자바스크립트에서 문자열인 경우에는 UTF-16(16-bit Unicode Transformation Format) 형태로 저장된다. "3"에 대한 UTF-16 코드는 16진수로 0033이 된다. 0033은 2진수로 표현하면 0000000000110011이 된다. 이 값이 문자열 "3"을 나타낸다.
다음 코드에서는 숫자와 문자열 간에 덧셈과 곰셈을 했을 경우 어떤 결과가 나오는지를 테스트하고 있다.
| 예제 6-2. 숫자와 문자열 간의 덧셈과 곱셈 연산 | number2.html | 코드 원문 |
<p id="show"></p>
<script>
let a = 3; // 숫자
let b = 5; // 숫자
let c = "3"; // 문자열
let d = "5"; // 문자열
let result1 = a + b; // 8
let result2 = c + d; // 35
let result3 = a + d; // 35
let result4 = c * d; // 15
let text = "";
text += result1 + "<br>";
text += result2 + "<br>";
text += result3 + "<br>";
text += result4;
document.getElementById("show").innerHTML = text;
</script>| 예제 6-2. 숫자와 문자열 간의 덧셈과 곱셈 연산 | number2.html | 코드 분석 |
<p id="show"></p>
<script>
let a = 3; // 숫자
let b = 5; // 숫자
let c = "3"; // 문자열
let d = "5"; // 문자열
let result1 = a + b; // 8
// 숫자 3과 숫자 5의 덧셈이여서 결과는 8이다.
let result2 = c + d; // 35
/* 문자열 "3" 문자열 "5" 사이에 덧셈 기호(+)가 있으므로 덧셈 기호는
문자열 연결 연산자이다. 따라서 두 문자열이 연결되서 35가 된다. */
let result3 = a + d; // 35
/* 숫자 3과 문자열 "5" 사이에 덧셈 기호가 있으면 숫자 3이 문자열 "3"
으로 자동 변환된다. 결과는 "35" */
let result4 = c * d; // 15
/* 문자열 "3"과 문자열 "5"의 곱셈 연산은 문자열 두개가 숫자로 자동 변환되여
결과는 15가 된다. */
let text = "";
text += result1 + "<br>";
text += result2 + "<br>";
text += result3 + "<br>";
text += result4;
document.getElementById("show").innerHTML = text;
</script>
6.1.2 NaN 데이터 형
Nan은 'Not a Number'의 약자이다. 숫자와 문자열 간에 사칙 연산(덧셈 연산 제외)을 하면 서로 연산을 할 수 없어서 Nan의 결과가 나오게 된다.
예외적으로 숫자와 문자열 간의 덧셈 연산은 숫자가 문자열로 자동 변환되어 서로 연결되 하나의 문자열로 합쳐진다.
다음 코드에서는 숫자와 문자열 간의 나눗셈을 한 결과를 보여주고 있다.
| 예제 6-3. 숫자와 문자열 간의 나눗셈 연산 | nan.html | 코드 원문 |
<p id="show"></p>
<script>
let a = 10; // 숫자
let b = "lion"; // 문자열
let c = "2"; // 문자열
let result1 = a/b; // NaN
let result2 = a/c; // 5
let text = "";
text += result1 + "<br>";
text += result2 + "<br>";
text += isNaN(result1) + "<br>";
text += isNaN(result2);
document.getElementById("show").innerHTML = text;
</script>| 예제 6-3. 숫자와 문자열 간의 나눗셈 연산 | nan.html | 코드 분석 |
<p id="show"></p>
<script>
let a = 10; // 숫자
let b = "lion"; // 문자열
let c = "2"; // 문자열
let result1 = a/b; // NaN
// 숫자 나누기 문자열 성립 불가 결과는 NaN
let result2 = a/c; // 5
// 숫자 나누기 문자열 문자열이 숫자로 자동 변환 결과는 5
let text = "";
text += result1 + "<br>";
text += result2 + "<br>";
text += isNaN(result1) + "<br>";
// inNaN() 함수로 변수 result1 판별 NaN이기 때문에 반환값은 true
text += isNaN(result2);
// isNaN() 함수로 변수 result2 판별 숫자이기 때문에 반환값은 false
document.getElementById("show").innerHTML = text;
</script>
6.1.3 진수 변환
Number 객체의 toString() 메서드를 이용하면 숫자를 다른 진수로 변환할 수 있다. 다음 코드는 toString() 메서드를 이용해서 숫자를 16진수, 10진수, 2진수로 변환한 예이다.
| 예제 6-3. 진수 변환 예 | to_string.html | 코드 원문 |
<p id="show"></p>
<script>
let x = 91;
// let x = 0x4a;
let result1 = x.toString(16);
let result2 = x.toString(10);
let result3 = x.toString(2);
let text = "";
text += result1 + "<br>";
text += result2 + "<br>";
text += result3;
document.getElementById("show").innerHTML = text;
</script>| 예제 6-3. 진수 변환 예 | to_string.html | 코드 분석 |
<p id="show"></p>
<script>
let x = 91;
// let x = 0x4a;
let result1 = x.toString(16);
// 변수 x에 저장된 값을 16진수로 변환하고 변수 result1에 저장
let result2 = x.toString(10);
// 변수 x에 저장된 값을 10 진수로 변환하고 변수 result2에 저장
let result3 = x.toString(2);
// 변수 x에 저장된 값을 2진수로 변환하고 변수 result3에 저장
let text = "";
text += result1 + "<br>";
text += result2 + "<br>";
text += result3;
document.getElementById("show").innerHTML = text;
</script>
6.1.4 무한대
자바스크립트에서는 무한대 수를 표현하기 위해 Infinity와 -Infinity 프로퍼티를 사용한다. Infinity는 양의 무한대, -Infinity는 음의 무한대를 나타낸다. 표현할 수 있는 가장 큰 수보다 더 큰 수를 계산해야할 경우가 발생하면 자바스크립트는 Infinity를 반환한다.
다음은 거듭 제곱 연산을 계속하여 무한대가 발생한 예이다.
| 예제 6-4. 거듭 제곱 연산 계속으로 발생한 무한대 | infinity1.html | 코드 원문 |
<p id="show"></p>
<script>
let x = 10;
let text = "";
while (x != Infinity) {
x = Math.pow(x,2) // x = x * x 와 동일
text += x + "<br>";
}
document.getElementById("show").innerHTML = text;
</script>| 예제 6-4. 거듭 제곱 연산 계속으로 발생한 무한대 | infinity1.html | 코드 분석 |
<p id="show"></p>
<script>
let x = 10;
let text = "";
while (x != Infinity) {
// x가 무한대가 아니면 반복
x = Math.pow(x,2) // x = x * x 와 동일
// x에 저장된 값을 제곱해서 변수 x에 저장
text += x + "<br>";
// 문자열 변수 text에 x의 값을 저장하고 개행
}
document.getElementById("show").innerHTML = text;
</script>
While 문의 반복 루프는 x의 값이 Infinity가 되는 순간 종료된다. 따라서 마지막에 Infinity가 출력된다.
무한대는 다음 예에서서와 같이 어떤 수를 0으로 나눌때에도 발생된다.
| 예제 6-5. 0으로 나누었을 때 발생된 무한대 | infinity2.html | 코드 원문 |
<p id="show"></p>
<script>
let x = 10;
text = "";
text += x/0 + "<br>";
text += -x/0 + "<br>";
document.getElementById("show").innerHTML = text;
</script>| 예제 6-5. 0으로 나누었을 때 발생된 무한대 | infinity2.html | 코드 분석 |
<p id="show"></p>
<script>
let x = 10;
text = "";
text += x/0 + "<br>";
// 10을 0으로 나눈 값을 변수 text에 이어서 저장, Infinity(무한대)가 저장된다.
text += -x/0 + "<br>";
// -10을 0으로 나눈 값을 변수 text에 이어서 저장, -Infinity(음의 무한대)가 저장된다.
document.getElementById("show").innerHTML = text;
</script>
6.2 Number 메서드
6.2.1 toString() 메서드
앞에서 toString() 메서드를 이용해서 진수를 변환하는 방법에 대해서 배웠다. 예를 들어 toString(16)은 숫자를 16진수의 문자열로 변환하는 데 사용된다. toString() 메서드에서 매개변수를 사용하지 않고 toString() 그대로 사용하면 숫자를 문자열로 변환할 수 있다.
다음은 toString() 메서드를 이용해서 숫자를 문자열로 변환하는 예이다.
| 예제 6-6. toString() 메서드로 숫자 -> 문자열 변환하기 | to_String2.html | 코드 원문 |
<p id="show"></p>
<script>
let x = 10;
let y = x.toString();
let text = "";
text += x + "<br>";
text += y + "<br>";
text += typeof x + "<br>";
text += typeof y;
document.getElementById("show").innerHTML = text;
</script>| 예제 6-6. toString() 메서드로 숫자 -> 문자열 변환하기 | to_String2.html | 코드 분석 |
<p id="show"></p>
<script>
let x = 10;
let y = x.toString();
// toString() 메서드를 이용해서 숫자 10을 문자 "10"으로 바꾸어서 변수 y에 저장한다.
let text = "";
text += x + "<br>";
text += y + "<br>";
text += typeof x + "<br>";
// 연산자 typeof로 데이터 형을 알아보면 x는 숫자이다.
text += typeof y;
// 연산자 typeof로 데이터 형을 알아보면 y는 문자열이다.
document.getElementById("show").innerHTML = text;
</script>
6.2.2 toFixed() 메서드
toFixed() 메서드는 부동소수점 숫자에 대해 소수점 자릿수를 구하는데 사용된다. 예를 들어 toFixed(2)는 소주점 둘째 자리까지 구한다. 반올림은 셋째 자리에서 일어난다.
다음 예제를 통해서 toFixed() 메소드의 사용법에 대해 알아보자.
| 예제 6-7. toFixed() 메서드로 부동소수점 자릿수 구하기 | to_fixed.html | 코드 원문 |
<p id="show"></p>
<script>
let x = 20.3648;
let text = "";
text += x.toFixed(0) + "<br>";
text += x.toFixed(1) + "<br>";
text += x.toFixed(2) + "<br>";
text += x.toFixed(3);
document.getElementById("show").innerHTML = text;
</script>| 예제 6-7. toFixed() 메서드로 부동소수점 자릿수 구하기 | to_fixed.html | 코드 분석 |
<p id="show"></p>
<script>
let x = 20.3648;
let text = "";
text += x.toFixed(0) + "<br>";
/* 변수 x에 toFixed() 메서드를 사용한다. 소수점 첫째 자리에서 반올림 되어
소수점 없이 정수만 출력된다. */
text += x.toFixed(1) + "<br>";
/* 변수 x에 toFixed() 메서드를 사용한다. 소수점 둘째 자리에서 반올림 되어
소수점 첫째 자리까지 출력된다. */
text += x.toFixed(2) + "<br>";
/* 변수 x에 toFixed() 메서드를 사용한다. 소수점 셋째 자리에서 반올림 되서
소수점 둘째 자리까지 출력된다. */
text += x.toFixed(3);
/* 변수 x에 toFixed() 메서드를 사용된다. 소수점 넷째 자리에서 반올림 되서
소수점 셋째 자리까지 출려된다. */
document.getElementById("show").innerHTML = text;
</script>
6.2.3 toPrecison() 메서드
toPrecision() 메서드는 toFixed() 메서드와 마찬가지로 부동 소수점 자릿수를 구하는 데 사용된다. toPrecison() 메서드에서는 표시되는 전체 숫자의 개수를 이용해서 자리수를 구한다.
다음 코드를 통해서 toPrecision() 메서드의 사용법에 대해 알아보자.
| 예제 6-8. toPrecision() 메서드로 부동소수점 자릿수 구하기 | to_precision.html | 코드 원문 |
<p id="show"></p>
<script>
let x = 123.348765;
let text = "";
text += x.toPrecision() + "<br>";
text += x.toPrecision(3) + "<br>";
text += x.toPrecision(4) + "<br>";
text += x.toPrecision(5) + "<br>";
text += x.toPrecision(6);
document.getElementById("show").innerHTML =text;
</script>| 예제 6-8. toPrecision() 메서드로 부동소수점 자릿수 구하기 | to_precision.html | 코드 분석 |
<p id="show"></p>
<script>
let x = 123.348765;
let text = "";
text += x.toPrecision() + "<br>";
/* 변수 x에 toPrecision 메서드 적용 전체 숫자 범위를 다 가진 채로 반환된다.
반환값은 변수 text에 이어서 저장된다. */
text += x.toPrecision(3) + "<br>";
/* 변수 x에 toPrecision 메서드 적용 숫자 3개를 가진채로 반환되서 변수 text에
이어서 저장된다. */
text += x.toPrecision(4) + "<br>";
/* 변수 x에 toPrecision 메서드 적용 숫자 4개를 가진채로 반환되서 반환값이
변수 text에 이어서 저장된다. */
text += x.toPrecision(5) + "<br>";
text += x.toPrecision(6);
document.getElementById("show").innerHTML =text;
</script>toPrecision() 메서드는 toFixed() 메서드와 마찬가지로 부동소수점 자릿수를 구하는 데 사용된다. toPrecision() 메서드의 매개변수는 표시되는 숫자의 개수를 의미한다. 예를 들어 x.toPrecision(5)는 변수 x의 값 123.348765에서 전체 다섯 자리까지의 값인 123.35를 반환한다.
6.2.4 toExponential() 메서드
toExponential() 메서드는 지수(exponential) 표기로 반올림된 문자열을 반환한다. 다음 예제를 통해 toException() 메서드에 대해서 알아보자.
| 예제 6-9. toExponential() 메서드 사용 예 | to_exponential.html | 코드 원문 |
<p id="show"></p>
<script>
let x = 1235.36764508;
let text = "";
text += x.toExponential() + "<br>";
text += x.toExponential(2) + "<br>";
text += x.toExponential(4) + "<br>";
text += x.toExponential(6);
document.getElementById("show").innerHTML = text;
</script>| 예제 6-9. toExponential() 메서드 사용 예 | to_exponential.html | 코드 원문 |
<p id="show"></p>
<script>
let x = 1235.36764508;
// 숫자형 변수 x 선언하고 값으로 1235.36764508를 저장한다.
let text = "";
text += x.toExponential() + "<br>";
// toExponential() 메서드를 사용해서 변수 x를 지수형으로 표현한다.
text += x.toExponential(2) + "<br>";
// toExponential() 메서드를 사용해서 변수 x를 소수점 두자리까지 지수형으로 표현한다.
text += x.toExponential(4) + "<br>";
// toExponential() 메서드를 사용해서 변수 x를 소수점 네번째 자리까지 지수형으로 표현한다.
text += x.toExponential(6);
document.getElementById("show").innerHTML = text;
</script>
'프로그래밍 > 예제로 배우는 자바스크립트 요약 및 분석(IT 전공 서적)' 카테고리의 다른 글
| 예제로 배우는 자바스크립트 요약 및 코드 분석 7장 7.1~7.3 (0) | 2023.10.11 |
|---|---|
| 예제로 배우는 자바스크립트 요약 및 코드 분석 6장 6-3~6-4 (0) | 2023.10.11 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 5장 5.4~5.6 (0) | 2023.10.10 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 5장 5.1~5.3 (0) | 2023.10.09 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 4장 - 4.3~4.6 (0) | 2023.10.09 |