Werken met variabelen en gegevenstypen in JavaScript

HTML geeft een pagina structuur, CSS bepaalt het uiterlijk en JavaScript voegt gedrag toe. De JavaScript-engine van een browser voert de instructies in een script uit. Tenzij een beslissing het uitvoeringspad verandert, worden die instructies van boven naar beneden uitgevoerd.

Plaats code in de pagina of in een apart bestand

Een inlinescript bevat JavaScript tussen een openings- en sluitingstag:

<script>
  console.log("Hello from the page");
</script>

Een extern script bewaart de JavaScript in een apart .js-bestand. Deze HTML laadt het bestand:

<script src="js/app.js"></script>

Het externe bestand bevat console.log("Hello from the page"); zonder <script>-tags. Door de bestanden te scheiden blijft de HTML leesbaar, kunnen meerdere pagina's code delen en kan de browser het script in de cache bewaren. Als src aanwezig is, wordt code binnen hetzelfde element genegeerd. Gebruik één aanpak per element en schrijf altijd de sluitingstag </script>: een zelfsluitende <script ... /> sluit het element niet in HTML.

Kies wanneer het script wordt uitgevoerd

Een klassiek script zonder laadattribuut stopt het ontleden van de HTML terwijl de browser het script laadt en uitvoert. In <head> wordt het uitgevoerd voordat de latere inhoud van de body is opgebouwd. Als je het vlak voor </body> plaatst, komt de pagina-inhoud ervoor.

Voor een extern klassiek script in <head> is defer een bruikbare standaardkeuze:

<script src="js/app.js" defer></script>

De browser downloadt het script terwijl hij de HTML blijft ontleden. Het script wordt uitgevoerd nadat het ontleden is voltooid. Meerdere uitgestelde scripts worden in hun HTML-volgorde uitgevoerd, zodat een tweede script waarden kan gebruiken die door het eerste zijn ingesteld.

Gebruik async voor onafhankelijke code die niet afhangt van een volledig opgebouwde pagina of een ander script. defer toevoegen aan een klassiek inlinescript heeft geen effect.

Laad een module

<script type="module" src="js/main.js"></script>

Een module wordt standaard uitgesteld uitgevoerd en draait in strikte modus. Een module kan code delen via import en export. Om modules in Chrome of Firefox te laden, maak je het project beschikbaar via een lokale ontwikkelserver, zoals de live-serverfunctie van een editor. Als je de pagina opent op een file://-adres, gelden er beperkingen voor het laden van modules.

Controleer de koppeling

Stel dat index.html naast een map js staat die greet.js bevat. Zet console.log("Page ready"); in dat script en <script src="js/greet.js" defer></script> in de head van de HTML. Open de pagina en daarna de console: de melding is “Page ready”.

Het relatieve pad begint vanuit de map van het HTML-bestand. In deze indeling wijst src="greet.js" naar de verkeerde plaats. Een melding dat het bestand ontbreekt, betekent dat er op dat adres geen script is om uit te voeren. Als je de HTML-tags naar het JavaScript-bestand hebt gekopieerd, meldt de engine daarentegen een syntaxisfout bij de opmaak.

De browserconsole toont meldingen, fouten en de resultaten van code die je typt. Open de console voor de pagina die je test. Gebruik in Chrome of Edge Ctrl+Shift+J op Windows/Linux of Cmd+Option+J op Mac. Gebruik in Firefox Ctrl+Shift+K of Cmd+Option+K. Met F12 open je in Chrome en Edge de ontwikkelaarstools als geheel.

Instructies en expressies

Een expressie levert een waarde op: 4 + 5 levert 9 op. Een instructie geeft een opdracht, zoals die waarde opslaan of tonen:

let total = 4 + 5;
console.log("Total:", total);

De eerste regel wordt vóór de tweede uitgevoerd, die “Total: 9” toont. Een puntkomma sluit een instructie af. JavaScript kan veel weggelaten puntkomma's invoegen, maar regeleinden werken niet altijd als scheidingsteken. Sluit instructies af met puntkomma's om de bedoelde structuur duidelijk te maken.

Typ 2 + 3 in de console en druk op Enter om 5 te zien. Gebruik Shift+Enter voor een nieuwe regel zonder de invoer uit te voeren. Als je let x = 5; invoert, kan de console undefined tonen als resultaat van die instructie. Dat betekent niet dat x de waarde undefined bevat: als je daarna x invoert, verschijnt 5. Evenzo toont een aanroep van console.log() de melding en geeft de aanroep zelf undefined terug.

Namen en commentaar

JavaScript is hoofdlettergevoelig. console.log("Hi"); werkt, maar Console.log("Hi"); verwijst naar een andere naam en veroorzaakt een ReferenceError. console.Log("Hi"); vindt console, maar mislukt met een TypeError omdat er geen aanroepbare methode Log is.

Commentaar is voor lezers. De engine slaat het over:

// Keep the starting value for the next calculation.
let total = 4;
/* A comment can also
   continue on another line. */
console.log(total);

Door // vóór een instructie te plaatsen, schakel je die regel tijdelijk uit. Nuttig commentaar legt een reden uit die de code zelf niet duidelijk maakt.

Meldingen, waarschuwingen en experimenten

console.log("Total:", 9); toont de argumenten gescheiden door spaties. console.warn() markeert een waarschuwing; console.error() markeert een foutmelding. Uitvoer tonen met console.error() werpt op zichzelf geen uitzondering op. console.clear() maakt de weergave leeg.

Invoer in de console dient om te experimenteren en wordt niet als wijziging opgeslagen. Bij opnieuw laden worden de opgeslagen scripts van de pagina opnieuw uitgevoerd. Je kunt variabelen op het hoogste niveau van klassieke scripts in de console inspecteren; variabelen op het hoogste niveau van een module blijven binnen die module.

Eenvoudige dialoogvensters en strikte modus

alert("Saved!"); toont een melding. confirm("Continue?") geeft true terug bij OK en false bij Annuleren. prompt("Quantity?", "1") geeft de ingevoerde string terug, of null bij Annuleren. Als je 12 typt, krijg je "12", niet 12. Deze dialoogvensters onderbreken de interactie zolang ze openstaan.

Zet "use strict"; aan het begin van een klassiek script om bepaalde fouten te laten melden. Zo veroorzaakt totl = 5; zonder declaratie een ReferenceError in strikte modus; in een klassiek script zonder strikte modus kan dit onbedoeld een globale variabele maken. Een module gebruikt al strikte modus. Controleer de spelling en declareer namen voordat je er waarden aan toewijst.

