Le mie best practice – JavaScript

1. Disattivare la cache

Firefox:
Apri gli Strumenti di sviluppo -> Apri le impostazioni (F1) -> "Disattiva cache HTTP (quando la cassetta degli attrezzi è aperta)"

Chrome:
Apri DevTools -> Apri le impostazioni (F1) -> "Disable cache (while DevTools is open)"

2. Tenere aperta la console JS

Nei DevTools apri la scheda Console e tienila aperta: così il passo 1 resta attivo e in più ti accorgi degli errori di rete e di JS.

Consiglio anche questo plugin, che mostra gli errori JS in modo ancora più evidente, nel caso ti dimenticassi di farlo:

3. JavaScript: lettura obbligatoria «You Don't Know JS»

• You Don't Know JS (1st Edition)
• Spiega perché è meglio evitare this
• Spiega perché in JS a volte succedono cose apparentemente strane (parole chiave: lexical scope, closure)

4. Il punto e virgola

• Mettilo sempre
• Non è obbligatorio, ma può aiutare, per esempio, a evitare questa trappola: Stack Overflow
• JavaScript inserisce automaticamente un punto e virgola:

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

// JavaScript Interpretation:
return;
5;

5. Gli operatori logici && e ||

• In Java a && b e a || b vengono valutati secondo l’algebra booleana. a e b devono essere booleani.
• In JavaScript:
  • con a && b viene restituito b se a è true
  • con a || b viene restituito b se a è false

In questo modo si possono concatenare anche espressioni, ottenendo l’if più corto in assoluto: syntactic sugar.

• isAdmin && showDeleteButton();
• (A rigore, questo non è più uno statement)

Si usa spesso anche per i valori di default:

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

6. JavaScript è pass-by-reference o pass-by-value?

In JavaScript la questione è interessante. Esempio:

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

Produce il seguente output:

10
changed
unchanged

Se obj1 non fosse affatto un riferimento, modificare obj1.item non avrebbe alcun effetto su obj1 fuori dalla funzione.

Se l’argomento fosse un vero riferimento, cambierebbe tutto: num varrebbe 100 e obj2.item conterrebbe «changed». Invece num resta 10 e obj2.item resta «unchanged».

In realtà l’elemento viene passato per valore. Solo che ciò che viene passato per valore è a sua volta un riferimento. Tecnicamente questo si chiama call-by-sharing.

In pratica significa che, se modifichi il parametro stesso (come con num e obj2), ciò non ha effetto sull’oggetto originale passato alla funzione. Se invece modifichi i valori interni del parametro, quelle modifiche si propagano (come con obj1).