JavaScript no cliente e DOM

Valores

const fixa a ligação, não o objeto; let e const têm âmbito de bloco, var de função.
'8' + 1 é '81'; '8' - 1 é 7. === não converte; [1] === [1] é falso (referências distintas).
Number('8x') é NaN; parseInt('8x', 10) é 8. Entrada inteira completa: rejeita vazio, converte, confirma Number.isInteger e limites.
Falsos: 0, '', null, undefined, NaN, false. Arrays e objetos vazios são verdadeiros. || substitui falsos; ?? só null/undefined (quantidade 0 válida pede ??).

for...of dá valores; for...in dá nomes de propriedades.
map(f) passa a função; map(f()) passa o resultado da chamada. Arrow com chavetas precisa de return.
sort sem comparador ordena como texto ([25, 3, 8]). Números: sort((a, b) => a - b) sobre cópia.
Cópia superficial partilha objetos interiores: b[0].preco = x muda a[0].preco.

function contador(inicio) {
  let n = inicio;
  return () => ++n;
}
const a = contador(5),
  b = contador(0);
a();
a();
b();
a(); // 6 7 1 8

Cada chamada cria ambiente próprio. let no ciclo dá ligação por iteração; var partilhado deixa callbacks lerem o valor final.
livro.nome() tem this no recetor; const f = livro.nome perde-o (undefined em modo estrito). call executa com recetor; bind cria função ligada. Arrow herda this do local de criação.
Métodos de classe vivem no protótipo; dados do construtor, na instância. static pertence à classe; # restringe acesso.

querySelector dá o primeiro ou null; querySelectorAll dá NodeList estática. children é viva (só elementos); childNodes inclui texto.
closest sobe a partir do próprio elemento; dataset.id lê data-id; input.value é o valor atual, não o atributo inicial.
textContent escreve texto literal; innerHTML interpreta marcação (perigoso com entrada).
Inserir nó existente move-o; cloneNode(true) copia descendentes mas não listeners; nunca dupliques IDs.

target é onde começou; currentTarget é o elemento do listener em execução. Delegação: um listener no ul serve itens futuros via closest.
preventDefault cancela a ação nativa; stopPropagation trava o percurso. São independentes.
defer corre por ordem após a análise, antes de DOMContentLoaded; async corre ao acabar o download. setTimeout dá atraso mínimo, não hora exata.
Remover exige a mesma função. Cada bind cria função nova: guarda-a e reutiliza-a em removeEventListener, com igual tipo e captura. Repetir a mesma combinação não duplica o registo.