Een variabele is een naam die naar een waarde verwijst. Je kunt de naam eerst declareren en de waarde later toewijzen, of beide in één instructie doen. De toewijzingsoperator = slaat de waarde rechts op onder de naam links.

Kies let of const

let score;
console.log(score); // undefined
score = 10;
score = score + 2;
console.log(score); // 12

let score; declareert de variabele. Totdat een toewijzing de variabele een andere waarde geeft, bevat die undefined. De volgende toewijzing slaat 10 op. In score = score + 2; leest JavaScript de oude score, telt er 2 bij op en slaat vervolgens 12 op. Dit is een bijwerkinstructie en hoeft dus als wiskundige vergelijking niet te kloppen. Bij hertoewijzing gebruik je de bestaande naam zonder opnieuw let te schrijven.

Een const-declaratie moet een beginwaarde bevatten:

const BOILING_POINT_C = 100;

De declaratie const rate; is een syntaxisfout omdat een initialisatie ontbreekt. Als je later een nieuwe waarde aan BOILING_POINT_C probeert toe te wijzen, veroorzaakt dat een TypeError.

Gebruik standaard const. Kies let voor een tussentotaal, een teller of een resultaat dat latere instructies zullen toewijzen. Ook voor een waarde die uit andere waarden wordt berekend, kun je const gebruiken als het programma nooit opnieuw een waarde aan die naam toewijst.

Geef de naam een duidelijke betekenis

Namen mogen letters, cijfers, _ en $ bevatten; ze mogen niet met een cijfer beginnen. place1 is geldig, maar 1stPlace niet. Spaties zijn verboden en een koppelteken wordt gelezen als een aftrekking, dus total-price is niet de naam van één variabele. Gereserveerde woorden zoals if, return en class kunnen geen variabelenamen zijn.

Gebruik camelCase voor gewone namen: itemCount, firstName of priceWithTax. Booleaanse namen zoals isLoggedIn en hasDiscount beschrijven een ja-neewaarde. Vermeld eenheden als ze verwarring voorkomen: distanceKm en durationMin. Voor vaste waarden die bekend zijn voordat het programma wordt uitgevoerd, wordt vaak UPPER_SNAKE_CASE gebruikt, zoals MAX_LOGIN_ATTEMPTS. Hoofdletters en kleine letters maken verschil: total en Total zijn verschillende namen.

Werk een tussentotaal uit

const TAX_RATE = 0.2;
let total = 0;
total = total + 12.5;
total = total + 7.5;
const totalWithTax = total * (1 + TAX_RATE);
console.log(totalWithTax); // 24

Het totaal begint bij 0, wordt 12.5 en daarna 20. De vermenigvuldigingsfactor 1 + TAX_RATE is 1.2, dus het eindbedrag is 24. Alleen aan total hoeft opnieuw een waarde te worden toegewezen. Het belastingtarief en het berekende eindbedrag gebruiken const.

Als je let total = 7.5; een tweede keer binnen hetzelfde bereik schrijft, probeer je een tweede variabele te declareren in plaats van de eerste bij te werken. Gebruik total = 7.5; om de waarde te vervangen.

Herken oudere declaraties

Oudere code gebruikt vaak var. Dat werkt nog steeds, maar de variabelen horen bij een functie of script in plaats van bij een gewoon genest blok. Herhaalde declaraties zijn toegestaan en lezen vóór de declaratie levert undefined op. Het moderne let en const signaleren deze fouten. Houd hun regels in gedachten wanneer je een oudere handleiding leest die var gebruikt.

Een blok is de code tussen accolades, zoals de inhoud van een if. Het bereik van een variabele is het gebied waar de naam naar die variabele verwijst. Zowel let als const heeft blokbereik, inclusief eventuele geneste blokken binnen het blok waarin de variabele is gedeclareerd.

Bewaar een resultaat waar het nodig is

const temperatureC = 31;
let label;
if (temperatureC > 30) {
  label = "hot";
} else {
  label = "mild";
}
console.log(label); // hot

label is buiten de takken gedeclareerd, zodat de laatste regel de variabele kan lezen. Elke tak wijst een waarde toe aan de bestaande variabele. Als je in plaats daarvan const label = "hot"; binnen de eerste tak declareert, kun je die variabele na het blok niet lezen. Als er geen andere label binnen het bereik is, veroorzaakt de laatste lezing een ReferenceError.

Een declaratie op het hoogste niveau van een klassiek script heeft globaal bereik: latere code in dat script en de andere klassieke scripts van de pagina kunnen de variabele gebruiken. In een module horen variabelen op het hoogste niveau bij die module. Bewaar een variabele in het kleinste bereik dat die nodig heeft om naamconflicten te beperken.

Onderscheid overschaduwing van hertoewijzing

let x = 1;
{
  let x = 2;
  console.log(x); // 2
}
console.log(x); // 1

De binnenste declaratie maakt een afzonderlijke variabele. Dit is overschaduwing: binnen het binnenste blok verwijst x naar de binnenste variabele. De buitenste variabele blijft 1. Als je de binnenste let zou weghalen, zou je in plaats daarvan 2 aan de buitenste variabele toewijzen. Verschillende namen maken dit verschil gemakkelijker leesbaar.

Lees vóór initialisatie

Een binding met blokbereik bestrijkt het hele blok, maar je kunt die pas gebruiken zodra de declaratie de binding initialiseert. Het gebied vóór de initialisatie is de tijdelijke dode zone:

console.log(price);
let price = 5;

Dit veroorzaakt ReferenceError: Cannot access 'price' before initialization. De naam bestaat binnen het bereik, maar is niet klaar voor gebruik. Ter vergelijking: price is not defined betekent dat daar geen binding met die naam kan worden gevonden. Een binnenste declaratie overschaduwt een buitenste naam ook vóór de binnenste declaratieregel; de buitenste waarde kan de tijdelijke dode zone van de binnenste variabele niet omzeilen.

Koppel elke fout aan een oplossing

Syntaxisfouten verhinderen dat het script start. Een uitvoeringsfout stopt de huidige uitvoering zodra die de instructie bereikt die de fout veroorzaakt. Chrome staat voor het gemak nog een let-declaratie toe in een afzonderlijke console-invoer; dat maakt dubbele declaraties in een script niet geldig.

Const legt de referentie vast

Primitieve waarden zoals getallen en strings kunnen niet ter plekke veranderen. De inhoud van een object kan veranderen, ook als de naam const gebruikt:

