숫자형
숫자형(Number)은 숫자를 처리하기 위해 사용되는 자바스크립트의 자료형입니다. 이 장에서는 숫자형의 다양한 특징과 기능을 살펴보겠습니다.
1. 숫자형의 특징
1.1 산술 연산
숫자는 다양한 산술 연산을 할 수 있습니다. 아래 예제를 실행해 보고 다양하게 숫자를 변경(양수, 음수, 0, 소수)하여 결과를 확인해 보세요. 앞서 배운 템플릿 리터럴을 사용하여 결과를 출력합니다.
// 산술 연산
console.log(`10 + 3 = ${10 + 3}`);
console.log(`10 - 3 = ${10 - 3}`);
console.log(`10 / 3 = ${10 / 3}`);
console.log(`10 * 3 = ${10 * 3}`);
console.log(`10 ** 3 = ${10 ** 3}`); // 10의 3승
console.log(`10 % 3 = ${10 % 3}`); // 나머지
1.2 단항 연산
단항 연산자는 하나의 피연산자에 대해 연산을 수행합니다. 마지막에 문자열에 단항 연산자를 사용하여 숫자로 변환하는 방법은 권하는 방법은 아닙니다. 대신 뒤에서 배울 parseInt() 또는 parseFloat()를 사용하세요.
console.log(-2); // -2 (음수로 변환)
console.log(-(-2)); // 2 (양수로 변환)
console.log(+4); // 4 (양수로 유지)
console.log(+'4'); // 4 (문자열 '4'를 숫자 4로 변환)
1.3 증감 연산자
증감 연산자는 변수의 값을 1씩 증가 또는 감소시킵니다.
let num = 3;
console.log(`증감연산 : ${++num}`); // 4 (num을 먼저 증가시키고 출력)
console.log(`증감연산 : ${num++}`); // 4 (출력 후 num을 증가시킴, 결과적으로 num은 5)
console.log(`증감연산 : ${--num}`); // 4 (num을 먼저 감소시키고 출력)
console.log(`증감연산 : ${num--}`); // 4 (출력 후 num을 감소시킴, 결과적으로 num은 3)
1.4 비교 연산자
비교 연산자는 두 값을 비교하여 참(true) 또는 거짓(false) 값을 반환합니다. 이러한 참, 거짓을 불리언(boolean) 값이라고 합니다.
여기서 ==와 ===의 차이점을 알아두세요. ==는 값만 비교하고, ===는 값과 타입까지 비교합니다. 따라서 ===를 사용하는 것이 더 안전합니다.
예시가 많으니 필요하지 않은 것들은 주석 처리하여 실행해 보세요.
console.log(`비교연산 : ${2 > 3}`);
console.log(`비교연산 : ${2 >= 3}`);
console.log(`비교연산 : ${2 < 3}`);
console.log(`비교연산 : ${2 <= 3}`);
console.log(`비교연산 : ${2 == 3}`);
console.log(`비교연산 : ${2 == '2'}`);
console.log(`비교연산 : ${2 != 3}`);
console.log(`비교연산 : ${2 === 3}`);
console.log(`비교연산 : ${2 !== 3}`);
console.log(`비교연산 : ${2 === '2'}`);
1.5 특수 값
숫자형에는 몇 가지 특수한 값도 있습니다. Infinity는 무한대를 의미하고, NaN은 숫자가 아님을 의미합니다. e는 숫자 뒤에 붙여 0을 손쉽게 추가할 수 있습니다.
// console.log('무한대 : ', 1 / 0);
// 콘솔에서 확인해야 Infinity라고 찍힙니다.
// 위니북스에서는 출력하지 않습니다.
console.log(Infinity > 10) // true
console.log(3e10); // 30000000000
let num = 9999e10000;
console.log(num === Infinity);
// true (너무 큰 숫자는 Infinity로 취급됨)
console.log('숫자가 아님' / 2);
// NaN (문자열을 숫자로 나눌 수 없어서 NaN 반환)
아주 큰 숫자를 취급할 때에는 bigint를 사용하세요. bigint는 일반적인 숫자형을 넘어서는 큰 정수를 표현할 수 있는 데이터 타입입니다.
// BigInt 사용 예시
let testBigNum = 12345678901234567890;
console.log(testBigNum + 1); // 숫자가 잘못 표시됩니다.
let bigNumber = 12345678901234567890n;
console.log(bigNumber + 1n);
BigInt는 ES2020(ES11)에서 추가된 새로운 자료형입니다. 따라서 구형 브라우저에서는 지원되지 않을 수 있습니다. BigInt는 숫자 뒤에 n을 붙여 사용합니다.
2. 숫자형 함수와 메소드
2.1 parseInt(), parseFloat()
이 함수들은 문자열을 숫자로 변환합니다. parseInt는 정수로, parseFloat는 실수로 변환합니다. ParseInt의 두 번째 인자로는 진수를 전달할 수 있습니다. 해당 진법으로 인식하여 10진수 숫자로 변환합니다.
console.log(`parseInt('hello') : ${parseInt('hello')}`);
console.log(`parseInt('30b') : ${parseInt('30b')}`);
console.log(`parseFloat('45.4') : ${parseFloat('45.4')}`);
console.log(`parseInt('45.4') : ${parseInt('45.4')}`);
console.log(`parseInt('110', 2) : ${parseInt('110', 2)}`); // 6 (2진수 110을 10진수로 변환)
console.log(`parseInt('110', 8) : ${parseInt('110', 8)}`); // 72 (8진수 110을 10진수로 변환)
2.2 toString()
이 메소드는 숫자를 문자열로 변환합니다. 원하는 진수로 표현할 수도 있습니다.
let num = 5;
console.log(typeof num.toString());
console.log((3).toString());
console.log((3).toString(2)); // 2진수로 변환
3.toString()은 왜 에러가 발생할까요? 자바스크립트 엔진은 숫자 뒤의 점을 소수점으로 인식하기 때문입니다. 따라서 (3).toString()처럼 소괄호를 사용해 숫자를 감싸주어야 합니다.
2.3 isNaN()
이 함수는 값이 NaN인지 확인합니다. Number.isNaN()이 좀 더 나중에 나온 메소드로, isNaN()보다 더 정확하게 NaN을 판별합니다. 실무에서는 Number.isNaN()을 사용하는 것을 권합니다. 다만 isNaN()도 여전히 사용되고 있으므로 알아두시는 것이 좋습니다.
console.log(`isNaN('5') : ${isNaN('5')}`);
// false (문자열 '5'는 숫자로 변환 가능)
console.log(`isNaN(3) : ${isNaN(3)}`);
// false (숫자 3은 숫자)
console.log(`isNaN('b3') : ${isNaN('b3')}`);
// true (문자열 'b3'는 숫자로 변환 불가)
console.log(`isNaN('3b') : ${isNaN('3b')}`);
// true (문자열 '3b'는 숫자로 변환 불가)
console.log(isNaN(undefined));
// true (undefined는 숫자로 변환 불가)
console.log(Number.isNaN(undefined));
// false (undefined는 NaN이 아님)
console.log(Number.isNaN(null));
// false (null은 NaN이 아님)
console.log(Number.isNaN(NaN));
// true (NaN은 NaN)
2.4 Math 내장 객체
자바스크립트의 Math 객체는 수학적 연산을 위한 다양한 메소드를 제공합니다. 각 메소드는 특정한 수학적 기능을 수행합니다.
console.log(`Math.PI : ${Math.PI}`);
// 3.141592653589793 (원주율)
console.log(`Math.round(4.7) : ${Math.round(4.7)}`);
// 5 (반올림, 4.7을 반올림하여 5로 반환)
console.log(`Math.ceil(4.3) : ${Math.ceil(4.3)}`);
// 5 (올림, 4.3을 올림하여 5로 반환)
console.log(`Math.floor(4.7) : ${Math.floor(4.7)}`);
// 4 (내림, 4.7을 내림하여 4로 반환)
console.log(`Math.pow(2, 8) : ${Math.pow(2, 8)}`);
// 256 (2의 8승)
console.log(`Math.sqrt(64) : ${Math.sqrt(64)}`);
// 8 (64의 제곱근)
console.log(`Math.abs(-5) : ${Math.abs(-5)}`);
// 5 (절대값, -5의 절대값은 5)
console.log(`Math.random() : ${Math.random()}`);
// 0과 1 사이의 랜덤 숫자 반환
console.log(Math.max(10, 20, 30, 40, 50)); // 50 (최댓값 반환)
console.log(Math.min(10, 20, 30, 40, 50)); // 10 (최소값 반환)