Mis buenas prácticas – JavaScript

1. Desactivar la caché

Firefox:
Abrir las herramientas para desarrolladores -> Abrir la configuración (F1) -> "Disable HTTP Cache (when toolbox is open)"

Chrome:
Abrir las DevTools -> Abrir la configuración (F1) -> "Disable cache (while DevTools is open)"

2. Mantener abierta la consola de JS

Abre la pestaña Consola en las DevTools y déjala abierta, para que el paso 1 siga teniendo efecto y, además, te enteres de los errores de red y de JS.

También es recomendable este plugin, que muestra los errores de JS todavía mejor, por si alguna vez se te olvida:

3. JavaScript: lectura obligatoria, «You Don't Know JS»

• You Don't Know JS (1st Edition)
• Explica por qué conviene evitar this
• Explica por qué en JS a veces pasan cosas aparentemente raras (palabras clave: ámbito léxico, closures)

4. El punto y coma

• Ponlo siempre
• No es obligatorio, pero puede ayudar, por ejemplo, a evitar esta trampa: Stack Overflow
• JavaScript inserta automáticamente un punto y coma:

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

// JavaScript Interpretation:
return;
5;

5. Operadores lógicos && y ||

• En Java, a && b y a || b se evalúan según el álgebra de Boole. a y b tienen que ser booleanos.
• En JavaScript:
  • Con a && b se devuelve b si a es true
  • Con a || b se devuelve b si a es false

Así también se pueden encadenar expresiones, lo que permite el if más corto que existe (azúcar sintáctico):

• isAdmin && showDeleteButton();
• (Estrictamente hablando, ya no es una sentencia)

También se usa mucho para valores por defecto:

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

6. ¿JavaScript pasa por referencia o por valor?

En JavaScript es interesante. Ejemplo:

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

Produce la siguiente salida:

10
changed
unchanged

Si obj1 no fuera una referencia en absoluto, cambiar obj1.item no tendría ningún efecto sobre el obj1 de fuera de la función.

Si el argumento fuera una referencia de verdad, todo cambiaría: num valdría 100 y obj2.item contendría «changed». En cambio, num se queda en 10 y obj2.item sigue siendo «unchanged».

En realidad, el elemento se pasa por valor. Sin embargo, lo que se pasa por valor es, a su vez, una referencia. Técnicamente, esto se denomina call-by-sharing (paso por compartición).

En la práctica, esto significa que si cambias el propio parámetro (como con num y obj2), no afecta al objeto original que se pasó a la función. Pero si cambias los valores internos del parámetro, esos cambios sí se mantienen (como con obj1).