const settings = { theme: "dark" };
settings.theme = "light"; // allowed

De naam verwijst nog steeds naar hetzelfde object. Als je settings = {}; toewijst, probeer je die referentie te vervangen en ontstaat een TypeError.

De waarden 7, "7" en true hebben verschillende typen. Ze kunnen op vergelijkbare plaatsen op een pagina verschijnen, maar JavaScript past op elk daarvan andere regels toe. Een type beschrijft de waarde die een variabele op dat moment bevat, geen blijvende beperking van die variabele.

Begin met de drie belangrijkste typen

Een number stelt gehele en decimale getalswaarden voor: 42, -7 en 3.75 hebben allemaal hetzelfde type. Ook wetenschappelijke notatie is numeriek: 1e3 betekent 1000. Een string bevat tekst tussen aanhalingstekens, dus "42" is tekst, ook al zijn de tekens cijfers. Een boolean is precies true of false, zonder aanhalingstekens. Vergelijkingen leveren booleaanse waarden op die een programma kan gebruiken om beslissingen te nemen.

Gebruik typeof om een waarde te inspecteren. De operator geeft een string terug die het type noemt:

console.log(typeof 7);         // number
console.log(typeof "7");       // string
console.log(typeof true);      // boolean
console.log(typeof undefined); // undefined

Het commentaar toont de woorden die worden weergegeven; de resultaten zelf zijn strings zoals "number".

Herken ontbrekende waarden

let city;
let middleName = null;
console.log(city);       // undefined
console.log(middleName); // null

undefined betekent meestal dat JavaScript geen waarde heeft gekregen, zoals bij een niet-geïnitialiseerde let. null wordt meestal bewust toegewezen om “leeg” of “geen waarde” aan te geven. Test op een bewust lege waarde met middleName === null.

Gebruik typeof value === "object" niet om op null te testen. typeof null geeft "object" door historisch gedrag van de taal, ook al is null een primitieve waarde.

Ken de volledige lijst met typen

JavaScript heeft zeven primitieve typen: number, string, boolean, undefined, null, bigint en symbol. Het achtste type is object, dat voor gestructureerde waarden wordt gebruikt. Functies zijn objecten die kunnen worden aangeroepen, hoewel typeof daarvoor "function" meldt.

Een bigint is een geheel getal dat met een afsluitende n wordt geschreven, zoals 9007199254740993n. Het type ondersteunt grote exacte gehele getallen. Combineer een bigint en een number niet in een berekening: 1n + 2 veroorzaakt TypeError. Een symbol is een unieke identificatie; typeof Symbol("id") geeft "symbol". typeof 42n geeft "bigint".

NaN is een ander speciaal resultaat dat je moet herkennen: ondanks de naam, “geen getal”, is typeof NaN gelijk aan "number". Het is een getalswaarde die een ongeldig getalsresultaat aangeeft. De naam alleen duidt geen afzonderlijk type aan.

Volg een veranderende variabele

let data = 42;
console.log(typeof data); // number
data = "forty-two";
console.log(typeof data); // string

Dit is dynamische typering. Door hertoewijzing kan een string een getal vervangen. Door die flexibiliteit is het handig om bij een verrassend resultaat zowel de waarde als het type te tonen:

const input = "7";
console.log(input, typeof input); // 7 string
console.log(input + 1);           // 71
console.log(7 + 1);               // 8

De eerste optelling voegt tekst samen; de tweede telt getallen op. Primitieve waarden kunnen niet ter plekke veranderen: een bewerking maakt een nieuwe waarde. Als je een variabele bijwerkt, verander je naar welke waarde die verwijst.

JavaScript gebruikt één gewoon getalstype voor gehele en decimale waarden. Bij delen blijft een deel achter de komma behouden: 10 / 4 geeft 2.5. Zowel de operator die je kiest als de volgorde waarin die wordt uitgevoerd, beïnvloedt het resultaat.

Reken in de bedoelde volgorde

Machtsverheffen gaat vóór vermenigvuldigen, delen en de rest bepalen; die gaan weer vóór optellen en aftrekken. Operatoren op hetzelfde niveau worden van links naar rechts uitgevoerd, behalve machtsverheffen, dat van rechts naar links wordt gegroepeerd: 2 ** 3 ** 2 is 2 ** 9, oftewel 512. Haakjes veranderen die volgorde: 2 + 3 * 4 geeft 14, maar (2 + 3) * 4 geeft 20.

Voor het gemiddelde van 72, 85 en 90 tel je de hele groep op voordat je deelt:

const average = (72 + 85 + 90) / 3;
console.log(average); // 82.33333333333333

Zonder haakjes deelt 72 + 85 + 90 / 3 alleen 90 en geeft de berekening 187.

Splits hele eenheden en resten

Math.trunc(7 / 2) laat het deel achter de komma weg en geeft 3. Voor een positieve lengte van 245 cm geeft Math.floor(245 / 100) 2 meter en geeft 245 % 100 45 resterende centimeters. Evenzo geeft 3725 seconden 1 uur met Math.floor(3725 / 3600), 2 minuten met Math.floor((3725 % 3600) / 60) en 5 seconden met 3725 % 60. Voor een geheel getal test n % 2 === 0 of het even is. Een rest heeft het teken van de linkeroperand: -7 % 3 geeft -1.

Werk een getal bij

x += 5 betekent x = x + 5. De operatoren -=, *=, /=, %= en **= volgen hetzelfde patroon. Als je begint bij 10, geven de bijwerkingen += 5, *= 2, -= 4 en daarna /= 2 achtereenvolgens 15, 30, 26 en 13.

++ verhoogt met één en -- verlaagt met één. Bij let a = 5; let b = a++; wordt a gelijk aan 6, maar krijgt b de waarde 5: de postfixvorm geeft de oude waarde terug. Bij let b = ++a;, opnieuw beginnend met a = 5, worden beide 6. Door een bijwerking op een eigen regel te zetten, hoef je niet op dat expressieresultaat te vertrouwen.

Rond bewust af en maak bewust op

Math.round(13.456 * 100) / 100 geeft het getal 13.46. Daarentegen geeft (3.14159).toFixed(2) de string "3.14" en geeft (19.999).toFixed(2) de string "20.00". Maak pas aan het einde op: als je een getal bij een opgemaakte string optelt, wordt tekst samengevoegd.

Herken de grenzen van getallen

