blog/[JavaScript]/guia-completa-javascript-desde-cero-2026
Código JavaScript en un monitor con luz neón
[JavaScript]6 min de lectura

Guía completa de JavaScript desde cero (2026)

La guía pilar para aprender JavaScript de verdad: variables, funciones, arrays, DOM, async/await, errores comunes, mini proyecto To-Do y plan de 4 semanas.

camilogaon

@camilogaon

27 de julio de 20265 vistas

Guía completa de JavaScript desde cero (2026)

Si quieres aprender a programar de verdad y no solo copiar tutoriales, JavaScript es el mejor punto de partida. Corre en el navegador, en el servidor (Node.js) y en un montón de herramientas modernas. Esta guía está pensada para llevarte desde cero hasta un nivel sólido, con ejemplos, errores comunes y un plan de práctica.

Tiempo estimado de lectura: 35–45 minutos.
Nivel: principiante → intermedio.
Objetivo: entender JS bien y poder construir proyectos reales.

//1. Qué es JavaScript (y qué no es)

JavaScript (JS) es un lenguaje de programación interpretado, dinámico y multiparadigma. Hoy lo usas para:

  • Interactividad en páginas web (DOM, eventos, formularios)
  • Aplicaciones frontend (React, Next.js, Vue, Svelte)
  • Backend con Node.js / NestJS / Express
  • Scripts, automatización y herramientas CLI

No confundas:

ConceptoQué es
JavaScriptEl lenguaje
JavaOtro lenguaje distinto (no es “JS avanzado”)
ECMAScript (ES)El estándar oficial de JS (ES6, ES2020…)
TypeScriptJS + tipos estáticos (superset)

Cómo ejecutar JavaScript hoy

  1. Consola del navegador (F12 → Console): ideal para pruebas rápidas.
  2. Archivo .html + .js: para aprender DOM.
  3. Node.js: para correr JS fuera del navegador.
  4. Un playground (CodeSandbox, StackBlitz): para practicar sin instalar nada.
html
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Hola JS</title>
  </head>
  <body>
    <h1 id="titulo">Hola</h1>
    <script src="app.js"></script>
  </body>
</html>
js
// app.js
console.log("Hola desde JavaScript");
document.getElementById("titulo").textContent = "Hola, Programemos";

//2. Variables: let, const y por qué evitar var

js
const nombre = "Ana"; // no se reasigna
let edad = 20;        // sí se puede reasignar
edad = 21;

// var es legacy: scope raro, hoisting confuso → evítalo en código nuevo

Regla práctica: usa const por defecto. Cambia a let solo si necesitas reasignar.

Tipos primitivos

js
typeof 42;          // "number"
typeof "hola";      // "string"
typeof true;        // "boolean"
typeof undefined;   // "undefined"
typeof null;        // "object"  ← bug histórico de JS
typeof 10n;         // "bigint"
typeof Symbol("x"); // "symbol"

Truthy y falsy (imprescindible)

Valores falsy: false, 0, "", null, undefined, NaN.

Todo lo demás es truthy (incluido [] y {}).

js
if (nombre) {
  console.log("Hay nombre");
}

//3. Operadores y comparaciones (cuidado con ==)

js
3 + 2;     // 5
"3" + 2;   // "32"  ← concatena
"3" - 2;   // 1     ← convierte a número

10 > 5;    // true
10 === "10"; // false  ← estricto (recomendado)
10 == "10";  // true   ← coerción (evítalo)

Siempre usa === y !==.

Operadores lógicos útiles:

js
const user = null;
const nombreVisible = user?.name ?? "Invitado";

const puerto = process.env.PORT || 3001; // ojo: 0 sería falsy
const puertoSeguro = process.env.PORT ?? 3001;

//4. Strings: plantillas y métodos clave

js
const lenguaje = "JavaScript";
const msg = `Estoy aprendiendo ${lenguaje}`;

"hola mundo".includes("mundo"); // true
"hola".toUpperCase();           // "HOLA"
"  trim  ".trim();              // "trim"
"a,b,c".split(",");             // ["a","b","c"]
["a","b"].join("-");            // "a-b"

//5. Condicionales y control de flujo

js
const nota = 85;

if (nota >= 90) {
  console.log("Excelente");
} else if (nota >= 70) {
  console.log("Aprobado");
} else {
  console.log("A practicar más");
}

