JavaScript: el lenguaje de la web

Los primitivos son string, number, bigint, boolean, undefined, symbol y null. Son inmutables: texto.toUpperCase() no cambia texto, sino que devuelve un texto nuevo. Y al asignarlos a otra variable, se copian.

Todo lo demás es un objeto: los objetos literales, los arrays, las funciones, las fechas. Una variable no guarda el objeto en sí, sino una referencia a él. Si dos variables apuntan al mismo objeto y cambias una propiedad desde una de ellas, la otra también lo «ve». Por eso const impide reasignar la variable, pero no modificar el objeto.

Cuando mezclas tipos, JavaScript intenta convertirlos: es la coerción. "5" * 2 da 10, porque * solo trabaja con números, pero "5" + 2 da "52", porque + también une textos y lo prefiere. En un if, cualquier valor se convierte en booleano: false, 0, "", null, undefined y NaN son falsy (junto con algún caso raro como 0n); todo lo demás es truthy, incluidos "0" y [].

El operador == compara aplicando coerción, con reglas difíciles de recordar: 0 == "" es true. El operador === exige que coincidan el tipo y el valor. Con objetos, ambos comparan referencias y no contenido: {} === {} es false, porque son dos objetos distintos.

En JavaScript las funciones son ciudadanas de primera clase: puedes guardarlas en una variable, pasarlas como argumento (como haces con addEventListener o map) y devolverlas desde otra función. Hay tres formas habituales de escribirlas: la declaración function, la expresión asignada a una variable y la función flecha (x) => x * 2.

Las flechas son más cortas y no tienen su propio this: usan el del lugar donde se escribieron, lo que las hace ideales como callbacks dentro de métodos. Las declaraciones con function se elevan (hoisting): puedes llamarlas antes de la línea donde aparecen.

Cuando defines una función dentro de otra, la interna puede leer y modificar las variables de la externa. Lo sorprendente es que las sigue recordando después de que la externa haya terminado. Esa combinación de una función y las variables que recuerda se llama closure (en español, a veces, «clausura»).

Los closures están por todas partes: cada callback que usa una variable de fuera es uno. Sirven para crear estado privado, que nadie puede tocar desde fuera, y para fabricar funciones ya configuradas, como un contador o un formateador de moneda.

Un objeto es una colección de propiedades: pares de clave y valor, en los que el valor puede ser una función (un método). Lo creas con un literal ({ nombre: "Ana" }), lees sus propiedades con obj.clave u obj["clave"] y lo desestructuras con const { nombre } = obj.

Además, cada objeto está enlazado a otro, su prototipo. Si pides una propiedad que el objeto no tiene, JavaScript la busca en su prototipo, luego en el prototipo de este, y así hasta llegar a null: es la cadena de prototipos. Por eso cualquier array tiene map o push sin que los definas: viven en Array.prototype.

Una class agrupa el constructor, que prepara cada objeto nuevo, y los métodos que compartirán todos. Con new creas una instancia; con extends heredas de otra clase y con super llamas a la versión del padre. Los métodos se guardan una sola vez en el prototipo, no se copian en cada objeto.

Las clases modernas admiten campos privados con #, inaccesibles de verdad desde fuera; miembros static, que pertenecen a la clase y no a cada instancia; y get y set para propiedades calculadas.

Un callback es una función que entregas a otra para que la ejecute más tarde: cuando el usuario hace clic, cuando vence un temporizador o cuando termina de leerse un archivo. Es el mecanismo original de la asincronía en JavaScript y sigue siendo el de los eventos (addEventListener).

El problema llega cuando cada paso depende del anterior: los callbacks se anidan unos dentro de otros y el código crece hacia la derecha, el famoso callback hell. Además, cada nivel tiene que gestionar sus propios errores; en Node.js, la convención era que el primer argumento del callback fuera el error.

Una promesa (Promise) empieza pendiente y acaba cumplida, con un valor, o rechazada, con un error. Con .then() dices qué hacer con el valor y con .catch(), qué hacer si falla. Como .then() devuelve otra promesa, los pasos se encadenan en vertical y un solo .catch() al final recoge el error de cualquiera de ellos.

Para coordinar varias a la vez existen Promise.all(), que espera a todas y falla en cuanto falla una; Promise.allSettled(), que espera a todas y te cuenta cómo acabó cada una; y Promise.race() y Promise.any(). fetch devuelve una promesa, igual que casi todas las APIs modernas.

Una función marcada con async siempre devuelve una promesa, y dentro de ella await pausa esa función hasta que la promesa se resuelve, sin bloquear nada más: mientras tanto, el event loop sigue atendiendo clics y otras tareas. El código se lee de arriba abajo, como si fuera síncrono, y los errores se capturan con un try/catch normal.

No es un mecanismo distinto, sino una forma más cómoda de usar promesas: puedes hacer await de cualquier promesa y combinarlo con Promise.all(). En los módulos ES puedes usar await incluso fuera de una función, en el nivel superior del archivo (top-level await).

El motor ejecuta el código en la pila de llamadas (call stack): cada función que se llama se apila y, al terminar, se desapila. Las operaciones lentas, como temporizadores, red o disco, las gestiona el entorno (el navegador o Node.js) fuera de la pila. Cuando terminan, su callback no se ejecuta en el acto: se pone en una cola a esperar su turno.

Hay dos colas principales. La de microtareas recibe los .then() de las promesas, lo que viene después de cada await y queueMicrotask(). La de tareas (o macrotareas) recibe setTimeout, los eventos del usuario y la entrada/salida. El event loop repite un ciclo: cuando la pila queda vacía, ejecuta todas las microtareas pendientes y después toma una tarea. Por eso un .then() siempre se adelanta a un setTimeout(…, 0).

Con export marcas lo que un archivo ofrece: tantas exportaciones con nombre como quieras (export function sumar…) y, como mucho, una exportación por defecto (export default). Con import las traes desde otro archivo: import { sumar } from "./mates.js". Lo que no exportas queda privado al módulo.

Los import son estáticos: van al principio del archivo y se resuelven antes de ejecutar nada. Eso permite a los bundlers saber qué código no se usa y quitarlo (tree shaking). En el navegador, los módulos se activan con <script type="module">; en Node.js, con la extensión .mjs o con "type": "module" en el package.json.

import(), con paréntesis, se puede llamar en cualquier punto del código, incluso dentro de un if o de un manejador de eventos. Devuelve una promesa que se cumple con el módulo ya cargado, así que se combina muy bien con await.

Los bundlers convierten cada import() en un archivo aparte (un chunk) que solo se descarga cuando se ejecuta esa línea. Así, el editor de imágenes o la librería de gráficos no pesan en la carga inicial de la página: es la base del code splitting, que verás en el módulo de rendimiento.