JavaScriptFundamentWaarden & types

typeof x ===number

Het ene getaltype van JavaScript, voor gehele getallen én kommagetallen.

Niveau beginner Duur 25 min Vereist Waarden & types — overzicht

Zo bewaart JavaScript een getal

Typ een getal

teken · 1 bit exponent · 11 bits mantisse · 52 bits

1/8

Wat is het

number is het primitieve type voor getallen. JavaScript kent geen apart type voor gehele getallen en kommagetallen: 42, -7, 3.14 en 1e6 zijn allemaal een number. Onder de motorkap is elk getal een 64-bits drijvendekommagetal volgens de standaard IEEE 754. Dat zie je hierboven: één bit voor het teken, elf voor de grootte, 52 voor de cijfers.

console.log(typeof 42); // 'number' console.log(typeof 3.14); // 'number' console.log(typeof NaN); // 'number' (ja, echt)

Naast gewone getallen kent number drie speciale waarden: Infinity, -Infinity en NaN (Not a Number, de uitkomst van een berekening die geen getal oplevert).

2/8

Waarom bestaat het

Elk programma rekent: prijzen, afstanden, tellers, percentages. JavaScript is ontworpen als eenvoudige taal voor de browser, en koos daarom voor één getaltype in plaats van een rij types (int, long, float, double) waartussen je moet kiezen en omzetten. Dat maakt beginnen makkelijk: je schrijft een getal en rekent ermee.

De prijs van die eenvoud is dat elk getal een benadering in binaire vorm is. Gehele getallen tot 2⁵³ − 1 zijn exact; veel kommagetallen, zoals 0.1, zijn dat niet. Wie dat weet, kan ermee omgaan. Wie het niet weet, krijgt rare bugs.

3/8

Hoe pas je het toe

Getallen schrijven

const leeftijd = 34; const temperatuur = -2.5; const bevolking = 17_900_000; // underscores voor leesbaarheid const klein = 2.5e-3; // 0.0025 const rood = 0xff; // 255, hexadecimaal console.log(bevolking, klein, rood);

Tekst omzetten naar een getal

Invoer uit formulieren, URL's en bestanden is altijd tekst. Zet die bewust om.

console.log(Number('42')); // 42 streng: de hele tekst moet een getal zijn console.log(Number('12px')); // NaN console.log(parseInt('12px', 10)); // 12 leest tot het eerste teken dat geen cijfer is console.log(parseFloat('3.75')); // 3.75

Gebruik Number() als de invoer een getal hoort te zijn, en parseInt/parseFloat alleen als je bewust een getal vóór in een tekst wilt lezen. Geef parseInt altijd het grondtal (10) mee.

Controleren wat je hebt

const x = 0.5; console.log(Number.isNaN(x)); // is x precies NaN? console.log(Number.isFinite(x)); // een echt, eindig getal? console.log(Number.isInteger(x)); // een geheel getal? console.log(Number.isSafeInteger(x)); // geheel én exact te representeren?

Afronden en tonen

console.log(Math.round(2.5)); // 3 console.log(Math.floor(2.9)); // 2 console.log(Math.trunc(-2.9)); // -2 console.log((19.5).toFixed(2)); // '19.50' let op: een string const euro = new Intl.NumberFormat('nl-NL', { style: 'currency', currency: 'EUR' }); console.log(euro.format(1234.5)); // '€ 1.234,50'

4/8

Casuïstiek

Vier situaties uit de praktijk. Elke casus begint met de code die je als eerste zou schrijven, laat zien waarom die misgaat, en lost het op. Alle code kun je aanpassen en uitvoeren.

Casus 1Twee formuliervelden optellen

Situatie

Een bestelformulier heeft de velden aantal volwassenen en aantal kinderen. Je wilt het totaal tonen.

Eerste aanpak

const volwassenen = { value: '2' }; // zo geeft een invoerveld zijn waarde const kinderen = { value: '3' }; const totaal = volwassenen.value + kinderen.value; console.log(totaal); // '23'

Waarom het misgaat

.value is altijd een string. Met + plakt JavaScript strings aan elkaar in plaats van op te tellen.

Oplossing

Waarom dit werkt

Je zet de tekst bewust om en controleert de uitkomst. Let op: een Nederlandse gebruiker typt 3,5, en Number('3,5') is NaN. Bij kommagetallen vervang je eerst de komma, of je gebruikt <input type="number"> en valueAsNumber.

Casus 2Bedragen optellen in een winkelwagen

Situatie

Een winkelwagen bevat een product van € 19,99 en een toeslag van € 0,07. Je rekent het totaal uit en slaat het op in centen.

