Veelvoorkomende fouten in JavaScript
In dit hoofdstuk wordt gewezen op enkele veelvoorkomende JavaScript-fouten.
Per ongeluk de toewijzingsoperator gebruiken
JavaScript-programma's kunnen onverwachte resultaten genereren als een programmeur per ongeluk een toewijzingsoperator ( =) gebruikt in plaats van een vergelijkingsoperator ( ==) in een if-statement.
Deze ifinstructie retourneert false(zoals verwacht) omdat x niet gelijk is aan 10:
let x = 0;
if (x == 10)
Deze ifinstructie keert terug true(misschien niet zoals verwacht), omdat 10 waar is:
let x = 0;
if (x = 10)
Deze ifinstructie retourneert false(misschien niet zoals verwacht), omdat 0 onwaar is:
let x = 0;
if (x = 0)
Een opdracht retourneert altijd de waarde van de opdracht.
Losse vergelijking verwachten
Bij een normale vergelijking maakt het gegevenstype niet uit. Deze ifinstructie retourneert waar:
let x = 10;
let y = "10";
if (x == y)
In strikte vergelijking doet het gegevenstype er toe. Deze ifinstructie retourneert false:
let x = 10;
let y = "10";
if (x === y)
Het is een veelgemaakte fout om te vergeten dat switchuitspraken een strikte vergelijking gebruiken:
Dit case switchgeeft een waarschuwing weer:
let x = 10;
switch(x) {
case 10: alert("Hello");
}
Dit case switchgeeft geen waarschuwing weer:
let x = 10;
switch(x) {
case "10": alert("Hello");
}
Verwarrende toevoeging en aaneenschakeling
Optellen gaat over het optellen van getallen .
Concatenatie gaat over het toevoegen van strings .
In JavaScript gebruiken beide bewerkingen dezelfde +operator.
Daarom zal het toevoegen van een getal als getal een ander resultaat opleveren dan het toevoegen van een getal als een tekenreeks:
let x = 10;
x = 10 + 5; //
Now x is 15
let y = 10;
y += "5";
// Now y is "105"
Bij het toevoegen van twee variabelen kan het moeilijk zijn om te anticiperen op het resultaat:
let x = 10;
let y = 5;
let z = x + y; // Now z is 15
let x = 10;
let y = "5";
let z = x + y; // Now z is "105"
Verkeerd begrip drijvers
Alle getallen in JavaScript worden opgeslagen als 64-bits getallen met drijvende komma (Floats).
Alle programmeertalen, inclusief JavaScript, hebben problemen met nauwkeurige drijvende-kommawaarden:
let x = 0.1;
let y = 0.2;
let z = x + y
// the result in z will not be 0.3
Om het bovenstaande probleem op te lossen, helpt het om te vermenigvuldigen en te delen:
Voorbeeld
let z = (x * 10 + y * 10) / 10; // z will be 0.3
Een JavaScript-string breken
Met JavaScript kunt u een verklaring in twee regels splitsen:
voorbeeld 1
let x =
"Hello World!";
Maar het breken van een statement in het midden van een string zal niet werken:
Voorbeeld 2
let x = "Hello
World!";
U moet een "backslash" gebruiken als u een instructie in een tekenreeks moet breken:
Voorbeeld 3
let x = "Hello \
World!";
Puntkomma verkeerd geplaatst
Vanwege een misplaatste puntkomma wordt dit codeblok uitgevoerd ongeacht de waarde van x:
if (x == 19);
{
// code block
}
Een retourverklaring breken
Het is een standaard JavaScript-gedrag om een instructie automatisch aan het einde van een regel te sluiten.
Hierdoor zullen deze twee voorbeelden hetzelfde resultaat opleveren:
voorbeeld 1
function myFunction(a) {
let power = 10
return a * power
}
Voorbeeld 2
function myFunction(a) {
let power = 10;
return a * power;
}
Met JavaScript kunt u ook een verklaring in twee regels splitsen.
Hierdoor zal voorbeeld 3 ook hetzelfde resultaat opleveren:
Voorbeeld 3
function myFunction(a) {
let
power = 10;
return a * power;
}
Maar wat gebeurt er als je de return-instructie in twee regels opsplitst, zoals deze:
Voorbeeld 4
function myFunction(a) {
let
power = 10;
return
a * power;
}
De functie keert terug undefined!
Waarom? Omdat JavaScript dacht dat je bedoelde:
Voorbeeld 5
function myFunction(a) {
let
power = 10;
return;
a * power;
}
Uitleg
Als een verklaring onvolledig is, zoals:
let
JavaScript zal proberen de instructie te voltooien door de volgende regel te lezen:
power = 10;
Maar aangezien deze verklaring compleet is:
return
JavaScript zal het automatisch als volgt sluiten:
return;
Dit gebeurt omdat het sluiten van (eind)instructies met een puntkomma optioneel is in JavaScript.
JavaScript sluit de return-instructie aan het einde van de regel, omdat het een volledige instructie is.
Breek nooit een retourverklaring.
Toegang tot arrays met benoemde indexen
Veel programmeertalen ondersteunen arrays met benoemde indexen.
Arrays met benoemde indexen worden associatieve arrays (of hashes) genoemd.
JavaScript ondersteunt geen arrays met benoemde indexen.
In JavaScript gebruiken arrays genummerde indexen :
Voorbeeld
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;
// person.length will return 3
person[0];
// person[0] will return "John"
In JavaScript gebruiken objecten benoemde indexen .
Als u een benoemde index gebruikt, zal JavaScript bij het openen van een array de array opnieuw definiëren als een standaardobject.
Na de automatische herdefinitie zullen matrixmethoden en eigenschappen ongedefinieerde of onjuiste resultaten opleveren:
Voorbeeld:
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // person.length will
return 0
person[0];
// person[0] will return undefined
Definities eindigen met een komma
Komma's in de object- en arraydefinitie zijn legaal in ECMAScript 5.
Objectvoorbeeld:
person = {firstName:"John", lastName:"Doe", age:46,}
Matrixvoorbeeld:
points = [40, 100, 1, 5, 25, 10,];
WAARSCHUWING !!
Internet Explorer 8 zal crashen.
JSON staat geen volgkomma's toe.
JSON:
person = {"firstName":"John", "lastName":"Doe", "age":46}
JSON:
points = [40, 100, 1, 5, 25, 10];
Ongedefinieerd is niet nul
JavaScript-objecten, variabelen, eigenschappen en methoden kunnen undefined.
Bovendien kunnen lege JavaScript-objecten de waarde hebben null.
Dit kan het een beetje moeilijk maken om te testen of een object leeg is.
You can test if an object exists by testing if the type is undefined:
Example:
if (typeof myObj === "undefined")
But you cannot test if an object is null, because this will throw an error if the
object is undefined:
Incorrect:
if (myObj === null)
To solve this problem, you must test if an object is not null,
and not undefined.
But this can still throw an error:
Incorrect:
if (myObj !== null && typeof myObj
!== "undefined")
Because of this, you must test for not undefined before you can
test for not null:
Correct:
if (typeof myObj !== "undefined" && myObj !== null)