Best Practices för JavaScript


Innehållsförteckning

    Visa innehållsförteckning


Undvik globala variabler, undvik new, undvik ==, undvik eval()


Undvik globala variabler

Minimera användningen av globala variabler.

Detta inkluderar alla datatyper, objekt och funktioner.

Globala variabler och funktioner kan skrivas över av andra skript.

Använd lokala variabler istället och lär dig hur du använder dem stängningar.


Deklarera alltid lokala variabler

Alla variabler som används i en funktion ska deklareras som lokala variabler.

Lokala variabler måste deklareras med var, nyckelordet let eller const, annars blir de globala variabler.

Strikt läge tillåter inte odeklarerade variabler.


Deklarationer överst

Det är en bra kodningspraxis att placera alla deklarationer överst i varje skript eller funktion.

Det här kommer att:

  • Ge renare kod

  • Ge en enda plats att leta efter lokala variabler

  • Gör det lättare att undvika oönskade (underförstådda) globala variabler

  • Minska risken för oönskade omdeklarationer

// 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;

Detta gäller även loopvariabler:

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


Initiera variabler

Det är en bra kodningspraxis att initiera variabler när du deklarerar dem.

Det här kommer att:

  • Ge renare kod

  • Ange en enda plats för att initiera variabler

  • Undvik odefinierade värden

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

Att initiera variabler ger en uppfattning om den avsedda användningen (och avsedd datatyp).


Deklarera objekt med const

Att deklarera objekt med const kommer att förhindra oavsiktlig typändring:

Exempel

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

Deklarera matriser med const

Att deklarera arrayer med const förhindrar alla oavsiktliga förändringar av typ:

Exempel

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

Använd inte nytt objekt()

  • Använd "" istället för new String()

  • Använd 0 istället för new Number()

  • Använd false istället för new Boolean()

  • Använd {} istället för new Object()

  • Använd [] istället för new Array()

  • Använd /()/ istället för new RegExp()

  • Använd funktion(){} istället för new Function()

Exempel

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

Prova själv →

<!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>

Se upp för automatiska typomvandlingar

JavaScript är löst skrivet.

En variabel kan innehålla alla datatyper.

En variabel kan ändra sin datatyp:

Exempel

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

Prova själv →

<!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>

Tänk på att siffror av misstag kan konverteras till strängar eller NaN (Inte en Siffra).

När du gör matematiska operationer kan JavaScript konvertera tal till strängar:

Exempel

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

Prova själv →

<!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>

Att subtrahera en sträng från en sträng, gör det inte genererar ett fel men returnerar NaN (inte ett nummer):

Exempel

"Hello" - "Dolly"    // returns NaN

Prova själv →

<!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> 

Använd === Jämförelse

Jämförelseoperatorn == konverterar alltid (till matchningstyper) före jämförelse.

Operatorn === tvingar fram jämförelser av värden och typ:

Exempel

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

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

Prova själv →

<!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>


Använd standardinställningar för parameter

Om en funktion anropas med ett saknat argument, värdet på det saknade argument är satt till odefinierad.

Odefinierade värden kan bryta din kod. Det är en god vana att tilldela standard värden till argument.

Exempel

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

Prova själv →

<!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 tillåter standardparametrar i funktionsdefinitionen:

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

Läs mer om funktionsparametrar och argument på Funktionsparametrar


Avsluta dina switchar med standardinställningar

Avsluta alltid dina switch-satser med en standard. Även om du tror att det finns inget behov av det.

Exempel

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";
}

Prova själv →

<!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>

Undvik nummer, sträng och Boolean som objekt

Behandla alltid siffror, strängar eller booleaner som primitiva värden. Inte som föremål.

Deklarera dessa typer som objekt, saktar ner exekveringshastigheten, och ger otäcka biverkningar:

Exempel

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

Prova själv →

<!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 ännu värre:

Exempel

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

Prova själv →

<!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>

Undvik att använda eval()

Funktionen eval() används för att köra text som kod. I nästan alla fall är det borde inte vara nödvändigt att använda den.

Eftersom den tillåter att godtycklig kod körs, representerar den också en säkerhet problem.