const rol = "ADMIN";
switch (rol) {
  case "ADMIN":
    console.log("Acceso total");
    break;
  case "USER":
    console.log("Acceso limitado");
    break;
  default:
    console.log("Sin rol");
}

Ternario (para expresiones cortas):

js
const etiqueta = nota >= 70 ? "ok" : "repite";

//6. Bucles: for, while, for...of

js
const techs = ["js", "ts", "python"];

for (let i = 0; i < techs.length; i++) {
  console.log(i, techs[i]);
}

for (const tech of techs) {
  console.log(tech);
}

let n = 3;
while (n > 0) {
  console.log(n);
  n--;
}

Para objetos:

js
const user = { name: "Luis", level: 3 };
for (const key of Object.keys(user)) {
  console.log(key, user[key]);
}

//7. Funciones (el corazón de JS)

js
function sumar(a, b) {
  return a + b;
}

const multiplicar = function (a, b) {
  return a * b;
};

const dividir = (a, b) => a / b;

Parámetros por defecto y rest

js
function saludar(nombre = "mundo") {
  return `Hola, ${nombre}`;
}

function promedio(...nums) {
  const total = nums.reduce((acc, n) => acc + n, 0);
  return total / nums.length;
}

promedio(10, 8, 9); // 9

Scope y closures

js
function crearContador() {
  let count = 0;
  return function () {
    count += 1;
    return count;
  };
}

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

Un closure es una función que “recuerda” variables de su entorno externo. Aparece todo el tiempo en callbacks, hooks y handlers.

//8. Arrays: métodos que sí debes dominar

js
const nums = [1, 2, 3, 4, 5];

nums.map((n) => n * 2);           // [2,4,6,8,10]
nums.filter((n) => n % 2 === 0);  // [2,4]
nums.find((n) => n > 3);          // 4
nums.some((n) => n > 4);          // true
nums.every((n) => n > 0);         // true
nums.reduce((acc, n) => acc + n, 0); // 15

const copia = [...nums, 6];
const [primero, segundo, ...resto] = nums;

Ejercicio: dado un array de usuarios, obtén solo los nombres de quienes tienen active: true.

js
const users = [
  { name: "Ana", active: true },
  { name: "Bob", active: false },
  { name: "Cami", active: true },
];

const activos = users.filter((u) => u.active).map((u) => u.name);
// ["Ana", "Cami"]

//9. Objetos: literales, destructuring y referencias

js
const curso = {
  title: "JavaScript desde cero",
  lessons: 29,
  published: true,
};

const { title, lessons } = curso;
const curso2 = { ...curso, lessons: 30 };

curso.category = "Lenguajes";
delete curso.published;

Importante: los objetos y arrays se pasan por referencia.

js
const a = { x: 1 };
const b = a;
b.x = 2;
console.log(a.x); // 2  ← mismo objeto en memoria

Para clonar de forma superficial: { ...obj } o structuredClone(obj) (clon profundo moderno).

//10. DOM y eventos (JS en el navegador)

js
const btn = document.querySelector("#guardar");
const input = document.querySelector("#email");
const lista = document.querySelector("#lista");

btn.addEventListener("click", () => {
  const email = input.value.trim();
  if (!email.includes("@")) {
    alert("Email inválido");
    return;
  }

  const li = document.createElement("li");
  li.textContent = email;
  lista.appendChild(li);
  input.value = "";
});

Conceptos clave:

  • querySelector / querySelectorAll
  • textContent vs innerHTML (cuidado con XSS)
  • classList.add/remove/toggle
  • delegación de eventos en listas dinámicas

//11. Asincronía: callbacks → promesas → async/await

JS no espera operaciones lentas (red, timers). Por eso existe el modelo asíncrono.

Promesas