Getallen gebruiken 64-bits binaire drijvendekommaweergave. De meeste decimale breuken zijn benaderingen, dus 0.1 + 0.2 is 0.30000000000000004. Rond af voor de weergave, vergelijk met een geschikte kleine tolerantie of reken in hele eenheden zoals centen of millimeters.

Sommige ongeldige bewerkingen geven een waarde terug in plaats van een uitzondering op te werpen: 5 / 0 is Infinity, -5 / 0 is -Infinity en 0 / 0 of "abc" * 2 is NaN. De meeste berekeningen met NaN blijven NaN; NaN ** 0 is een uitzondering en geeft 1.

Elk geheel getal tot en met Number.MAX_SAFE_INTEGER, 9007199254740991, is exact. Daarboven kunnen slechts sommige gehele getallen worden weergegeven: 9007199254740992 + 1 geeft nog steeds 9007199254740992. Bigints ondersteunen grotere exacte gehele getallen.

Een string bewaart tekst tussen bij elkaar passende enkele aanhalingstekens, dubbele aanhalingstekens of backticks. Voor gewone tekst kunnen alle drie dezelfde waarde weergeven. De aanhalingstekens geven aan waar de tekst begint en eindigt; ze maken geen deel uit van die waarde.

Aanhalingstekens, escapesequenties en samenvoegen

Gebruik het andere soort aanhalingsteken om een aanhalingsteken op te nemen: "It's late". Een escapesequentie gebruikt een backslash, zoals in 'It\'s late'. \n staat voor een regeleinde, \t voor een tab en \\ voor een backslash. De escapesequentie \n neemt één positie in de string in, ook al typ je twee tekens om die te schrijven. "It's".length is 4; "Line 1\nLine 2".length is 13.

De operator + voegt strings samen. "Hello" + " " + "world" geeft "Hello world"; er wordt geen spatie ingevoegd tenzij een van de delen die bevat. Bij let msg = "Hi"; msg += " there"; is de bijgewerkte waarde "Hi there".

Posities beginnen bij nul

const language = "JavaScript";
console.log(language.length); // 10
console.log(language[0]);     // J
console.log(language[4]);     // S
console.log(language[9]);     // t
console.log(language.at(-1)); // t
console.log(language[10]);    // undefined

De laatste index is length - 1. Een negatief argument voor at() telt vanaf het einde. length is een eigenschap, geen methode: language.length() veroorzaakt TypeError. Preciezer gezegd gebruiken stringposities en length UTF-16-code-eenheden, de eenheden waarmee JavaScript tekst opslaat. Deze gewone Engelse letters nemen elk één eenheid in; sommige symbolen en emoji nemen er meer in.

Sla de nieuwe string op

Strings zijn onveranderlijk: je kunt hun inhoud niet ter plekke wijzigen. Als je word[0] = "b" toewijst terwijl word gelijk is aan "cat", ontstaat geen "bat"; in strikte modus wordt een uitzondering opgeworpen. Methoden die tekst transformeren, geven een nieuwe string terug:

let name = "ana";
name.toUpperCase();
console.log(name); // ana
name = name.toUpperCase();
console.log(name); // ANA

De methode aanroepen is niet genoeg om het resultaat te bewaren. Als je name.toUpperCase zonder haakjes schrijft, roep je de methode helemaal niet aan.

Kies de juiste tekstbewerking

toLowerCase() en toUpperCase() veranderen hoofdletters in kleine letters of andersom; trim() verwijdert witruimte aan beide uiteinden. Bij aaneenschakelen werkt elke methode op het vorige resultaat: " Ana@Example.com ".trim().toLowerCase() geeft "ana@example.com".

includes(), startsWith() en endsWith() geven booleaanse waarden terug. Zo geeft "report.pdf".endsWith(".pdf") de waarde true. indexOf() geeft de eerste overeenkomende positie of -1: "JavaScript".indexOf("S") geeft 4, maar zoeken naar "s" geeft -1. Zoekopdrachten zijn hoofdlettergevoelig. "JavaScript".includes("script") is false; converteer vóór die zoekopdracht naar kleine letters om true te krijgen.

slice(start, end) geeft tekst terug vanaf de startindex tot aan, maar zonder, de eindindex. "JavaScript".slice(0, 4) geeft "Java"; .slice(4) en .slice(-6) geven "Script".

"a-b-c".replace("-", "+") geeft "a+b-c"; replaceAll() met dezelfde argumenten geeft "a+b+c". "ab".repeat(3) geeft "ababab" en "5".padStart(3, "0") geeft "005". Bij const city = "paris"; levert city[0].toUpperCase() + city.slice(1) de waarde "Paris" op door een hoofdletter als eerste letter samen te voegen met de ongewijzigde rest.

Een templateliteral plaatst tekst tussen backticks. Daarin markeert ${...} een plaatsaanduiding waarvan de expressie wordt geëvalueerd en in de tekst ingevoegd. Dat is handig als een bericht meerdere waarden combineert met leestekens, spaties of berekeningen.

Lees een plaatsaanduiding als een expressie

const name = "Ana";
const greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, Ana!

De engine leest name, krijgt "Ana" en plaatst die waarde tussen de begroeting en het uitroepteken. De backticks en symbolen van de plaatsaanduiding beschrijven de string; ze verschijnen niet in het resulterende bericht.

Met concatenatie wordt hetzelfde idee "Hello, " + name + "!". Een langer bericht zoals "Hello, " + name + "! You have " + count + " new messages." vereist meerdere afzonderlijke delen tussen aanhalingstekens. Een template houdt de hele zin bij elkaar: `Hello, ${name}! You have ${count} new messages.`. Je moet spaties nog steeds typen waar je ze wilt hebben.

Bereken en maak daarna op binnen de plaatsaanduiding

const name = "Ana";
const tickets = 3;
const price = 4.5;
const receipt = `${name} bought ${tickets} tickets for ${(tickets * price).toFixed(2)} in total.`;
console.log(receipt);

De uitvoer is “Ana bought 3 tickets for 13.50 in total.” Eerst levert tickets * price de waarde 13.5 op. Door de haakjes wordt het hele product de waarde waarop .toFixed(2) wordt toegepast, wat "13.50" oplevert. De plaatsaanduiding voegt die tekst in de zin in. De numerieke variabelen price en tickets blijven ongewijzigd.

Zonder opmaak toont een plaatsaanduiding de gewone tekstvorm van het getal. `${0.1 + 0.2}` geeft "0.30000000000000004". Als je het getal binnen de plaatsaanduiding opmaakt, geeft `${(0.1 + 0.2).toFixed(2)}` de waarde "0.30".

