JavaScript

¿Qué es JavaScript?

JavaScript es un lenguaje de programación que se ejecuta dentro de un entorno anfitrión y te permite controlar lo que sucede en una página. HTML proporciona la estructura, CSS se encarga de la presentación y JavaScript aporta el comportamiento. Cuando se abre un menú, se valida un formulario, una página carga datos nuevos sin refrescarse o un juego responde a tu teclado, JavaScript es quien hace el trabajo.

Es un lenguaje de alto nivel, con tipado dinámico y multiparadigma. En términos sencillos, esto significa que no gestionas la memoria manualmente, no declaras los tipos de antemano y puedes escribir en un estilo orientado a objetos, funcional o imperativo según lo requiera el problema.

El lenguaje fue creado en 1995 para una única tarea —hacer que las páginas web fueran un poco interactivas— y logró superar esa limitación por completo. Hoy en día, la misma sintaxis impulsa servidores, aplicaciones móviles, herramientas de CLI y aplicaciones de escritorio. Aprenderlo es una de las inversiones con mayor retorno que puedes hacer en el desarrollo web.

Dónde se ejecuta JavaScript

JavaScript es el lenguaje. Un runtime es el entorno que lo ejecuta. El runtime más conocido es el navegador, pero está lejos de ser el único.

• Los navegadores incluyen un motor de JavaScript (V8 en Chrome, SpiderMonkey en Firefox, JavaScriptCore en Safari) además de APIs del host como el DOM, fetch, temporizadores y almacenamiento.
• Node.js, Deno y Bun ejecutan JavaScript en el servidor con APIs para archivos, redes y procesos.
• Los runtimes embebidos ejecutan JavaScript en aplicaciones móviles, aplicaciones de escritorio, bases de datos e incluso microcontroladores.

El lenguaje en sí está estandarizado como ECMAScript. El DOM, fetch y console no forman parte del lenguaje; son APIs que el runtime proporciona. Tener clara esta distinción explica por qué el mismo código funciona en un entorno y no en otro.

Variables: let, const y var

Una variable es una referencia con nombre a un valor. El JavaScript moderno tiene tres formas de crear una, pero solo necesitas dos.

// app.js
const name = "Ada";   // cannot be reassigned
let score = 0;        // can be reassigned
score = score + 10;

// var is the legacy form — avoid it in new code
var old = true;

Usa const por defecto. Esto no hace que el valor sea inmutable — aún puedes mutar el contenido de un objeto o array const — solo evita que el nombre se vuelva a vincular a un valor diferente. Usa let cuando un valor cambie genuinamente, como un contador o un acumulador. Recurre a var únicamente cuando estés leyendo código antiguo.

Tipos de datos

JavaScript tiene un conjunto pequeño de tipos primitivos además de los objetos.

El operador typeof te indica con qué estás trabajando. Ten cuidado con dos peculiaridades famosas: typeof null es "object" (un error histórico mantenido por compatibilidad) y typeof una función es "function" a pesar de que las funciones son objetos.

Funciones

Las funciones son bloques de lógica reutilizables y, en JavaScript, son valores. Puedes almacenarlas en variables, pasarlas como argumentos y devolverlas desde otras funciones.

// greet.js
function greet(name) {
  return `Hello, ${name}!`;
}

const add = (a, b) => a + b;

const shout = (text) => text.toUpperCase();

La forma de declaración function tiene hoisting, por lo que puede ser llamada antes de que aparezca en el código. Las funciones de flecha (=>) son más cortas, no tienen su propio this y son ideales para los callbacks. Cuando una función contiene una sola expresión, se pueden omitir el cuerpo y el return.

Las funciones también pueden tener parámetros por defecto y aceptar un número variable de argumentos mediante la sintaxis rest:

// math.js
function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

function greet(name = "friend") {
  return `Hi, ${name}`;
}

sum(1, 2, 3); // 6

Objetos y arrays

Los objetos almacenan valores nombrados; los arrays almacenan valores ordenados. Juntos, modelan casi cualquier dato que vayas a manejar.

// data.js
const user = {
  name: "Ada",
  age: 36,
  admin: true,
};

const skills = ["HTML", "CSS", "JavaScript"];

user.name;        // "Ada"
skills.length;    // 3
skills[0];        // "HTML"

Puedes desestructurar ambos para extraer valores de forma limpia, y utilizar el operador spread para crear copias:

// destructure.js
const { name, age } = user;
const [first, ...rest] = skills;

const updated = { ...user, age: 37 };
const moreSkills = [...skills, "TypeScript"];

Los objetos y los arrays son tipos de referencia. Asignar uno a otra variable copia la referencia, no el contenido, por lo que mutar a través de cualquiera de los nombres cambia el mismo valor subyacente. El spread crea una copia superficial (shallow copy) cuando necesitas independencia.

Flujo de control

Los condicionales y los bucles dirigen el flujo de tu programa.

// logic.js
if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else {
  grade = "C";
}

for (const skill of skills) {
  console.log(skill);
}

Prefiere for...of para arrays y for...in únicamente para enumerar las claves de un objeto. El operador ternario condition ? a : b es una expresión compacta cuando necesitas un valor en lugar de una rama con efectos secundarios. El operador nullish coalescing ?? y el optional chaining ?. hacen que el código defensivo sea legible:

// safe.js
const city = user.address?.city ?? "Unknown";

Scope y closures

El scope (alcance) es el lugar donde una variable es visible. Un bloque { } crea un scope para let y const. Una función crea un scope para todo lo que contiene. Los closures son la consecuencia: una función interna mantiene el acceso a las variables de la función externa incluso después de que dicha función haya retornado.

// counter.js
function createCounter() {
  let count = 0;
  return function () {
    count += 1;
    return count;
  };
}

const next = createCounter();
next(); // 1
next(); // 2

La función retornada “encierra” (closes over) count, manteniéndola viva y privada. Los closures impulsan los event handlers, la memoisation, el currying y los patrones de módulos. Son una de las ideas más importantes del lenguaje y, una vez que se comprenden, gran parte de JavaScript empieza a tener sentido.

El event loop: una primera mirada

JavaScript ejecuta tu código en un solo hilo; es decir, solo puede hacer una cosa a la vez. Sin embargo, nunca se congela mientras espera una solicitud de red. El truco es el event loop.

El código síncrono se ejecuta inmediatamente en el call stack. Cuando programas algo asíncrono, como un temporizador o un fetch, el runtime lo delega y continúa su ejecución. Cuando termina, su callback se coloca en una cola. El event loop procesa el trabajo en cola solo una vez que el stack está vacío.

// loop.js
console.log("1");

setTimeout(() => console.log("2"), 0);

console.log("3");

// Output: 1, 3, 2

Incluso con un retraso de cero milisegundos, el callback espera hasta que el código síncrono actual termine. Este orden es la base de las promesas y de async/await, que se analizan a fondo en la guía de JavaScript asíncrono.

Cómo añadir JavaScript a una página

Se vincula JavaScript a HTML mediante un elemento <script>. Colócalo al final del body o utiliza el atributo defer para que el HTML se procese antes de que se ejecute tu código.

<!-- index.html -->
<body>
  <h1>Hello</h1>
  <script src="app.js" defer></script>
</body>

Los scripts inline también funcionan, pero los archivos externos se pueden cachear, son reutilizables y más fáciles de depurar. Usa type="module" para cargar ES modules con import y export.

Errores comunes

• Usar var y sorprenderse por el hoisting o el scope de las funciones.
• Comparar con == y provocar una coerción de tipos inesperada. Usa ===.
• Mutar un objeto o array asumiendo que se había creado una copia.
• Olvidar que this depende de cómo se llama a una función, no de dónde está definida.
• Tratar null y undefined como intercambiables sin un motivo claro.
• Recurrir a un framework antes de comprender las funciones y objetos básicos.

Mejores prácticas

• Prefiere const, luego let, y evita var.
• Usa siempre === y !== a menos que busques específicamente una coerción.
• Mantén las funciones pequeñas y enfocadas en una sola tarea.
• Nombra las cosas según su significado, no según su tipo.
• Utiliza optional chaining y nullish coalescing para acceder a los datos de forma segura.
• Aprende el lenguaje antes que el framework. Los fundamentos perduran más que las herramientas.

Qué aprender a continuación

Ya tienes el modelo mental: valores, variables, funciones, objetos, scope y el event loop. A partir de aquí, los siguientes pasos naturales son el DOM para interactuar con las páginas, las características de ES6+ para manejar la sintaxis moderna y el JavaScript asíncrono para trabajar con promesas y async/await. Elige uno, construye algo pequeño y deja que la práctica se acumule.