js
function esperar(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

esperar(1000).then(() => console.log("Pasó 1s"));

fetch + async/await

js
async function cargarPosts() {
  try {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts?_limit=3");
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const data = await res.json();
    return data;
  } catch (err) {
    console.error("Falló la carga", err);
    return [];
  }
}

Paralelismo con Promise.all

js
const [users, posts] = await Promise.all([
  fetch("/api/users").then((r) => r.json()),
  fetch("/api/posts").then((r) => r.json()),
]);

//12. Módulos ES (import / export)

js
// math.js
export function sum(a, b) {
  return a + b;
}
export const PI = 3.14159;

// app.js
import { sum, PI } from "./math.js";
console.log(sum(2, PI));

En Node moderno también puedes usar ESM. En proyectos reales (Next, Nest, Vite) los módulos son el estándar.

//13. Errores comunes de principiantes (y cómo evitarlos)

  1. Usar == en vez de ===
  2. Mutar arrays/objetos sin querer (compartir referencias)
  3. Olvidar return en funciones
  4. No manejar errores en fetch
  5. Mezclar async mal (await fuera de función async)
  6. Confiar en el orden de forEach + async (mejor for...of + await)
  7. Poner lógica de negocio gigante en un solo archivo
js
// ❌ malo
items.forEach(async (item) => {
  await save(item);
});

// ✅ mejor
for (const item of items) {
  await save(item);
}

//14. Mini proyecto: To-Do en el navegador

Objetivo: lista de tareas con localStorage.

Checklist de features:

  • Agregar tarea
  • Marcar completada
  • Eliminar
  • Persistir en localStorage
  • Filtrar: todas / activas / hechas

Estructura sugerida:

js
const STORAGE_KEY = "todos-v1";

function loadTodos() {
  try {
    return JSON.parse(localStorage.getItem(STORAGE_KEY)) ?? [];
  } catch {
    return [];
  }
}

function saveTodos(todos) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
}

function addTodo(text) {
  const todos = loadTodos();
  todos.push({ id: crypto.randomUUID(), text, done: false });
  saveTodos(todos);
  return todos;
}

Cuando lo termines, pásalo a módulos y luego a TypeScript.

//15. Plan de estudio de 4 semanas

SemanaEnfoqueEntregable
1Variables, tipos, funciones, arrays20 ejercicios cortos
2Objetos, DOM, eventosContador + formulario validado
3Async, fetch, JSONApp que consuma una API pública
4Módulos + proyectoTo-Do completo con localStorage

Ritmo recomendado: 45–90 min/día. Mejor poca práctica diaria que maratones de domingo.

//16. Qué estudiar después de esta guía

  1. TypeScript — mismos conceptos, menos bugs
  2. HTML/CSS sólidos — para UI de verdad
  3. Un framework (React o Next.js)
  4. Git + GitHub
  5. Algoritmos básicos (arrays, mapas, complejidad simple)
  6. Backend (Node/Nest + bases de datos)

En Programemos puedes seguir con las rutas de JavaScript, TypeScript y Python, además de ejercicios y comunidad.

//17. Glosario rápido (para no perderte)

TérminoSignificado simple
RuntimeDónde se ejecuta tu código (navegador, Node)
HoistingJS “eleva” declaraciones antes de ejecutar
CallbackFunción que pasas para que otra la ejecute después
PromiseRepresenta un valor futuro (éxito o error)
Event loopMecanismo que coordina tareas sync/async
ScopeDónde una variable es visible
MutaciónCambiar un objeto/array existente en memoria
JSONFormato de datos texto (objetos/arrays)
APIInterfaz para hablar con un servidor u otro sistema
BundleEmpaquetado de archivos JS para producción

//18. 25 ejercicios para practicar (hazlos sin mirar la solución)

  1. Convierte Celsius ↔ Fahrenheit.
  2. Detecta si un string es palíndromo.
  3. Cuenta vocales en un texto.
  4. Encuentra el máximo de un array sin Math.max(...).
  5. Invierte un array sin .reverse().
  6. Elimina duplicados de un array.
  7. Agrupa números pares e impares.
  8. Calcula factorial con recursión.
  9. Genera la secuencia de Fibonacci hasta N.
  10. Valida un email simple con includes/@.
  11. Capitaliza cada palabra de una frase.
  12. Aplana un array de arrays un nivel.
  13. Cuenta frecuencia de palabras en un texto.
  14. Implementa map usando for.
  15. Implementa filter usando for.
  16. Debounce simple con setTimeout.
  17. Deep clone superficial vs structuredClone.
  18. Ordena objetos por una propiedad.
  19. Busca un usuario por id en un array.
  20. Suma el total de un carrito (price * qty).
  21. Pagina un array (page, limit).
  22. Convierte query string ↔ objeto.
  23. Reintenta un fetch fallido 3 veces.
  24. Crea un contador con closure.
  25. Mini agenda: alta/baja/listado en memoria.

Si te trabas más de 20 minutos, mira docs/MDN, no un tutorial completo. El músculo está en resolver.

//19. Proyecto 2: “Dev Blog Reader” (consume una API)

