Moje dobre praktyki – JavaScript

1. Wyłącz cache

Firefox:
Otwórz Narzędzia dla programistów -> otwórz Ustawienia (F1) -> „Disable HTTP Cache (when toolbox is open)”

Chrome:
Otwórz DevTools -> otwórz Ustawienia (F1) -> „Disable cache (while DevTools is open)”

2. Trzymaj konsolę JS otwartą

W DevTools otwórz zakładkę Konsola i trzymaj ją otwartą, żeby krok 1. pozostał aktywny i żeby od razu widzieć błędy sieciowe i błędy JS.

Polecam też tę wtyczkę, która jeszcze lepiej pokazuje błędy JS, gdy samemu zapomni się o konsoli:

3. JavaScript: lektura obowiązkowa – „You Don't Know JS”

• You Don't Know JS (1st Edition)
• Wyjaśnia, dlaczego warto unikać this
• Wyjaśnia, dlaczego w JS dzieją się czasem pozornie dziwne rzeczy (hasła: lexical scope, domknięcia)

4. Średnik

• Zawsze go stawiaj
• Nie jest obowiązkowy, ale pomaga np. ominąć tę pułapkę: Stack Overflow
• JavaScript sam wstawia średnik:

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

// JavaScript Interpretation:
return;
5;

5. Operatory logiczne && i ||

• W Javie a && b i a || b są obliczane zgodnie z algebrą Boole’a. a i b muszą być wartościami logicznymi.
• W JavaScripcie:
  • Przy a && b zwracane jest b, jeśli a jest true
  • Przy a || b zwracane jest b, jeśli a jest false

W ten sposób można łączyć także wyrażenia, co daje najkrótszą instrukcję if w historii – lukier składniowy:

• isAdmin && showDeleteButton();
• (Ściśle rzecz biorąc, to już nie jest instrukcja)

Często używa się tego także do wartości domyślnych:

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

6. Czy JavaScript przekazuje przez referencję, czy przez wartość?

W JavaScripcie to ciekawa sprawa. Przykład:

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

Wynik jest następujący:

10
changed
unchanged

Gdyby obj1 w ogóle nie był referencją, zmiana obj1.item nie miałaby żadnego wpływu na obj1 poza funkcją.

Gdyby argument był prawdziwą referencją, zmieniłoby się wszystko: num wynosiłoby 100, a obj2.item zawierałoby „changed”. Zamiast tego num pozostaje równe 10, a obj2.item nadal ma wartość „unchanged”.

W rzeczywistości przekazywany element jest przekazywany przez wartość. Tyle że to, co jest przekazywane przez wartość, samo jest referencją. Technicznie nazywa się to call-by-sharing.

W praktyce oznacza to: jeśli zmieniasz sam parametr (jak w przypadku num i obj2), nie wpływa to na oryginalny obiekt przekazany do funkcji. Jeśli natomiast zmieniasz wewnętrzne wartości parametru, te zmiany są widoczne na zewnątrz (jak w przypadku obj1).