Moje osvědčené postupy – JavaScript

1. Vypnout cache

Firefox:
Otevřít Developer Tools -> Otevřít nastavení (F1) -> "Disable HTTP Cache (when toolbox is open)"

Chrome:
Otevřít Developer Tools -> Otevřít nastavení (F1) -> "Disable cache (while DevTools is open)"

2. Mějte JS konzoli stále otevřenou

V DevTools otevřete kartu Konzole a nechte ji otevřenou, aby krok 1 zůstal v platnosti a abyste navíc viděli chyby sítě a JS.

Doporučuji také tento plugin, který chyby JS zobrazuje ještě lépe, když na to sami zapomenete:

3. JavaScript: povinná četba „You Don't Know JS“

• You Don't Know JS (1st Edition)
• Vysvětluje, proč se vyhýbat this
• Vysvětluje, proč se v JS občas dějí zdánlivě podivné věci (klíčová slova: lexikální rozsah, closures)

4. Středník

• Pište ho vždy
• Není povinný, ale může vám třeba pomoct vyhnout se této pasti: Stack Overflow
• JavaScript středník doplňuje automaticky:

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

// JavaScript Interpretation:
return;
5;

5. Logické operátory && a ||

• V Javě se a && b a a || b vyhodnocují podle Booleovy algebry. a a b musí být booleovské hodnoty.
• V JavaScriptu:
  • U a && b se vrátí b, pokud je a pravdivé
  • U a || b se vrátí b, pokud je a nepravdivé

Takto lze spojovat i výrazy, což umožňuje vůbec nejkratší if – syntaktický cukr:

• isAdmin && showDeleteButton();
• (Přísně vzato už to není příkaz, ale výraz)

Často se to používá i pro výchozí hodnoty:

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

6. Předává JavaScript odkazem, nebo hodnotou?

V JavaScriptu je to zajímavé. Příklad:

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

Vypíše tento výstup:

10
changed
unchanged

Kdyby obj1 vůbec nebyl odkaz, změna obj1.item by neměla žádný vliv na obj1 mimo funkci.

Kdyby byl argument skutečný odkaz, změnilo by se všechno: num by bylo 100 a obj2.item by obsahovalo „changed“. Místo toho zůstává num 10 a obj2.item zůstává „unchanged“.

Ve skutečnosti se předávaný prvek předává hodnotou. Jenže to, co se předává hodnotou, je samo odkazem. Technicky se tomu říká call-by-sharing (volání sdílením).

V praxi to znamená: když změníte samotný parametr (jako u num a obj2), nemá to žádný vliv na původní objekt, který byl do funkce předán. Když ale změníte vnitřní hodnoty parametru, tyto změny se projeví (jako u obj1).