Bevált gyakorlataim – JavaScript

1. A cache kikapcsolása

Firefox:
Developer Tools megnyitása -> Beállítások megnyitása (F1) -> "Disable HTTP Cache (when toolbox is open)"

Chrome:
Developer Tools megnyitása -> Beállítások megnyitása (F1) -> "Disable cache (while DevTools is open)"

2. Tartsd nyitva a JS-konzolt

A Dev Toolsban nyisd meg a Console fület, és hagyd nyitva, hogy az 1. lépés érvényben maradjon, és emellett észrevedd a hálózati és JS-hibákat is.

Ajánlott ez a plugin is, amely még jobban megjeleníti a JS-hibákat, ha te magad megfeledkeznél a konzolról:

3. JavaScript: kötelező olvasmány a „You Don't Know JS”

• You Don't Know JS (1st Edition)
• Elmagyarázza, miért érdemes kerülni a this-t
• Elmagyarázza, miért történnek a JS-ben néha látszólag furcsa dolgok (kulcsszavak: lexical scope, closure-ök)

4. A pontosvessző

• Mindig tedd ki
• Nem kötelező, de segíthet például elkerülni ezt a csapdát: Stack Overflow
• A JavaScript automatikusan beszúr egy pontosvesszőt:

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

// JavaScript Interpretation:
return;
5;

5. A && és || logikai operátorok

• Javában az a && b és az a || b a Boole-algebra szerint értékelődik ki. Az a-nak és a b-nek booleannek kell lennie.
• JavaScriptben:
  • Az a && b esetén a b a visszatérési érték, ha az a true
  • Az a || b esetén a b a visszatérési érték, ha az a false

Így kifejezéseket is össze lehet kötni, ami lehetővé teszi a valaha volt legrövidebb if-utasítást – syntactic sugar:

• isAdmin && showDeleteButton();
• (Szigorúan véve ez már nem is utasítás)

Gyakran használják alapértelmezett értékekhez is:

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

6. A JavaScript pass-by-reference vagy pass-by-value?

JavaScriptben ez érdekes kérdés. Példa:

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

A kimenet a következő:

10
changed
unchanged

Ha az obj1 egyáltalán nem volna referencia, akkor az obj1.item módosítása semmilyen hatással nem lenne a függvényen kívüli obj1-re.

Ha az argumentum valódi referencia volna, akkor minden megváltozna: a num értéke 100 lenne, az obj2.item pedig „changed” lenne. Ehelyett a num 10 marad, az obj2.item pedig „unchanged”.

Valójában az átadott elem érték szerint adódik át. Csakhogy az, amit érték szerint átadunk, maga is egy referencia. Ennek a szakkifejezése: call-by-sharing.

A gyakorlatban ez azt jelenti: ha magát a paramétert módosítod (mint a num és az obj2 esetében), annak nincs hatása az eredeti objektumra, amelyet a függvénynek átadtál. Ha viszont a paraméter belső értékeit módosítod, ezek a változások megmaradnak (mint az obj1 esetében).