Tutorial de JavaScript para principiantes

Qué es JavaScript y para qué se usa

JavaScript es un lenguaje de tipado dinámico estandarizado como ECMAScript. Nació para las páginas web, donde reacciona a los clics, actualiza la página y se comunica con servidores. Hoy también se ejecuta en servidores y herramientas mediante Node.js, Deno y Bun, en aplicaciones de escritorio (Electron) y en aplicaciones móviles (React Native). Lo usan desarrolladores front-end, desarrolladores full-stack y cualquiera que construya para la web. La sintaxis moderna de esta página (let, const, funciones flecha, clases, módulos) viene de ES2015 y las ediciones posteriores.

Ejecutar Hello, world

Opción 1: abre cualquier página web, pulsa F12 (o Cmd+Option+J en Mac) para abrir la consola de desarrollo y escribe la línea siguiente. Opción 2: instala Node.js desde nodejs.org, guarda la línea como hello.js y ejecútala.

console.log("Hello, world");

node hello.js
# Hello, world

Variables y tipos básicos

Usa const para valores que no se reasignan y let para los que cambian. Evita el antiguo var, que ignora el ámbito de bloque. typeof indica el tipo de un valor.

const name = "Ada";
let count = 1;
count += 1;
console.log(`${name} has ${count} items`); // Ada has 2 items
console.log(0.1 + 0.2);                    // 0.30000000000000004
console.log(Number("12") + 1, "12" + 1);   // 13 121

Control de flujo: if, bucles e igualdad

Compara siempre con === y !==. El == laxo convierte los tipos antes de comparar, así que 0 == "" es true.

const score = 72;
if (score >= 90) {
  console.log("A");
} else if (score >= 70) {
  console.log("B"); // B
} else {
  console.log("C");
}
for (let i = 0; i < 3; i++) console.log(i); // 0 1 2
for (const fruit of ["apple", "pear"]) console.log(fruit);
let n = 10;
while (n > 1) n = Math.floor(n / 2);
console.log(n); // 1

Funciones

Las funciones son valores: puedes guardarlas en variables, pasarlas a otras funciones y devolverlas. Las funciones flecha son una forma más corta y son habituales en los callbacks.

function greet(name, greeting = "Hello") {
  return `${greeting}, ${name}!`;
}
const square = (x) => x * x;
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);
console.log(greet("Lin"));     // Hello, Lin!
console.log(square(5));        // 25
console.log(sum(1, 2, 3, 4));  // 10

Arrays y objetos

Los arrays son listas ordenadas; los objetos asocian claves de texto con valores. Ambos se pasan por referencia. Map y Set son alternativas integradas para cuando las claves no son cadenas o los valores deben ser únicos.

const nums = [3, 1, 2];
nums.push(5);
const doubled = nums.map((n) => n * 2);
const evens = nums.filter((n) => n % 2 === 0);
console.log(doubled, evens);             // [ 6, 2, 4, 10 ] [ 2 ]
console.log([...nums].sort((a, b) => a - b)); // [ 1, 2, 3, 5 ]
const user = { name: "Ann", age: 31 };
user.city = "Oslo";
const { name, age } = user;              // destructuring
console.log(name, age, Object.keys(user)); // Ann 31 [ 'name', 'age', 'city' ]
console.log(JSON.stringify(user));       // {"name":"Ann","age":31,"city":"Oslo"}

Característica distintiva: código asíncrono con promesas

JavaScript ejecuta tu código en un solo hilo con un bucle de eventos (event loop). Las operaciones lentas (temporizadores, red, archivos) no bloquean: devuelven una promesa que se resuelve más tarde. Las funciones async permiten escribir este código de arriba abajo con await.

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
async function main() {
  console.log("start");
  await wait(500);
  console.log("half a second later");
  const [a, b] = await Promise.all([wait(100).then(() => 1), wait(200).then(() => 2)]);
  console.log(a + b); // 3
}
main();
console.log("main() was called"); // prints before "half a second later"

Las clases (class Dog extends Animal {}), los módulos (import y export), el encadenamiento opcional (user?.address?.city) y el operador de fusión nula (value ?? "default") son otras características modernas que usarás a menudo.

Manejo de errores

Lanza objetos Error y captúralos con try/catch. En las funciones async, una promesa rechazada se convierte en una excepción en el await.

function parseAge(text) {
  const age = Number(text);
  if (!Number.isInteger(age) || age < 0) {
    throw new Error(`invalid age: ${text}`);
  }
  return age;
}
try {
  console.log(parseAge("41"));  // 41
  console.log(parseAge("abc"));
} catch (err) {
  console.log(err.message);     // invalid age: abc
} finally {
  console.log("done");
}

Un programa completo pequeño: descargar y resumir

Este script de Node.js (Node 18 o posterior incluye fetch) descarga JSON de una API pública e imprime un resumen breve. Guárdalo como repos.mjs y ejecuta node repos.mjs nodejs.

const org = process.argv[2] ?? "nodejs";
async function topRepos(name, n = 3) {
  const res = await fetch(`https://api.github.com/orgs/${name}/repos?per_page=100`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const repos = await res.json();
  return repos
    .sort((a, b) => b.stargazers_count - a.stargazers_count)
    .slice(0, n)
    .map((r) => `${r.stargazers_count}\t${r.name}`);
}
try {
  const lines = await topRepos(org);
  console.log(lines.join("\n"));
} catch (err) {
  console.error("failed:", err.message);
  process.exitCode = 1;
}

La extensión .mjs convierte el archivo en un módulo ES, lo que permite usar await en el nivel superior.

Errores comunes de principiantes

• Usar == en lugar de ===, lo que provoca conversiones de tipo sorprendentes.
• Olvidar await, de modo que obtienes un objeto Promise pendiente en lugar del valor.
• Esperar que const haga inmutable un objeto. Solo impide la reasignación; obj.x = 1 sigue funcionando. Usa Object.freeze si lo necesitas.
• Comparar objetos o arrays con ===, que comprueba la identidad, no el contenido.
• Perder this al pasar un método como callback. Usa una función flecha o .bind(obj).

Adónde ir después

Lee la MDN JavaScript Guide, la referencia gratuita más completa, y practica con el DOM del navegador (document.querySelector, eventos). Después aprende npm y los módulos, un framework como React, Vue o Svelte para el front end, o Node.js para servidores. Añadir TypeScript sobre JavaScript te da tipos estáticos y mejor ayuda del editor.