Post

[모던 자바스크립트 Deep Dive]28장 Number

Posted
By your_full_name 13 min read

28.1 Number 생성자 함수

  • Number 객체
    • 표준 빌트인 객체
    • 생성자 함수 객체
    • new 연산자와 함께 호출하여 Number 인스턴스 생성 가능
  • Number 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하는 경우
    • [[NumberData]] 내부 슬롯에 0을 할당한 Number 래퍼 객체 생성
    1
2
3

      const numObj = new Number();
  console.log(numObj); // Number {[[PrimitiveValue]]: 0}
  // ES5에서는 [[NumberData]]를 [[PrimitiveValue]]라 불렀다.
  • Number 생성자 함수에 인수로 숫자를 전달하면서 new 연산자와 함께 호출하는 경우
    • [[NumberData]] 내부 슬롯에 전달받은 숫자를 할당한 Number 래퍼 객체 생성
    1
2

      const numObj = new Number(10);
  console.log(numObj); // Number {[[PrimitiveValue]]: 10}
  • Number 생성자 함수에 인수로 숫자가 아닌 값을 전달하면서 new 연산자와 함께 호출하는 경우
    • [[NumberData]] 내부 슬롯에 변환된 숫자를 할당한 Number 래퍼 객체 생성
    • 인수를 숫자로 변환할 수 없는 경우 ⇒ NaN 할당
    1
2
3
4
5

      let numObj = new Number('10');
  console.log(numObj); // Number {[[PrimitiveValue]]: 10}
    
  numObj = new Number('Hello');
  console.log(numObj); // Number {[[PrimitiveValue]]: NaN}
  • new 연산자를 사용하지 않고 Number 생성자 함수를 호출하는 경우
    • Number 인스턴스가 아닌 숫자 반환
    • 이를 이용해 명시적 타입 변환 가능
    1
2
3
4
5
6
7
8

      // 문자열 타입 => 숫자 타입
  Number('0');     // -> 0
  Number('-1');    // -> -1
  Number('10.53'); // -> 10.53
    
  // 불리언 타입 => 숫자 타입
  Number(true);  // -> 1
  Number(false); // -> 0

28.2 Number 프로퍼티

28.2.1 Number.EPSILON

  • ES6에서 도입
  • 1과 1보다 큰 숫자 중에서 가장 작은 숫자와의 차이

  • 부동소수점으로 인해 발생하는 오차 해결을 위해 사용

    1
2
3
4
5
6
7
8
9

      0.1 + 0.2;         // -> 0.30000000000000004
  0.1 + 0.2 === 0.3; // -> false
    
  function isEqual(a, b){
    // a와 b를 뺀 값의 절대값이 Number.EPSILON보다 작으면 같은 수로 인정한다.
    return Math.abs(a - b) < Number.EPSILON;
  }
    
  isEqual(0.1 + 0.2, 0.3); // -> true

28.2.2 Number.MAX_VALUE

  • 자바스크립트에서 표현할 수 있는 가장 큰 양수 값

    1

      Number.MAX_VALUE; // -> 1.7976931348623157e+308

  • Infinity는 Number.MAX_VALUE보다 크다.

    1

      Infinity > Number.MAX_VALUE; // -> true

28.2.3 Number.MIN_VALUE

  • 자바스크립트에서 표현할 수 있는 가장 작은 양수 값

    1

      Number.MIN_VALUE; // -> 5e-324

  • 0은 Number.MAX_VALUE보다 크다.

    1

      Number.MIN_VALUE > 0; // -> true

28.2.4 Number.MAX_SAFE_INTEGER

  • 자바스크립트에서 안전하게 표현할 수 있는 가장 큰 정수 값

    1

      Number.MAX_SAFE_INTEGER; // -> 9007199254740991

28.2.5 Number.MIN_SAFE_INTEGER

  • 자바스크립트에서 안전하게 표현할 수 있는 가장 작은 정수 값

    1

      Number.MIN_SAFE_INTEGER; // -> -9007199254740991

28.2.6 Number.POSITIVE_INFINITY

  • 양의 무한대를 나타내는 숫자 값 Infinity와 같다.

    1

      Number.POSITIVE_INFINITY; // -> Infinity

28.2.7 Number.NEGATIVE_INFINITY

  • 음의 무한대를 나타내는 숫자 값 -Infinity와 같다.

    1

      Number.NEGATIVE_INFINITY; // -> -Infinity