Expressies passen; instructies niet

Een plaatsaanduiding kan een waarde, een berekening, een methodeaanroep of een expressie bevatten die een waarde kiest. Bij birthYear = 1990 geeft `You turn ${2026 - birthYear} this year.` de uitvoer “You turn 36 this year.”

De voorwaardelijke operator kan tekst in het enkelvoud of meervoud kiezen:

const count = 1;
console.log(`You have ${count} ${count === 1 ? "item" : "items"}`);
// You have 1 item

De vergelijking kiest één string om in te voegen. Een if-instructie kan die expressie binnen ${...} niet vervangen, omdat een plaatsaanduiding een expressie nodig heeft die een waarde oplevert.

Behoud de exacte leestekens

Alleen backticks activeren plaatsaanduidingen. Bij const n = 5; is "n + 1 = ${n + 1}" gewone tekst en blijft ${n + 1} ongewijzigd. De template `n + 1 = ${n + 1}` geeft “n + 1 = 6”. Een backtick is een ander teken dan een enkel aanhalingsteken.

Regeleinden die je tussen backticks typt, worden regeleinden in de resulterende string. Spaties voor inspringing worden er ook onderdeel van. Ontbrekende waarden worden als tekst ingevoegd: `${undefined}` geeft "undefined", terwijl `${null}` de waarde "null" geeft. Als een bericht onverwacht “undefined” bevat, inspecteer dan de ingevoegde variabele en de plaats waar er een waarde aan is toegewezen.

Expliciete typeconversie betekent dat je de conversie zelf schrijft met een hulpmiddel zoals Number(), String() of Boolean(). Daarmee maak je het bedoelde type zichtbaar op het punt waar een waarde de berekening binnenkomt.

Kies een conversie naar een getal

Number() leest de hele tekst als een getal en negeert witruimte eromheen. Number("1.5") geeft 1.5 en Number(" 12 ") geeft 12. Number("12px") geeft NaN omdat niet de hele string numeriek is. Code gebruikt een decimale punt: Number("1,5") geeft ook NaN.

parseInt() en parseFloat() lezen een getal aan het begin en stoppen wanneer de tekst niet meer past. parseInt("12px", 10) geeft 12; parseFloat("3.75 kg") geeft 3.75. De functie voor gehele getallen stopt bij de decimale punt, dus parseInt("0.5", 10) geeft 0. parseInt("abc", 10) geeft NaN omdat er geen getal aan het begin staat. Geef een grondtal door aan parseInt(): parseInt("08", 10) geeft 8, terwijl parseInt("ff", 16) hexadecimaal leest en 255 geeft.

De unaire plus converteert ook gewone numerieke tekst: +"42" geeft 42.

Houd ontbrekende invoer apart van nul

Een prompt geeft een string of null terug. Annuleren geeft null terug en een leeg vak bevestigen geeft "" terug. Beide worden door Number() nul, net als tekst die alleen uit witruimte bestaat. Controleer vóór het converteren of invoer ontbreekt:

const input = prompt("Enter a quantity:");
if (input === null || input.trim() === "") {
  console.log("No quantity entered.");
} else {
  const quantity = Number(input);
  if (Number.isNaN(quantity)) {
    console.log("Please type a number.");
  } else {
    console.log(quantity + 1);
  }
}

De || slaat de aanroep van trim() over wanneer input gelijk is aan null. Als je “12” typt, wordt de numerieke berekening bereikt en verschijnt 13. Als je “12px” typt, verschijnt de melding voor een ongeldig getal. “0” typen is een geldig antwoord en toont 1.

Gebruik Number.isNaN(value) om op een echte NaN-waarde te testen. value === NaN slaagt nooit. De oudere globale functie isNaN() converteert eerst het argument: isNaN("hello") is true, maar Number.isNaN("hello") is false omdat die waarde nog steeds een string is.

Converteer naar tekst of een booleaanse waarde

String(42) geeft "42", String(true) geeft "true" en String(null) geeft "null". (42).toString() levert ook "42" op, maar .toString() aanroepen op null of undefined veroorzaakt TypeError. String() kan beide verwerken.

Boolean() geeft false terug voor false, 0, -0, 0n, "", null, undefined en NaN; dit zijn falsy-waarden. Browsers hebben ook het oude falsy-object document.all. Andere waarden zijn truthy. Met name "0", "false" en een string met één spatie zijn allemaal truthy. !!value geeft dezelfde booleaanse conversie.

Voor twee antwoorden op een prompt, "12" en "30", levert a + b de waarde "1230" op. Converteer eerst beide invoerwaarden: Number(a) + Number(b) geeft 42.

Impliciete typeconversie is automatische typeconversie binnen een bewerking. De regels hangen af van de operator. Een berekening die lijkt te werken, kan toch een tekstwaarde bevatten waardoor een latere stap mislukt.

Volg de optelregel

Voor gewone operanden van de typen number, string, boolean, null en undefined voegt + tekst samen als een van beide operanden een string is. Anders voert de operator een conversie naar getallen en een optelling uit. "5" + 2 geeft "52" en 2 + "5" geeft "25".

Evalueer een keten van links naar rechts:

console.log(1 + 2 + "3"); // 33
console.log("3" + 1 + 2); // 312

In de eerste expressie worden twee getallen opgeteld tot 3; als je daarna "3" optelt, worden de twee tekstvormen samengevoegd tot "33". In de tweede levert de eerste bewerking al "31" op, zodat de laatste bewerking nog een cijfer toevoegt. Haakjes kunnen veranderen welke bewerking eerst gebeurt: "3" + (1 + 2) geeft "33".

Andere rekenkundige bewerkingen verwachten getallen

Aftrekken, vermenigvuldigen, delen, de rest bepalen en machtsverheffen converteren numerieke strings naar getallen. "5" - 2 geeft 3, "5" * "2" geeft 10 en "10" / "4" geeft 2.5. Een string zoals "abc" kan geen geldig getal worden, dus "abc" * 2 geeft NaN. Bigints hebben aparte rekenregels; een bigint combineren met een number veroorzaakt TypeError.

Dit verschil kan een fout verbergen:

const price = "20";
console.log(price * 3); // 60
console.log(price + 5); // 205

De vermenigvuldiging converteert de prijs, maar verandert de variabele niet. De latere optelling ziet nog steeds een string. Converteer één keer waar invoer binnenkomt en werk daarna verder met het numerieke resultaat.