Más ambicioso que el To-Do. Construye una página que:

  1. Pida posts a una API (fetch)
  2. Muestre tarjetas (título + excerpt)
  3. Permita buscar por texto
  4. Guarde favoritos en localStorage
  5. Tenga estados: loading / error / vacío / éxito

Boceto de estado:

js
const state = {
  posts: [],
  favorites: new Set(JSON.parse(localStorage.getItem("favs") ?? "[]")),
  query: "",
  status: "idle", // idle | loading | error | success
};

async function loadPosts() {
  state.status = "loading";
  render();
  try {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts?_limit=20");
    if (!res.ok) throw new Error("HTTP " + res.status);
    state.posts = await res.json();
    state.status = "success";
  } catch (e) {
    console.error(e);
    state.status = "error";
  }
  render();
}

Este proyecto te prepara para frameworks: mismo modelo mental (estado → UI).

//20. Cómo depurar como profesional (aunque seas principiante)

  1. Reproduce el bug en el caso más pequeño posible
  2. console.log con etiquetas claras (console.log("user", user))
  3. Usa breakpoints en DevTools (Sources)
  4. Lee el stack trace de arriba hacia abajo
  5. Verifica tipos/valores justo antes del crash
  6. No cambies 10 cosas a la vez

Truco: si “a veces falla”, registra inputs. Los bugs intermitentes casi siempre son datos inesperados (null, array vacío, race conditions).

//21. Recursos oficiales (calidad > cantidad)

Evita saltar entre 12 cursos a la vez. Elige una ruta y termínala.

//Conclusión

JavaScript no se “termina” de aprender: se practica. Si dominas variables, funciones, arrays/objetos, DOM y asincronía, ya tienes la base para frontend, backend y herramientas modernas.

Tu siguiente paso concreto:

  1. Haz el mini To-Do
  2. Completa al menos 10 ejercicios de la lista
  3. Sube el repo a GitHub
  4. Escribe un post corto explicando qué aprendiste
  5. Empieza TypeScript o tu primera API

Cuando practiques con intención, dejas de “ver tutoriales” y empiezas a construir.

#JavaScript#Principiante#Guía completa#DOM#Async#Proyectos

FAQ

¿Cuánto tiempo se necesita para aprender JavaScript desde cero?

Con 45–90 minutos diarios puedes tener una base sólida en 4–8 semanas si practicas con proyectos, no solo teoría.

¿Debo aprender HTML y CSS antes de JavaScript?

Ayuda mucho para el DOM y la UI, pero puedes aprender lo básico de HTML/CSS en paralelo con los primeros módulos de JS.

¿Java y JavaScript son lo mismo?

No. Son lenguajes distintos. JavaScript es el lenguaje de la web; Java es otro ecosistema (JVM) con sintaxis y usos diferentes.

¿Qué debo aprender después de JavaScript básico?

TypeScript, Git, un framework (React/Next), algoritmos básicos y luego backend con Node o NestJS.

¿Sirve practicar solo con tutoriales?

Los tutoriales ayudan al inicio, pero el aprendizaje real ocurre cuando construyes proyectos propios y resuelves errores sin un guía paso a paso.

// sigue leyendo

Artículos relacionados

Diseño web responsive en laptop y móvil
[HTML]nuevofeatured
2 min

HTML y CSS desde cero: la base visual de la web

Guía completa de HTML y CSS para principiantes: semántica, layout, Flexbox, Grid, responsive, accesibilidad y un proyecto landing listo para tu portfolio.

camilogaon
3 vistashace 4d
Servidores y conexiones de red representando una API
[Node.js]nuevofeatured
1 min

Cómo crear tu primera API REST con Node.js y Express

Guía completa para crear tu primera API REST: HTTP, rutas, controladores, validación, errores, CORS, variables de entorno, Postman y deploy mental model.

camilogaon
3 vistashace 4d
Terminal con comandos git y flujo de ramas
[Git]nuevofeatured
1 min

Git y GitHub desde cero: guía completa para developers

Domina Git y GitHub: commits, ramas, merge, PRs, .gitignore, flujos de trabajo y errores comunes explicados para principiantes.

camilogaon
2 vistashace 4d
Equipo de developers trabajando en una oficina
[Carrera]nuevofeatured
2 min

Cómo conseguir tu primer empleo como programador (guía realista)

Guía realista para tu primer trabajo tech: skills mínimas, portfolio, GitHub, CV, LinkedIn, entrevistas y errores que te frenan aunque sepas codear.

camilogaon
2 vistashace 4d