Några snabba och enkla men värdefulla JavaScript-tips
Använd inte var
Använd inte nyckelordet var
. Använd istället const
som standard, och let
om och endast om du behöver kunna skriva över variabelns värde senare. Exempel:
const header = document.getElementById("header");
for (let i = 0; i < 10; i++) {
// …
}
Använd inte ==
Semantiken hos ==
är extremt ointuitiv i JavaScript; till exempel är dumheter som "" == 0
sanna. Använd istället ===
. (De mycket få undantagsfall då ==
kan vara vettig är överkurs i sammanhanget.)
Subtrahera inte strängar
Undvik:
var subTotal = diceTotal - "6";
Det råkar fungera i just detta fall i ett svagt typat språk som JavaScript, men det är inte bra kod. Mycket bättre:
var subTotal = diceTotal - 6;
Några mer allmänna tankar om din kod
ett
, två
, tre
, …?
Detta är i allmänhet inte vettiga definitioner:
sex=6;
ett=1;
två=2;
tre=3;
fyra=4;
fem=5;
Tycker du att de tillför något?
Kolla om något element bland flera uppfyller ett visst predikat
Istället för
d1 == 6 || d2 == 6 || d3 == 6 || d4 == 6 || d5 == 6
skulle jag föreslå
[d1, d2, d3, d4, d5].some(x => x === 6)
som är mer generellt och robust. Men egentligen borde inte variablerna d1
osv ingå i koden överhuvudtaget. Vilket för oss till nästa punkt …
Don't Repeat Yourself
Tänk om du blir ombedd att ändra programmet så att man ska kunna slå upp till 1000 tärningar. Vad behöver du göra för ändringar då?
Du har tydliga mönster som upprepar sig flera gånger. Ta till exempel följande:
var d1 = Math.floor(Math.random() * 6) + 1;
var d2 = Math.floor(Math.random() * 6) + 1;
var d3 = Math.floor(Math.random() * 6) + 1;
var d4 = Math.floor(Math.random() * 6) + 1;
var d5 = Math.floor(Math.random() * 6) + 1;
Du har egentligen skrivit samma sak fem gånger, förutom en minimal detalj som skiljer sig åt. När man ser ett sådant mönster bör man försöka abstrahera ut det så att man bara behöver skriva varje sak en gång. Denna princip kallas Don't Repeat Yourself (DRY).
Exempelvis:
function randomDieValue(max) {
return Math.floor(Math.random() * max) + 1;
}
const randomValues = Array(5).fill(null).map(_ => randomDieValue(6))
(Ovanstående är inte nödvändigtvis perfekt kod, men illustrerar principen.)
I allmänhet: Det ska aldrig vara så att du måste ändra på flera ställen i koden för att ändra en sak. Till exempel borde literalerna 5
(för antalet tärningar) och 6
(för antalet sidor på en tärning) bara förekomma en gång var i programmet, typ så här:
const MAX_DICE = 5;
const DIE_SIDES = 6;
Resten av koden bör sedan vara byggd så att om man istället ska kunna slå upp till tio stycken 20-sidiga tärningar behöver du bara ändra till
const MAX_DICE = 10;
const DIE_SIDES = 20;
och inget mer.