JavaScript para Principiantes: Guía Completa 2026

JavaScript es el lenguaje más versátil del mundo del software: anima botones en el navegador, potencia APIs en servidores Node.js, controla aplicaciones móviles con React Native y hasta maneja bases de datos con MongoDB. No existe ningún otro lenguaje con presencia tan transversal. Y en LATAM, es el lenguaje con más ofertas de trabajo en el sector tech.

Conceptos fundamentales de JavaScript

Variables y tipos de datos

// ES6+: usa const y let, nunca var
const nombre = 'María';        // string (texto)
let edad = 28;                  // number (número)
const activo = true;            // boolean (verdadero/falso)
const cursos = ['Python', 'JS']; // array (lista)
const usuario = {               // object (objeto)
  nombre: 'María',
  edad: 28
};

Funciones: la base de todo

// Función tradicional
function saludar(nombre) {
  return `Hola, ${nombre}!`;
}

// Arrow function (ES6) — más concisa
const saludar = (nombre) => `Hola, ${nombre}!`;

console.log(saludar('Carlos')); // "Hola, Carlos!"

Manipulación del DOM

El DOM (Document Object Model) es la representación en árbol de una página HTML. JavaScript lo manipula para crear interactividad:

// Seleccionar un elemento
const boton = document.querySelector('#miBoton');

// Escuchar un evento
boton.addEventListener('click', () => {
  document.querySelector('#mensaje').textContent = '¡Hiciste clic!';
});

Los 10 conceptos ES6+ que todo principiante debe dominar

1. const / let: reemplazan a var. const para valores que no cambian, let para los que sí.
2. Template literals: `Hola ${nombre}` — interpolación de strings con backticks.
3. Arrow functions: sintaxis más corta, sin su propio this.
4. Destructuring: const {nombre, edad} = usuario — extrae propiedades de objetos.
5. Spread operator (...): copia o combina arrays y objetos fácilmente.
6. Módulos (import/export): organiza el código en archivos separados.
7. Promesas: manejan operaciones asíncronas (fetch a APIs, leer archivos).
8. async/await: syntactic sugar sobre promesas — código asíncrono legible como sincrónico.
9. Array methods: .map(), .filter(), .reduce() — transforman datos sin bucles for.
10. Optional chaining (?.) y nullish coalescing (??): evitan errores con datos undefined.

JavaScript asíncrono: fetch y APIs REST

El 90% del JavaScript moderno hace peticiones a APIs externas. El patrón más moderno usa fetch + async/await:

async function obtenerCursos() {
  try {
    const respuesta = await fetch('https://api.ejemplo.com/cursos');
    const datos = await respuesta.json();
    console.log(datos);
  } catch (error) {
    console.error('Error al cargar cursos:', error);
  }
}

obtenerCursos();

Frameworks y librerías: el siguiente paso

Tras dominar JavaScript vanilla, el ecosistema de frameworks amplifica tu productividad:

Framework / Librería	Uso principal	Empresa creadora	Demanda LATAM
React	UI frontend, SPA	Meta	⭐⭐⭐⭐⭐ Máxima
Vue.js	UI frontend, fácil entrada	Evan You	⭐⭐⭐⭐ Alta
Angular	SPA enterprise	Google	⭐⭐⭐ Media
Node.js + Express	API REST backend	OpenJS Foundation	⭐⭐⭐⭐⭐ Máxima
Next.js	React con SSR y routing	Vercel	⭐⭐⭐⭐ Alta y creciendo

Errores más comunes de principiantes (y cómo evitarlos)

• Usar var en lugar de const/let: var tiene scope de función, no de bloque. Causa bugs sutiles. Siempre usa const primero, let si necesitas reasignar.
• Confundir == y ===: == hace coerción de tipos (1 == "1" es true). Siempre usa === (igualdad estricta).
• No entender el asincronismo: JS es single-threaded. Las operaciones lentas (fetch, setTimeout) no bloquean el hilo — se manejan con callbacks, promesas o async/await.
• Mutar arrays en lugar de crear copias: .push() muta el array original. Para crear una copia, usa spread: [...arr, nuevoElemento].
• Olvidar el return en arrow functions con llaves: const doble = x => x * 2 (sin llaves, return implícito). const doble = x => { return x * 2 } (con llaves, return explícito obligatorio).

Recursos para aprender JavaScript gratis en 2026

• MDN Web Docs (developer.mozilla.org): documentación oficial y más completa. En inglés y español.
• javascript.info: tutorial gratuito más completo disponible — desde básico hasta avanzado.
• freeCodeCamp: 300 horas de JavaScript con proyectos prácticos. Gratuito.
• The Odin Project: curriculum full-stack open source con JavaScript y Node.js.
• CS50x de Harvard (edX): introducción a la programación con JavaScript incluido. Gratuito.

Preguntas frecuentes sobre JavaScript