Eerste aanpak

const totaal = 19.99 + 0.07; console.log(totaal); // 20.06 console.log(totaal * 100); // 2005.9999999999998 console.log(0.1 + 0.2 === 0.3); // false

Waarom het misgaat

0.1, 19.99 en 0.07 hebben geen exacte binaire vorm, net zoals ⅓ geen exacte decimale vorm heeft (0,333…). Typ 19.99 in de bitweergave bovenaan en je ziet wat er werkelijk bewaard wordt. De kleine afwijkingen stapelen op en worden zichtbaar bij vergelijken, vermenigvuldigen of afronden.

Oplossing

Reken met geld in hele centen: gehele getallen zijn exact.

const prijsInCenten = 1999; const toeslagInCenten = 7; const totaalInCenten = prijsInCenten + toeslagInCenten; console.log(totaalInCenten); // 2006, exact

Waarom dit werkt

Tot 2⁵³ − 1 is elk geheel getal exact. Je rondt maar één keer af: bij het omzetten van invoer naar centen (Math.round(Number(invoer) * 100)). Pas bij het tonen deel je weer door 100.

Casus 3Een percentage voor een voortgangsbalk

Situatie

Een takenlijst toont "3 van 8 klaar" met een balk die zich vult.

Eerste aanpak

const klaar = 0; const totaal = 0; // een lege lijst const procent = (klaar / totaal) * 100; console.log(procent + '%'); // 'NaN%'

Waarom het misgaat

Bij een lege lijst is het 0 / 0, en dat is NaN. De CSS-waarde wordt 'NaN%' en de balk verdwijnt zonder foutmelding. Delen door nul geeft in JavaScript geen fout maar Infinity of NaN, die stil verder rekenen.

Oplossing

const klaar = 0; const totaal = 0; const procent = totaal === 0 ? 0 : Math.round((klaar / totaal) * 100); console.log(procent + '%'); // '0%'

Waarom dit werkt

Je vangt het randgeval af vóórdat de rekensom het kan opleveren. Algemeen: deel je door iets wat nul kan zijn, beslis dan zelf wat de uitkomst moet zijn.

Casus 4Een bedrag tonen aan Nederlandse gebruikers

Situatie

Je wilt 1234.5 tonen als bedrag.

Eerste aanpak

const bedrag = 1234.5; console.log('€' + bedrag.toFixed(2)); // '€1234.50' console.log((1.005).toFixed(2)); // '1.00'

Waarom het misgaat

Een punt als decimaalteken en geen scheiding bij duizendtallen: dat leest een Nederlander verkeerd. Bovendien rondt toFixed soms onverwacht af, want 1.005 is in werkelijkheid 1,00499999…

Oplossing

const euro = new Intl.NumberFormat('nl-NL', { style: 'currency', currency: 'EUR' }); console.log(euro.format(1234.5)); // '€ 1.234,50'

Waarom dit werkt

Intl.NumberFormat kent de notatie per taal en land. Je rekent met getallen, en formatteert pas op het laatste moment, voor de mens.

5/8

Wanneer juist niet

Niet alles wat op een getal lijkt, hoort een number te zijn.

Grote gehele getallenBoven 9.007.199.254.740.991 (Number.MAX_SAFE_INTEGER), zoals ID's uit een database of cryptografie. Als number wordt 9007199254740993 stil 9007199254740992.Gebruik bigint: 9007199254740993n
Codes die op getallen lijkenPostcodes, telefoonnummers, IBAN's, ordernummers met een voorloopnul. Daar reken je niet mee. Number('0612345678') is 612345678: de nul is weg.Gebruik string
Exact decimaal rekenenBuiten centen, zoals rente met veel decimalen of valutakoersen.Gebruik een decimal-library, of reken in de kleinste eenheid

6/8

Valkuilen

Klik op voer uit om de uitkomst in je eigen browser te zien.

Code	Uitkomst	Waarom

7/8

Samenhang

Vereist

overzichtWaarden & types

Verwant

bigintgrote gehele getallen
stringde omzetting
vergelijken== vs ===

Hierna

MathData
Intl voor getallenData

8/8

Toets

Twaalf vragen over alle onderdelen van deze pagina. Bij elke vraag staat over welk onderdeel hij gaat. Je haalt de toets met minimaal tien goed, en dan beheers je number. Pas na het inleveren zie je wat goed was.

Prototype van een conceptpagina. De bron is content/javascript/01-fundament/01-waarden-en-types/number/; code draait in een afgeschermde worker in je browser. Je voortgang blijft alleen in deze browser bewaard.