Volg kleine automatische conversies

In getalsberekeningen wordt true gelijk aan 1, false aan 0 en null aan 0. Dus geeft true + true de waarde 2, terwijl null + 1 de waarde 1 geeft. undefined wordt NaN, dus undefined + 1 is NaN. De unaire plus en min converteren numerieke strings: +"42" geeft 42, -"5" geeft -5 en +"" geeft 0.

++ vraagt altijd om een numerieke bijwerking, maar += volgt de optelregel:

let count = "5";
count++;
console.log(count, typeof count); // 6 number
let label = "5";
label += 1;
console.log(label, typeof label); // 51 string

Voorwaarden passen een andere conversie toe

Een if-voorwaarde beoordeelt een waarde als truthy of falsy. "0" is een niet-lege string en voldoet; het getal 0 is falsy en slaat het blok over. Als nul een geldige hoeveelheid is, kun je met alleen een controle op truthy of falsy geen onderscheid maken tussen nul en een ontbrekend antwoord. Voor een waarde die door een getal of null wordt weergegeven, controleert quantity !== null expliciet of de waarde ontbreekt.

Ook bij gelijkheid zijn er twee soorten gedrag: "7" == 7 is true na impliciete typeconversie, maar "7" === 7 is false omdat strikte gelijkheid het onderscheid tussen de typen behoudt. Gebruik strikte gelijkheid voor gewone vergelijkingen.

Als een resultaat samengevoegde tekst of NaN is, toon dan elke invoerwaarde naast typeof input. Zoek het eerste onjuiste type en verbeter de conversie op die plaats. Als je "205" aan het einde in een getal zou omzetten, krijg je 205, niet de bedoelde som 25.

Een vergelijking levert een booleaanse waarde op. 7 > 3 is true, 5 >= 5 omvat gelijkheid en is true, en 4 < 2 is false. Sla een resultaat op zoals const isAdult = age >= 18;, of gebruik het rechtstreeks in een voorwaarde.

Geef de voorkeur aan strikte gelijkheid

=== vergelijkt zonder typen te converteren. Twee gewone primitieve waarden moeten hetzelfde type en dezelfde waarde hebben: 7 === 7 is true, terwijl "7" === 7 gelijk is aan false. !== keert strikte gelijkheid om, dus "7" !== 7 is true.

Niet-strikte gelijkheid, ==, kan operanden converteren. "7" == 7, 0 == "" en "0" == false zijn allemaal true. Door de speciale regel voor ontbrekende waarden is null == undefined waar, maar null == 0 onwaar. != keert niet-strikte gelijkheid om. Gebruik bij voorkeur === en !==; met een bewuste keuze voor value == null kun je op zowel null als undefined testen.

Onderscheid tekstvolgorde van getalsvolgorde

Twee strings worden van links naar rechts vergeleken op basis van hun UTF-16-codewaarden. Voor gewone Engelse woorden in dezelfde lettergrootte is "apple" < "banana" gelijk aan true. Een korter overeenkomend begindeel komt eerst: "apple" < "apples" is true. Bij Engelse letters zonder accenten komen hoofdletters vóór kleine letters, dus "Zebra" < "apple" is true. Door beide strings met toLowerCase() te converteren, verwijder je dat verschil in lettergrootte bij eenvoudige vergelijkingen van Engelse letters.

Ook strings met cijfers volgen de tekstvolgorde:

console.log("10" < "9"); // true
console.log("10" < 9);   // false

In de eerste vergelijking komt het teken “1” vóór “9”. In de tweede is één operand numeriek, dus wordt de tekst het getal 10. Converteer numerieke invoer bewust voordat je de grootte vergelijkt. "abc" < 5 en "abc" > 5 geven allebei false omdat de numerieke conversie NaN oplevert.

Behandel ontbrekende en ongeldige getallen eerst

NaN is niet aan zichzelf gelijk: zowel NaN === NaN als NaN == NaN is false. Gebruik Number.isNaN() om dit te herkennen.

Relationele vergelijkingen converteren null naar nul, dus null >= 0 is true, maar null > 0 is false. Gelijkheid heeft een andere regel, dus null == 0 blijft false. undefined wordt bij relationele vergelijkingen NaN, dus undefined > 0 en undefined < 0 zijn onwaar; undefined == 0 is ook onwaar. Controleer op een ontbrekende waarde voordat je die als een meting behandelt.

Vergelijk decimale getallen en bereiken

Door binaire afronding is 0.1 + 0.2 === 0.3 onwaar. Voor deze kleine waarden werkt een tolerantietest:

const closeEnough = Math.abs((0.1 + 0.2) - 0.3) < 0.000001;
console.log(closeEnough); // true

Math.abs() verwijdert het teken van het verschil. Kies een tolerantie die past bij de grootte en nauwkeurigheid van de waarden, of reken in hele eenheden zoals millimeters.

Schakel bereiktests niet aaneen zoals in de wiskunde. Bij x = 50 levert 0 < x < 10 eerst true op en vergelijkt daarna die booleaanse waarde als 1 < 10, wat true oplevert. Evenzo wordt 3 > 2 > 1 gelijk aan true > 1, oftewel 1 > 1, wat onwaar is. Schrijf beide vergelijkingen volledig uit: x > 0 && x < 10.

Met logische operatoren kan een voorwaarde meerdere eisen uitdrukken. Bij booleaanse operanden betekent && EN, || OF en ! NIET. Dankzij de evaluatievolgorde kun je ook een bewerking vooraf controleren die bij een ontbrekende waarde zou mislukken.

Druk elke eis uit

const temperatureC = 25;
const inRange = temperatureC >= 18 && temperatureC <= 30;
const outside = temperatureC < 18 || temperatureC > 30;

inRange is waar omdat aan beide grenzen is voldaan. outside is onwaar omdat geen van beide tests op buiten het bereik waar is. OF omvat ook het geval waarin beide kanten waar zijn; het betekent niet “één maar nooit allebei”.

Schrijf elke vergelijking volledig uit. color === "red" || "green" test niet op elk van beide kleuren. Bij color = "blue" is de eerste vergelijking onwaar, maar de niet-lege string "green" is truthy. De bedoelde test is color === "red" || color === "green".

Groepeer de bedoelde voorwaarde

NIET bindt vóór EN en EN vóór OF. Dus is true || false && false waar, maar (true || false) && false onwaar.

