Minhas boas práticas – JavaScript

1. Desativar o cache

Firefox:
Abrir as ferramentas de desenvolvimento -> Abrir as configurações (F1) -> "Desativar cache HTTP (quando a caixa de ferramentas estiver aberta)"

Chrome:
Abrir o DevTools -> Abrir as configurações (F1) -> "Disable cache (while DevTools is open)"

2. Manter o console JS aberto

No DevTools, abra a aba Console e deixe-a aberta, para que o passo 1 continue valendo e para que você perceba os erros de rede e de JS.

Também vale a pena este plugin, que mostra os erros de JS de forma ainda mais clara, para quando você mesmo se esquecer de olhar:

3. JavaScript: leitura obrigatória, “You Don't Know JS”

• You Don't Know JS (1st Edition)
• Explica por que é melhor evitar this
• Explica por que, às vezes, coisas aparentemente estranhas acontecem em JS (palavras-chave: escopo léxico, closures)

4. O ponto e vírgula

• Use sempre
• Não é obrigatório, mas pode ajudar, por exemplo, a evitar esta armadilha: Stack Overflow
• O JavaScript insere um ponto e vírgula automaticamente:

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

// JavaScript Interpretation:
return;
5;

5. Operadores lógicos && e ||

• Em Java, a && b e a || b são avaliados segundo a álgebra booleana. a e b precisam ser booleanos.
• Em JavaScript:
  • Em a && b, b é retornado se a for true
  • Em a || b, b é retornado se a for false

Também dá para encadear expressões assim, o que permite o if mais curto que existe – puro açúcar sintático:

• isAdmin && showDeleteButton();
• (A rigor, isso já nem é mais uma instrução)

Isso também é muito usado para valores padrão:

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

6. JavaScript passa por referência ou por valor?

Em JavaScript, isso é curioso. Exemplo:

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

Isso produz a seguinte saída:

10
changed
unchanged

Se obj1 não fosse uma referência, alterar obj1.item não teria nenhum efeito sobre o obj1 fora da função.

Se o argumento fosse uma referência de verdade, tudo mudaria: num seria 100 e obj2.item conteria “changed”. Em vez disso, num continua valendo 10 e obj2.item continua “unchanged”.

Na verdade, o item é passado por valor. Só que aquilo que é passado por valor é, por sua vez, uma referência. Tecnicamente, isso se chama call-by-sharing.

Na prática, isso significa: se você altera o próprio parâmetro (como em num e obj2), isso não afeta o objeto original que foi passado para a função. Mas, se você altera os valores internos do parâmetro, essas mudanças são mantidas (como em obj1).