Mes bonnes pratiques – JavaScript

1. Désactiver le cache

Firefox :
Ouvrir les outils de développement -> Ouvrir les paramètres (F1) -> « Désactiver le cache HTTP (lorsque la boîte à outils est ouverte) »

Chrome :
Ouvrir les outils de développement -> Ouvrir les paramètres (F1) -> « Désactiver le cache (lorsque les outils de développement sont ouverts) »

2. Garder la console JS ouverte

Dans les outils de développement, ouvrez l’onglet Console et laissez-le ouvert : ainsi, l’étape 1 reste active et vous voyez en plus les erreurs réseau et JS.

Je recommande aussi ce plugin, qui affiche encore mieux les erreurs JS, au cas où l’on oublierait soi-même d’y jeter un œil :

3. JavaScript : la lecture obligatoire « You Don't Know JS »

• You Don't Know JS (1st Edition)
• Explique pourquoi il vaut mieux éviter this
• Explique pourquoi il se passe parfois des choses apparemment bizarres en JS (mots-clés : portée lexicale, closures)

4. Le point-virgule

• Toujours le mettre
• Il n’est pas obligatoire, mais il peut par exemple aider à éviter ce piège : Stack Overflow
• JavaScript insère automatiquement un point-virgule :

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

// JavaScript Interpretation:
return;
5;

5. Les opérateurs logiques && et ||

• En Java, a && b et a || b sont évalués selon l’algèbre de Boole. a et b doivent être des booléens.
• En JavaScript :
  • Avec a && b, b est renvoyé si a est vrai
  • Avec a || b, b est renvoyé si a est faux

On peut aussi enchaîner des expressions de cette façon, ce qui donne le if le plus court qui soit – du sucre syntaxique :

• isAdmin && showDeleteButton();
• (À proprement parler, ce n’est plus une instruction)

C’est aussi très utilisé pour les valeurs par défaut :

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

6. JavaScript passe-t-il par référence ou par valeur ?

En JavaScript, c’est intéressant. Exemple :

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

Produit la sortie suivante :

10
changed
unchanged

Si obj1 n’était pas du tout une référence, modifier obj1.item n’aurait aucun effet sur obj1 en dehors de la fonction.

Si l’argument était une véritable référence, tout changerait : num vaudrait 100, et obj2.item contiendrait « changed ». Au lieu de cela, num reste à 10 et obj2.item reste « unchanged ».

En réalité, l’élément est transmis par valeur. Mais ce qui est transmis par valeur est lui-même une référence. Techniquement, on parle de passage par partage (call-by-sharing).

En pratique, cela signifie que si vous modifiez le paramètre lui-même (comme pour num et obj2), cela n’a aucun effet sur l’objet d’origine passé à la fonction. En revanche, si vous modifiez les valeurs internes du paramètre, ces modifications sont conservées (comme pour obj1).