# Number object

# Frequently used methods

method	description
`toFixed(<digits>)` (opens new window)	formats a number as a string using fixed-point notation (with `<digits>` the number of digits after the decimal point)
`Number.isInteger(<value>)` (opens new window) *	returns `true` if the passed `<value>` is an integer, and `false` if not
`parseInt(<str>)` (opens new window) **	converts the numeric string `<str>` to an integer
`parseFloat(<str>)` (opens new window) **	converts the numeric string `<str>` to a floating point number

* This method is a so-called static method and should be preceded by Number.
** These methods are also static methods (and can be called as e.g. Number.parseInt(<str>)), but they also exist as global functions (and can be called as e.g. parseInt(<str>))

TIP

Instead of using parseInt() and parseFloat(), you can also place a + sign just before the numeric string
- const a = +'5.5' is the same as const a = parseFloat('5.5')
- const b = +'7' is the same as const b = parseInt('7')

# Parse numeric input fields

Numeric input fields ALWAYS return a numeric STRING and not a number
- One of the most common errors with forms is adding two numeric strings (stemming from numeric input fields)
Open es6/numbers/parse.html and es6/numbers/parse.js

<div class="border-gray">
    <input type="number" name="nr1" id="nr1" step=".5" value="5.5" /> +
    <input type="number" name="nr2" id="nr2" step=".5" value="7" /> =
    <span id="sum"></span>
</div>
 
        Copied!

1
2
3
4
5

Line 3 to 4: get the values from both input fields
Line 5: is a concatenation of two numeric strings

document.querySelectorAll('[type=number]').forEach(function (input) {
    input.addEventListener('blur', function (e) {
        const nr1 = document.getElementById('nr1').value;
        const nr2 = document.getElementById('nr2').value;
        const sum = nr1 + nr2;
        document.getElementById('sum').textContent = sum;
    });
});

// dispatch (trigger) change event
document.getElementById('nr1').dispatchEvent(new Event('blur'));
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11

Faulty sum

Line 3 and 4: wrap both values inside parseFloat() or add a + sign in front of them
- const nr1 = parseFloat(document.getElementById('nr1').value); or
- const nr1 = +document.getElementById('nr1').value
Line 5: is now the sum of two numbers

document.querySelectorAll('[type=number]').forEach(function (input) {
    input.addEventListener('blur', function (e) {
        const nr1 = +document.getElementById('nr1').value;
        const nr2 = +document.getElementById('nr2').value;
        const sum = nr1 + nr2;
        document.getElementById('sum').textContent = sum;
    });
});

// dispatch (trigger) change event
document.getElementById('nr1').dispatchEvent(new Event('blur'));
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11

Faulty sum

REMARK

The problem/error situated above only occurs when adding numeric strings. If you multiply, subtract, ... number strings, JavaScript automatically takes care of the "parsing" itself:

const nr1 = '5';
const nr2 = '7';
const product = nr1 * nr2;
console.log('nr1 * nr2 =', product); //nr1 * nr2 = 35
console.log(typeof product); //number
 
        Copied!

1
2
3
4
5

READING TIPS

# Exercises

Open exercises/index.html and make the exercises under the tab ES6 > Number object