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>

• 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'));

• 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'));

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

READING TIPS

• Number object@Mozilla (opens new window)
• Number object@W3Schools (opens new window)

Exercises

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