Οι βέλτιστες πρακτικές μου – JavaScript

1. Απενεργοποίηση της cache

Firefox:
Άνοιξε τα Developer Tools -> άνοιξε τις ρυθμίσεις (F1) -> "Disable HTTP Cache (when toolbox is open)"

Chrome:
Άνοιξε τα Developer Tools -> άνοιξε τις ρυθμίσεις (F1) -> "Disable cache (while DevTools is open)"

2. Κράτα την κονσόλα JS ανοιχτή

Στα Dev Tools άνοιξε την καρτέλα Console και κράτα την ανοιχτή, ώστε το βήμα 1 να παραμένει σε ισχύ και επιπλέον να βλέπεις τα σφάλματα δικτύου και JS.

Συνιστάται επίσης αυτό το plugin, που εμφανίζει τα σφάλματα JS ακόμη καλύτερα, για όταν ξεχνάς κι εσύ ο ίδιος να ρίξεις μια ματιά:

3. JavaScript: απαραίτητο ανάγνωσμα το «You Don't Know JS»

• You Don't Know JS (1st Edition)
• Εξηγεί γιατί πρέπει να αποφεύγεται το this
• Εξηγεί γιατί στη JS συμβαίνουν μερικές φορές φαινομενικά παράξενα πράγματα (λέξεις-κλειδιά: lexical scope, closures)

4. Το ερωτηματικό

• Βάζε το πάντα
• Δεν είναι υποχρεωτικό, αλλά μπορεί π.χ. να σε βοηθήσει να αποφύγεις αυτή την παγίδα: Stack Overflow
• Η JavaScript προσθέτει αυτόματα ερωτηματικό:

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

// JavaScript Interpretation:
return;
5;

5. Οι λογικοί τελεστές && και ||

• Στη Java, τα a && b και a || b αποτιμώνται σύμφωνα με την άλγεβρα Boole. Τα a και b πρέπει να είναι booleans.
• Στη JavaScript:
  • Στο a && b επιστρέφεται το b αν το a είναι true
  • Στο a || b επιστρέφεται το b αν το a είναι false

Έτσι μπορούν να συνδεθούν και εκφράσεις, κάτι που επιτρέπει το συντομότερο if-statement που υπάρχει – syntactic sugar:

• isAdmin && showDeleteButton();
• (Αυστηρά μιλώντας, αυτό δεν είναι πια statement)

Χρησιμοποιείται συχνά και για προεπιλεγμένες τιμές:

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

6. Η JavaScript είναι pass-by-reference ή pass-by-value;

Στη JavaScript το θέμα έχει ενδιαφέρον. Παράδειγμα:

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

Παράγει την εξής έξοδο:

10
changed
unchanged

Αν το obj1 δεν ήταν καθόλου αναφορά, τότε η αλλαγή του obj1.item δεν θα είχε καμία επίδραση στο obj1 έξω από τη συνάρτηση.

Αν το όρισμα ήταν πραγματική αναφορά, τότε θα άλλαζαν όλα: το num θα ήταν 100 και το obj2.item θα περιείχε «changed». Αντίθετα, το num μένει 10 και το obj2.item μένει «unchanged».

Στην πραγματικότητα, το στοιχείο περνιέται κατ’ αξία. Όμως αυτό που περνιέται κατ’ αξία είναι το ίδιο μια αναφορά. Τεχνικά, αυτό ονομάζεται call-by-sharing.

Στην πράξη αυτό σημαίνει: αν αλλάξεις την ίδια την παράμετρο (όπως με τα num και obj2), αυτό δεν επηρεάζει το αρχικό αντικείμενο που πέρασε στη συνάρτηση. Αν όμως αλλάξεις τις εσωτερικές τιμές της παραμέτρου, οι αλλαγές αυτές διατηρούνται (όπως με το obj1).