Stel dat toegang een login en de rol van beheerder of eigenaar vereist. Schrijf loggedIn && (isAdmin || isOwner). Zonder haakjes kan loggedIn && isAdmin || isOwner de hele expressie via isOwner waar maken, zelfs bij loggedIn = false. De haakjes zorgen dat de inlogeis voor beide rollen geldt.

Als je een samengestelde voorwaarde omkeert, verandert ook het verbindingsteken. !(a && b) heeft dezelfde waarheidswaarde als !a || !b; !(a || b) komt overeen met !a && !b. Voor een temperatuur buiten het interval inclusief grenzen verandert het omkeren van de twee tests binnen het interval >= in <, <= in > en EN in OF.

Stop zodra het resultaat bekend is

EN stopt bij de eerste falsy-operand; OF stopt bij de eerste truthy-operand. Dit is kortsluitevaluatie. De overgeslagen operand wordt niet geëvalueerd:

const input = null;
const hasText = input !== null && input.trim() !== "";
console.log(hasText); // false

De eerste test is onwaar, dus wordt trim() nooit op null aangeroepen. Als je die twee tests omkeert, wordt de onveilige bewerking eerst geprobeerd.

Deze operatoren geven een operand terug, niet noodzakelijk een booleaanse waarde. "" || "Guest" geeft "Guest" terug; "Sam" || "Guest" geeft "Sam" terug. "Ana" && "ok" geeft "ok" terug en null && "x" geeft null terug. Een omringende if test vervolgens of de teruggegeven waarde truthy of falsy is.

Behoud betekenisvolle falsy-waarden

Bij quantity = 0 geeft quantity || 1 de waarde 1, maar behoudt quantity ?? 1 de waarde 0. Bij nickname = "" geeft nickname || "Anonymous" de terugvaloptie, terwijl nickname ?? "Anonymous" de lege string behoudt. Gebruik ?? als die waarden betekenis hebben.

Gebruik haakjes als je ?? met EN of OF combineert: a || b ?? c is een syntaxisfout, terwijl (a || b) ?? c een expliciete groepering heeft. NIET converteert eerst naar een booleaanse waarde en keert die daarna om: !0 is waar en !"0" is onwaar. Dubbele NIET, !!value, geeft een gewone booleaanse waarde.

Een if-instructie voert een blok uit wanneer de voorwaarde truthy is. Een else wordt uitgevoerd wanneer die voorwaarde falsy is. Gebruik accolades om precies aan te geven welke instructies bij elke tak horen.

Orden een keten van beslissingen

Een else if-keten controleert van boven naar beneden. De eerste voorwaarde waaraan is voldaan, wint en alle latere takken worden overgeslagen:

const score = 85;
let grade;
if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else {
  grade = "F";
}

De eerste vergelijking slaagt niet; de tweede wel, dus wordt grade gelijk aan "B". Als je score >= 70 eerst test, zou zelfs een score van 95 daaronder vallen en "C" krijgen. Zet bij overlappende ondergrenzen de hoogste eerst. De gedeelde variabele grade is buiten de takken gedeclareerd, zodat latere code die kan lezen.

Een samengestelde voorwaarde kan een korte beslissing leesbaar houden. Verzending is gratis bij een bestelbedrag van ten minste 50 of voor een lid; anders kost verzending 4,95:

const orderTotal = 45;
const isMember = false;
let shipping;
if (orderTotal >= 50 || isMember) {
  shipping = 0;
} else {
  shipping = 4.95;
}
console.log(`To pay: ${orderTotal + shipping}`);
// To pay: 49.95

Twee geneste voorwaarden zonder else-takken kun je vaak met EN verbinden: if (isLoggedIn) { if (isAdmin) { ... } } voert de binnenste code onder dezelfde booleaanse voorwaarden uit als if (isLoggedIn && isAdmin) { ... }.

Vermijd leestekens die het uitvoeringspad veranderen

Zonder accolades hoort alleen de volgende instructie bij een if; inspringing kan daar geen andere instructie aan toevoegen. Een puntkomma direct na de voorwaarde maakt een lege instructie: if (x > 5); { ... } zorgt dat het volgende blok ongeacht de voorwaarde wordt uitgevoerd.

if (x = 5) wijst 5 toe en test vervolgens of de waarde truthy is. Dit verandert x en voldoet aan de voorwaarde omdat 5 truthy is. Gebruik if (x === 5) om te vergelijken.

Kies een waarde met een voorwaardelijke expressie

De voorwaardelijke, of ternaire, operator geeft een van twee waarden terug:

const age = 17;
const status = age >= 18 ? "adult" : "minor";
console.log(status); // minor

De vorm is condition ? valueIfTrue : valueIfFalse. Gebruik die voor een korte keuze binnen een toewijzing of templateliteral. Gebruik if/else voor takken met instructies. Diep geneste voorwaardelijke expressies maken de keuzes moeilijk te volgen.

Koppel vaste keuzes met switch

const day = "Sat";
let kind;
switch (day) {
  case "Sat":
  case "Sun":
    kind = "weekend";
    break;
  default:
    kind = "weekday";
}

switch vergelijkt de waarde strikt met de caselabels. Beide weekendlabels bereiken dezelfde toewijzing. break verlaat de switch-instructie; default handelt een waarde zonder overeenkomend geval af. switch ("2") komt niet overeen met case 2: omdat de typen verschillen.

Na een overeenkomst loopt de uitvoering door volgende cases heen tot een break of het einde. Dit doorvallen naar de volgende case kan bewust gebeuren, zoals bij labels onder elkaar, of onbedoeld. Als case 2 een woord toevoegt en geen break heeft voordat case 3 een ander woord toevoegt, worden beide toevoegingen uitgevoerd. Een caselabel is een beginpunt, geen nieuwe voorwaarde die na elke instructie wordt getest.

Een programma kan mislukken voordat het start, tijdens de uitvoering stoppen of eindigen met een verkeerd resultaat. Stel vast wat er is gebeurd voordat je code wijzigt. De console geeft aanwijzingen over fouten, terwijl logmeldingen met labels waarden tonen in code die wordt uitgevoerd.

Onderscheid drie soorten problemen

Een syntaxisfout in één script maakt een ander script dat al is uitgevoerd niet ongedaan. Een niet-afgehandelde uitzondering tijdens de uitvoering stopt de huidige uitvoering bij de instructie die de fout veroorzaakt.

Lees de volledige melding