28.2.8 Number.NaN

  • 숫자가 아님을 나타내는 숫자 값

    1

      Number.NaN; // -> NaN

  • window.NaN과 같다.

28.3 Number 메서드

28.3.1 Number.isFinite

  • ES6에서 도입된 정적 메서드
  • 인수로 전달된 숫자 값이 정상적인 유한수인지 검사하여 결과를 불리언 값으로 반환
    • 정상적인 유한수: Infinity 또는 -Infinity
    1
2
3
4
5
6
7
8

      // 인수가 정상적인 유한수이면 true를 반환한다.
  Number.isFinite(0);                // -> true
  Number.isFinite(Number.MAX_VALUE); // -> true
  Number.isFinite(Number.MIN_VALUE); // -> true
    
  // 인수가 무한수이면 false를 반환한다.
  Number.isFinite(Infinity);  // -> false
  Number.isFinite(-Infinity); // -> false

  • 인수가 NaN인 경우 언제나 false 반환

    1

      Number.isFinite(NaN); // -> false

  • 빌트인 전역 함수 isFinite와의 차이점

    1
2
3
4
5

      // Number.isFinite는 인수를 숫자로 암묵적 타입 변환하지 않는다.
  Number.isFinite(null); // -> false
    
  // isFinite는 인수를 숫자로 암묵적 타입 변환한다. null은 0으로 암묵적 타입 변환된다.
  isFinite(null); // -> true
    • 빌트인 전역 함수 isFinite는 전달받은 인수를 숫자로 암묵적 타입 변환
    • Number.isFinite는 암묵적 타입 변환을 하지 않음
    • 따라서, 숫자가 아닌 인수가 주어지면 Number.isFinite는 언제나 false 반환

28.3.2 Number.isInteger

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 인수가 정수이면 true를 반환한다.
Number.isInteger(0)     // -> true
Number.isInteger(123)   // -> true
Number.isInteger(-123)  // -> true

// 0.5는 정수가 아니다.
Number.isInteger(0.5)   // -> false
// '123'을 숫자로 암묵적 타입 변환하지 않는다.
Number.isInteger('123') // -> false
// false를 숫자로 암묵적 타입 변환하지 않는다.
Number.isInteger(false) // -> false
// Infinity/-Infinity는 정수가 아니다.
Number.isInteger(Infinity)  // -> false
Number.isInteger(-Infinity) // -> false
  • ES6에서 도입된 정적 메서드
  • 인수로 전달된 숫자 값이 정수인지 검사하여 결과를 불리언 값으로 반환
  • 인수를 숫자로 암묵적 타입 변환하지 않음

28.3.3 Number.isNaN

  • ES6에서 도입된 정적 메서드

  • 인수로 전달된 숫자 값이 NaN인지 검사하여 결과를 불리언 값으로 반환

    1
2

      // 인수가 NaN이면 true를 반환한다.
  Number.isNaN(NaN); // -> true

  • 빌트인 전역 함수 isNaN와의 차이점

    1
2
3
4
5
6

      // Number.isNaN은 인수를 숫자로 암묵적 타입 변환하지 않는다.
  Number.isNaN(undefined); // -> false
    
  // isFinite는 인수를 숫자로 암묵적 타입 변환한다. 
  // undefined는 NaN으로 암묵적 타입 변환된다.
  isNaN(undefined); // -> true
    • 빌트인 전역 함수 isNaN는 전달받은 인수를 숫자로 암묵적 타입 변환
    • Number.isNaN는 암묵적 타입 변환을 하지 않음
    • 따라서, 숫자가 아닌 인수가 주어지면 Number.isNaN는 언제나 false 반환

28.3.4 Number.isSafeInteger

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 0은 안전한 정수이다.
Number.isSafeInteger(0); // -> true
// 1000000000000000은 안전한 정수이다.
Number.isSafeInteger(1000000000000000); // -> true
// 10000000000000001은 안전하지 않다.
Number.isSafeInteger(10000000000000001); // -> false
// 0.5은 정수가 아니다.
Number.isSafeInteger(0.5); // -> false
// '123'을 숫자로 암묵적 타입 변환하지 않는다.
Number.isSafeInteger('123'); // -> false
// false를 숫자로 암묵적 타입 변환하지 않는다.
Number.isSafeInteger(false); // -> false
// Infinity/-Infinity는 정수가 아니다.
Number.isSafeInteger(Infinity); // -> false
  • ES6에서 도입된 정적 메서드
  • 인수로 전달된 숫자 값이 안전한 정수인지 검사하여 결과를 불리언 값으로 반환
    • 안전한 정수는 -(2⁵³-1)과 2⁵³-1 사이의 정수값
  • 인수를 숫자로 암묵적 타입 변환하지 않음

