Best Practices for JavaScript

Indholdsfortegnelse

Vis indholdsfortegnelse

Undgå globale variabler, undgå ny, undgå ==, undgå eval()

Undgå globale variabler

Minimer brugen af globale variabler.

Dette inkluderer alle datatyper, objekter og funktioner.

Globale variabler og funktioner kan overskrives af andre scripts.

Brug lokale variabler i stedet, og lær hvordan du bruger lukninger.

Angiv altid lokale variabler

Alle variabler, der bruges i en funktion, skal erklæres som lokale variable.

Lokale variabler skal erklæres med var, let eller const søgeordet, ellers bliver de globale variabler.

Strict mode tillader ikke udeklarerede variabler.

Erklæringer øverst

Det er en god kodningspraksis at placere alle erklæringer øverst i hvert script eller funktion.

Dette vil:

Giv renere kode
Angiv et enkelt sted at lede efter lokale variabler
Gør det lettere at undgå uønskede (underforståede) globale variabler
Reducer muligheden for uønskede generklæringer

// Declare at the beginning
let firstName, lastName, price, discount, fullPrice;
 
// Use later
firstName = "John";
lastName = "Doe";
price = 19.90;
discount = 0.10;
fullPrice = price - discount;

Dette gælder også for sløjfevariabler:

for (let i = 0; i < 5; i++) 
 {

Initialiser variabler

Det er en god kodningspraksis at initialisere variabler, når du erklærer dem.

Dette vil:

Giv renere kode
Angiv et enkelt sted at initialisere variabler
Undgå udefinerede værdier

// Declare and initiate at the beginning
let firstName = "";
let lastName = "";
let price = 0;
let discount = 0;
let fullPrice = 0,
const myArray = [];
const myObject = {};

Initialisering af variabler giver en ide om den påtænkte brug (og påtænkte datatype).

Erklær objekter med const

Erklæring af objekter med const vil forhindre enhver utilsigtet typeændring:

Eksempel

let car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Changes object to string

const car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Not possible

Deklarer arrays med const

Erklæring af arrays med const forhindrer enhver utilsigtet typeændring:

Eksempel

let cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Changes array to number

const cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Not possible

Brug ikke nyt objekt()

Brug "" i stedet for new String()
Brug 0 i stedet for new Number()
Brug false i stedet for new Boolean()
Brug {} i stedet for new Object()
Brug [] i stedet for new Array()
Brug /()/ i stedet for new RegExp()
Brug funktion(){} i stedet for new Function()

Eksempel

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean
const x4 = {};           // new object
const x5 = [];           // new array object
const x6 = /()/;         // new regexp object
const x7 = function(){}; // new function object

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Literal Constructors</h2>
<p id="demo"></p>

<script>
let x1 = "";
let x2 = 0;
let x3 = false;
const x4 = {};
const x5 = [];
const x6 = /()/;
const x7 = function(){};

document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>";
</script>

</body>
</html>

Pas på automatiske typekonverteringer

JavaScript er løst skrevet.

En variabel kan indeholde alle datatyper.

En variabel kan ændre sin datatype:

Eksempel

let x = "Hello";     // typeof x is a string
x = 5;               // changes typeof x to a number

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>A variable can chang its type. In this example x is first a string then a number:</p>

<p id="demo"></p>

<script>
let x = "Hello";
x = 5;
document.getElementById("demo").innerHTML = typeof x;
</script>

</body>
</html>

Vær opmærksom på, at tal ved et uheld kan konverteres til strenge eller NaN (Ikke en Nummer).

Når du udfører matematiske operationer, kan JavaScript konvertere tal til strenge:

Eksempel

let x = 5 + 7;       // x.valueOf() is 12,  typeof x is a number
let x = 5 + "7";     // x.valueOf() is 57,  typeof x is a string
let x = "5" + 7;     // x.valueOf() is 57,  typeof x is a string
let x = 5 - 7;       // x.valueOf() is -2,  typeof x is a number
let x = 5 - "7";     // x.valueOf() is -2,  typeof x is a number
let x = "5" - 7;     // x.valueOf() is -2,  typeof x is a number
let x = 5 - "x";     // x.valueOf() is NaN, typeof x is a number

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>Remove the comment (at the beginning of the lines) to test each case:</p>

<p id="demo"></p>

<script>
let x = 5;
//x = 5 + 7;    // x.valueOf() is 12, typeof x is a number
//x = 5 + "7";  // x.valueOf() is 57, typeof x is a string
//x = "5" + 7;  // x.valueOf() is 57, typeof x is a string
//x = 5 - 7;    // x.valueOf() is -2, typeof x is a number
//x = 5 - "7";  // x.valueOf() is -2, typeof x is a number
//x = "5" - 7;  // x.valueOf() is -2, typeof x is a number
//x = 5 - "x";  // x.valueOf() is NaN, typeof x is a number

document.getElementById("demo").innerHTML = x.valueOf() + " " + typeof x;
</script>

</body>
</html>

At trække en streng fra en streng, gør det ikke generere en fejl, men returnerer NaN (ikke et tal):

Eksempel

"Hello" - "Dolly"    // returns NaN

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>Subtracting a string from a string, does not generate an error but returns NaN (Not a Number):</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello" - "Dolly";
</script>

</body>
</html>

Brug === Sammenligning

Sammenligningsoperatoren == konverterer altid (til matchende typer) før sammenligning.

Operatoren === fremtvinger sammenligning af værdier og type:

Eksempel

0 == "";        // true
1 == "1";       // true
1 == true;      // true

0 === "";       // false
1 === "1";      // false
1 === true;     
// false

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparisons</h2>

<p>Remove the comment (at the beginning of each line) to test each case:</p>

<p id="demo"></p>

<script>
let x;
//x = (0 == "");   // true
//x = (1 == "1");  // true
//x = (1 == true);   // true
//x = (0 === "");  // false
//x = (1 === "1");   // false
//x = (1 === true);  // false
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Brug parameterstandarder

Hvis en funktion kaldes med et manglende argument, værdien af det manglende argument er sat til udefineret.

Udefinerede værdier kan bryde din kode. Det er en god vane at tildele standard værdier til argumenter.

Eksempel

function myFunction(x, y) {
    if (y === undefined) {
      y = 0;
     }
}

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>Setting a default value to a function parameter.</p>
<p id="demo"></p>

<script>
function myFunction(x, y) {
  if (y === undefined) {
    y = 0;
  }  
  return x * y;
}
document.getElementById("demo").innerHTML = myFunction(4);
</script>

</body>
</html>

ECMAScript 2015 tillader standardparametre i funktionsdefinitionen:

function (a=1, b=1) { /*function code*/  }

Læs mere om funktionsparametre og argumenter på Funktionsparametre

Afslut dine switches med standardindstillinger

Afslut altid dine switch-sætninger med en standard. Også selvom du tror der er intet behov for det.

Eksempel

switch (new Date().getDay()) {
   
case 0:
      day = "Sunday";
      break;
  case 1:
      day = "Monday";
      break;
  case 2:
    day = "Tuesday";
     break;
   
case 3:
    day = "Wednesday";
      break;
   
case 4:
    day = "Thursday";
     break;
  case 5:
      day = "Friday";
      break;
  case 6:
    day = "Saturday";
      break;
  default:
    day = 
 "Unknown";
}

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
let day;
switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case  6:
    day = "Saturday";
    break;
  default:
     day = "unknown";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>

</body>
</html>

Undgå tal, streng og boolesk som objekter

Behandl altid tal, strenge eller booleaner som primitive værdier. Ikke som genstande.

Erklærer disse typer som objekter, sænker udførelseshastigheden, og giver grimme bivirkninger:

Eksempel

let x = "John";             
let y = new String("John");
(x === y) // is false because x is a string and y is an object.

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Objects</h2>
<p>Never create strings as objects.</p>
<p>Strings and objects cannot be safely compared.</p>

<p id="demo"></p>

<script>
let x = "John";        // x is a string
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x === y);
</script>

</body>
</html>

Eller endnu værre:

Eksempel

let x = new String("John");             
let y = new String("John");
(x == y) // is false because you cannot compare objects.

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Objects</h2>
<p>Never create strings as objects.</p>
<p>JavaScript cannot compare objects.</p>

<p id="demo"></p>

<script>
let x = new String("John"); 
let y = new String("John");
document.getElementById("demo").innerHTML = (x == y);
</script>

</body>
</html>

Undgå at bruge eval()

Funktionen eval() bruges til at køre tekst som kode. I næsten alle tilfælde er det burde ikke være nødvendigt at bruge det.

Fordi det gør det muligt at køre vilkårlig kode, repræsenterer det også en sikkerhed problem.