Een consolemelding zoals Uncaught ReferenceError: totl is not defined geeft het fouttype en de naam die de fout veroorzaakt. “Uncaught” betekent dat de uitzondering niet is afgehandeld. Een locatie zoals app.js:2 verwijst naar het bestand en de regel; als je erop klikt, wordt die code geopend.

let total = 0;
total = totl + 5;
console.log(total);

Regel 1 wordt uitgevoerd. Op regel 2 kan JavaScript totl niet lezen, dus wordt die toewijzing niet voltooid en wordt de laatste logmelding niet bereikt. Als je de spelfout verbetert naar total, toont het script 5.

Veelvoorkomende syntaxisfouten melden een ontbrekend ), een onverwacht teken of een ongeldig teken. In console.log("hi"; ontbreekt het sluitende haakje. In if (x > 3 { mist de voorwaarde het sluitende haakje. De gemelde regel is waar de engine het probleem opmerkte; kijk ook vlak daarboven naar een niet-gesloten aanhalingsteken of scheidingsteken.

Beperk de mogelijke oorzaken met het type

Een ReferenceError wijst op een naam die niet kan worden gebruikt: een typefout, een probleem met het bereik of lezen vóór initialisatie. Een TypeError betekent dat de bewerking niet bij de waarde past, zoals "abc".length(), null.trim() of hertoewijzing aan een const. Een RangeError kan ontstaan door een niet-ondersteund argument, zoals (1.5).toFixed(101).

De formulering van een fout kan per browser verschillen. Het type en de betrokken waarde zijn nuttiger dan de hele zin uit je hoofd leren. Verhelp de eerste relevante fout en voer de code opnieuw uit, omdat latere meldingen uit dezelfde oorzaak kunnen voortkomen.

Volg een logische fout

Toon bij een verkeerd gemiddelde de som en het resultaat afzonderlijk:

const sum = 72 + 85 + 90;
const average = 72 + 85 + 90 / 3;
console.log("sum:", sum);         // 247
console.log("average:", average); // 187

De correcte som beperkt de fout tot de deling. Verander de berekening in sum / 3, wat 82.33333333333333 geeft. Als optellen onverwacht cijfers samenvoegt, toon dan ook de typen: console.log("price:", price, typeof price);. Zoek de eerste waarde die afwijkt van wat je verwacht.

Gebruik console.warn() of console.error() om je eigen diagnosemeldingen te laten opvallen. Controleer de niveaufilters van de console als een logmelding lijkt te ontbreken. Een 404 betekent dat een resource niet is gevonden, dus controleer het scriptpad; bij andere laadfouten heb je de volledige melding nodig. Een ontbrekende opstartmelding kan ook op een filter of een syntaxisfout wijzen.

Reproduceer het probleem, lees de eerste fout, test één waarschijnlijke oorzaak met een kleine wijziging of logmelding, voer de code opnieuw uit en controleer het verwachte resultaat. Verwijder tijdelijke logmeldingen wanneer de fout is verholpen.

Met een debugger kun je een actief script onderbreken en de waarden op dat precieze moment inspecteren. Gebruik het paneel Sources in Chrome of Edge, of het paneel Debugger in Firefox. Dit is vooral handig wanneer een verkeerd resultaat afhangt van meerdere eerdere bewerkingen.

Onderbreek voordat de regel wordt uitgevoerd

Open het script in Sources en klik op een regelnummer om een onderbrekingspunt in te stellen. De uitvoering wordt onderbroken voordat die regel wordt uitgevoerd. Als de code tijdens het laden van de pagina wordt uitgevoerd, laad de pagina dan opnieuw nadat je het onderbrekingspunt hebt ingesteld. Alleen een punt instellen voert code die al klaar is niet opnieuw uit.

Je kunt ook debugger; in het script schrijven. Als een debugger actief is, onderbreekt dit de uitvoering; zonder actieve debugger heeft het geen effect. Verwijder deze instructie voordat je de code publiceert.

Kies de volgende actie

Sommige ingebouwde aanroepen hebben geen JavaScript-broncode die je stap voor stap kunt binnengaan. Een stap uitvoeren zonder de functie binnen te gaan is handig als je het resultaat van de aanroep wilt zonder de interne werking te volgen.

Houd tijdens een onderbreking de aanwijzer boven een naam om die te inspecteren, lees lokale waarden in Scope of voeg een expressie toe aan Watch. Expressies in Watch zoals typeof price en total > 100 worden bij elke stap opnieuw geëvalueerd. De console kan ook expressies evalueren met het bereik tijdens de onderbreking.

Inspecteer een misleidend totaal

Gratis verzending moet beginnen bij 50, maar deze code kent die toe bij een subtotaal van 45 plus 4 verzendkosten:

const subtotal = "45";
const shipping = 4;
const total = subtotal + shipping;
if (total >= 50) {
  console.log("Free shipping");
}

Stel een onderbrekingspunt in op de regel met if en laad opnieuw. De toewijzing is al uitgevoerd. Scope toont subtotal als de string "45" en total als "454". Een expressie typeof total in Watch meldt "string". De vergelijking converteert "454" naar een getal, zodat aan total >= 50 wordt voldaan.

De fout zit in de optelling, vóór de vergelijking. Verander de opgeslagen berekening in const total = Number(subtotal) + shipping;. Laad opnieuw. Het totaal is nu het getal 49 en de voorwaarde is onwaar. Als je in plaats daarvan op de toewijzing onderbreekt, is die nog niet uitgevoerd: voer eerst die stap uit voordat je de geïnitialiseerde total inspecteert.

Onderbreek alleen waar dat nuttig is

Een voorwaardelijk onderbrekingspunt onderbreekt alleen wanneer de expressie waar is, zoals total > 100. Klik met de rechtermuisknop op het regelnummer om er een toe te voegen. Een logpunt toont telkens wanneer de regel wordt uitgevoerd een melding, zonder te onderbreken of het script te wijzigen. Onderbrekingspunten voor uitzonderingen onderbreken waar een uitzondering wordt opgeworpen, zodat je de waarden bij de fout kunt inspecteren.

Als je een else if-keten stap voor stap doorloopt, zie je welke tak wordt bereikt en welke eerdere voorwaarde latere controles voorkomt. Gebruik logmeldingen voor een paar bekende waarden en de debugger wanneer de volgorde of meerdere actuele waarden ertoe doen. Breng de definitieve verbetering aan in de opgeslagen projectcode: een experimentele wijziging in de browser is geen blijvende wijziging in je project. Voer het oorspronkelijke geval dat misging opnieuw uit en controleer het verbeterde resultaat.