Playing with JS #1: Numbers
Tags: javascript, webdev, beginners, programming
Published: 2021-12-15 18:33:26

 In this article you will learn about numbers. But what is a number in JavaScript?

## Number
The [primitive wrapper object](https://developer.mozilla.org/en-US/docs/Glossary/Primitive#primitive_wrapper_objects_in_javascript) `Number` is used to represent numbers like 42 or -18.

The number type in JavaScript is represented as a 64-bit floating point (same as Java's Double). There is no separate integer type, so `1` and `1.0` are the same value.

It's practical but it can reveal some strange things.

### The basics
Let's play with that primitive wrapper.

```javascript
Number(0) // 0
Number('12') // 12
Number(true) // 1
Number('hello') // NaN (not a number)
Number() // 0
Number(undefined) // NaN
```

As you can see, some results can be disturbing. Passing nothing to the constructor works but `undefined` returns `NaN`. 

This is only the beginning! Let's play with some arithmetic operations.

### The weirdos
```javascript
true + true // 2
0.1 + 0.2 // 0.30000000000000004
10000000000000000 + 1 // 10000000000000000
```

Let's dig a bit into those weird results.

- `true + true` equals `2` because `Number(true)` is `1`.
- `0.1 + 0.2` equals `0.30000000000000004` because JavaScript follows a 64-bit floating point representation for numbers. With decimal fractions, this floating-point number system causes some rounding errors in JavaScript. [Learn more about that](https://gauravkk22.medium.com/why-0-1-0-2-0-3-is-false-in-js-mystery-unsolved-with-solution-4f7db2755f18)
- `10000000000000000 + 1` equals `10000000000000000` because we are above the precision limit of double-precision floating-point so it is rounded to the nearest double-precision value.

### The cool (and useful) things
#### Get timestamp from a datetime
```javascript
Number(new Date()) // Timestamp of current datetime
```

#### Make numbers more readable
```javascript
Number(1000000000).toLocaleString('en-US') // '1,000,000,000'
Number(1000000000).toLocaleString('fr-FR') // '1 000 000 000'
Number(1000000000).toLocaleString(navigator.language)
```

### The theory
#### Properties
- `Number.EPSILON` is the smallest interval between two representable numbers
- `Number.MAX_SAFE_INTEGER and Number.MIN_SAFE_INTEGER` are the maximum and minimum safe integer
- `Number.MIN_VALUE and Number.MAX_VALUE` are the smallest and largest positive representable number
- `Number.NaN` is a value used to represent something that is not a number.
- `Number.NEGATIVE_INFINITY and Number.POSITIVE_INFINITY` - Values representing negative and positive infinity


#### Methods
- `Number.isNaN(value)` returns `true` if the value is not a number
- `Number.isFinite(value)` returns `true` if the value is finite
- `Number.isInteger(value)` returns `true` if the value is an integer
- `Number.isSafeInteger(value)` returns `true` if the value is a safe integer (number between -(2^53 - 1) and 2^53 - 1)
- `Number.parseFloat(value)` parses the value and returns a floating point number. If a number cannot be parsed from the argument, it returns `NaN`
- `Number.parseInt(value, [radix])` parses a string argument and returns an integer of the specified radix or base.

#### Instance methods
- `Number().toExponential(digits)` returns a string representing the number in exponential notation
- `Number().toFixedPoint(digits)` returns a string representing the number in fixed-point notation
- `Number().toLocaleString([locales], [, options])` returns a string with a language sensitive representation of this number
- `Number().toPrecision(precision)` returns a string representing the number to a specified precision in fixed-point or exponential notation
- `Number().toString(radix)` returns a string representing the specified object in the specified radix
- `Number().valueOf()` returns the primitive value of the specified object

## The sources

- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
- https://medium.com/@surender.neelakantan/funny-javascript-7-little-questions-8af0b4ca25a2
- https://github.com/denysdovhan/wtfjs
- https://www.oreilly.com/library/view/javascript-the-good/9780596517748/
- https://gauravkk22.medium.com/why-0-1-0-2-0-3-is-false-in-js-mystery-unsolved-with-solution-4f7db2755f18