Mina best practices – JavaScript

1. Inaktivera cachen

Firefox:
Öppna utvecklarverktygen -> Öppna inställningarna (F1) -> "Inaktivera HTTP-cache (när verktygslådan är öppen)"

Chrome:
Öppna utvecklarverktygen -> Öppna inställningarna (F1) -> "Disable cache (while DevTools is open)"

2. Håll JS-konsolen öppen

Öppna fliken Konsol i utvecklarverktygen och låt den vara öppen, så att steg 1 fortsätter att gälla och du dessutom ser fel i nätverket och i JS.

Det här pluginet rekommenderas också – det visar JS-fel ännu tydligare om du själv skulle glömma att titta:

3. JavaScript: obligatorisk läsning – ”You Don't Know JS”

• You Don't Know JS (1st Edition)
• Förklarar varför this bör undvikas
• Förklarar varför till synes konstiga saker ibland händer i JS (nyckelord: lexical scope, closures)

4. Semikolonet

• Sätt alltid ut det
• Det är inte obligatoriskt, men kan t.ex. hjälpa dig att undvika den här fallgropen: Stack Overflow
• JavaScript sätter automatiskt in ett semikolon:

// you want to return 5 and have ugly formatting:
return
5

// JavaScript Interpretation:
return;
5;

5. Logiska operatorer && och ||

• I Java utvärderas a && b och a || b enligt boolesk algebra. a och b måste vara booleska värden.
• I JavaScript:
  • Vid a && b returneras b om a är sant
  • Vid a || b returneras b om a är falskt

Även uttryck kan kopplas ihop så här, vilket ger den kortaste if-satsen som finns – syntaktiskt socker:

• isAdmin && showDeleteButton();
• (Strängt taget är det inte längre en sats)

Det används också gärna för standardvärden:

• let sendNewsletter = form.getNewsletterOptIn() || false;

6. Är JavaScript pass-by-reference eller pass-by-value?

Här blir JavaScript intressant. Exempel:

function changeStuff(a, b, c) {
    a = a * 10;
    b.item = "changed";
    c = {item: "changed"};
}

var num = 10;
var obj1 = {item: "unchanged"};
var obj2 = {item: "unchanged"};

changeStuff(num, obj1, obj2);

console.log(num);
console.log(obj1.item);
console.log(obj2.item);

Ger följande utdata:

10
changed
unchanged

Om obj1 inte vore en referens alls skulle en ändring av obj1.item inte påverka obj1 utanför funktionen över huvud taget.

Om argumentet vore en äkta referens skulle allt ändras: num skulle vara 100 och obj2.item skulle innehålla ”changed”. I stället förblir num 10 och obj2.item förblir ”unchanged”.

I själva verket skickas elementet som ett värde. Men det som skickas som värde är i sig en referens. Tekniskt kallas detta call-by-sharing.

I praktiken betyder det: Om du ändrar själva parametern (som med num och obj2) påverkar det inte det ursprungliga objektet som skickades in i funktionen. Ändrar du däremot parameterns interna värden slår ändringarna igenom (som med obj1).