28.3.5 Number.prototype.toExponential

  • 숫자를 지수 표기법으로 변환하여 문자열로 반환하는 메서드
    • 소수점 이하로 표현할 자리수를 인수로 전달 가능
    1
2
3

      (77.1234).toExponential();  // -> "7.71234e+1"
  (77.1234).toExponential(4); // -> "7.7123e+1"
  (77.1234).toExponential(2); // -> "7.71e+1"

숫자 리터럴과 함께 Number 프로토타입 메서드를 사용하는 경우

  • 권장되지 않는 사용 방법
    • 자바스크립트 엔진이 숫자 뒤의 .을 부동 소수점 숫자의 소수 구분 기호로 해석하는 경우
      • SyntaxError 발생
      1

        77.toExponential(); // -> SyntaxError: Invalid or unexpected token

    • 숫자 뒤의 .을 올바르게 프로퍼티 접근 연산자로 해석하는 경우

      1

        77.1234.toExponential(); // -> "7.71234e+1"
  • 권장되는 사용 방법

    • 그룹 연산자를 사용

      1

        (77).toExponential(); // -> "7.7e+1"

    • 숫자 뒤에 공백을 추가

      • 자바스크립트 숫자는 정수 부분과 소수 부분 사이에 공백을 포함할 수 없기 때문
      1

        77 .toExponential(); // -> "7.7e+1"

28.3.6 Number.prototype.toFixed

1
2
3
4
5
6
7
8

// 소수점 이하 반올림. 인수를 생략하면 기본값 0이 지정된다.
(12345.6789).toFixed(); // -> "12346"
// 소수점 이하 1자리수 유효, 나머지 반올림
(12345.6789).toFixed(1); // -> "12345.7"
// 소수점 이하 2자리수 유효, 나머지 반올림
(12345.6789).toFixed(2); // -> "12345.68"
// 소수점 이하 3자리수 유효, 나머지 반올림
(12345.6789).toFixed(3); // -> "12345.679"
  • 숫자를 반올림하여 문자열로 반환
  • 반올림하는 소수점 이하 자리수를 나타내는 정수값을 인수로 전달 가능
    • 전달될 수 있는 정수는 0~20 사이의 값
    • 인수 생략 시 기본값 0을 지정

28.3.7 Number.prototype.toPrecision

1
2
3
4
5
6
7
8

// 전체 자리수 유효. 인수를 전달하지 않으면 기본값 0이 전달된다.
(12345.6789).toPrecision(); // -> "12345.6789"
// 전체 1자리수 유효, 나머지 반올림
(12345.6789).toPrecision(1); // -> "1e+4"
// 전체 2자리수 유효, 나머지 반올림
(12345.6789).toPrecision(2); // -> "1.2e+4"
// 전체 6자리수 유효, 나머지 반올림
(12345.6789).toPrecision(6); // -> "12345.7"
  • 인수로 전달받은 전체 자릿수까지 유효하도록 나머지 자릿수를 반올림하여 문자열로 반환
    • 전달될 수 있는 값은 0~21 사이의 정수값
    • 인수 생략 시 기본값 0을 지정
  • 인수로 전달받은 전체 자릿수로 표현할 수 없는 경우 지수 표기법으로 결과 반환

28.3.8 Number.prototype.toString

1
2
3
4
5
6
7
8

// 인수를 생략하면 10진수 문자열을 반환한다.
(10).toString(); // -> "10"
// 2진수 문자열을 반환한다.
(16).toString(2); // -> "10000"
// 8진수 문자열을 반환한다.
(16).toString(8); // -> "20"
// 16진수 문자열을 반환한다.
(16).toString(16); // -> "10"
  • 숫자를 문자열로 변환하여 반환
  • 진법을 나타내는 2~36 사이의 정수값을 인수로 전달 가능
    • 인수 생략 시 기본값 10을 지정
book_notes
모던 자바스크립트 Deep Dive
This post is licensed under CC BY 4.0 by the author.