Guía Completa de JavaScript
Manual de Referencia y Programación
20 Secciones • Ejemplos de Código • Guía Práctica
Versión 2024-2025
Tabla de Contenidos
1. Introducción a JavaScript
2. Variables, Tipos y Operadores
3. Funciones y Closures
4. Objetos y Prototipos
5. Programación Asíncrona
6. Arrays y Métodos Modernos
7. DOM y Eventos
8. Módulos ES6
9. TypeScript y JavaScript Moderno
10. Herramientas y Ecosistema
Bienvenido a JavaScript
Esta guía cubre los aspectos fundamentales y avanzados del lenguaje JavaScript, desde los
conceptos básicos hasta patrones de diseño y mejores prácticas modernas. Cada sección
incluye explicaciones detalladas y ejemplos de código funcionales.
El objetivo es proporcionar una referencia completa que sirva tanto para principiantes que están
aprendiendo JavaScript como para desarrolladores experimentados que buscan profundizar
sus conocimientos o encontrar soluciones rápidas.
1. Introducción a JavaScript
JavaScript es un lenguaje de programación interpretado, orientado a objetos y de alto nivel, con
tipado dinámico. Creado por Brendan Eich en 1995 para Netscape Navigator, JavaScript se ha
convertido en el lenguaje principal de la web, siendo el único lenguaje de programación que los
navegadores web ejecutan nativamente.
Originalmente diseñado solo para el navegador, JavaScript ahora puede ejecutarse en el
servidor gracias a [Link], en aplicaciones móviles con React Native, en aplicaciones de
escritorio con Electron, y en muchos otros entornos. Esta versatilidad lo ha convertido en uno
de los lenguajes más populares del mundo.
ECMAScript es el estándar que define JavaScript. La versión ES6 (ES2015) introdujo
importantes mejoras como arrow functions, clases, módulos, destructuring, template literals y
promesas. Desde entonces, el estándar se actualiza anualmente con nuevas características.
JavaScript es un lenguaje de programación multiparadigma que soporta estilos de
programación orientado a eventos, funcional y orientado a objetos basado en prototipos. Su
naturaleza asíncrona y el modelo de programación basado en eventos lo hacen especialmente
adecuado para aplicaciones web interactivas y en tiempo real.
Ejemplo de Código
// Hola Mundo en JavaScript
[Link]("¡Hola, Mundo!");
// Variables modernas (ES6+)
let nombre = "JavaScript";
const version = "ES2023";
var legacy = "antigua forma";
// Template literals
[Link](`Lenguaje: ${nombre}, Versión: ${version}`);
// Tipos de datos
let numero = 42;
let flotante = 3.14;
let texto = "cadena de texto";
let booleano = true;
let nulo = null;
let indefinido = undefined;
let simbolo = Symbol("id");
let grande = 9007199254740991n; // BigInt
[Link](typeof numero); // "number"
[Link](typeof texto); // "string"
[Link](typeof booleano); // "boolean"
2. Variables, Tipos y Operadores
JavaScript tiene tres formas de declarar variables: var (alcance de función, izada), let (alcance
de bloque, no izada) y const (alcance de bloque, no reasignable). La práctica moderna
recomienda usar const por defecto y let cuando la variable necesite reasignarse, evitando var.
JavaScript tiene tipos primitivos (number, string, boolean, null, undefined, symbol, bigint) y tipos
de referencia (objects, arrays, functions). La coerción de tipos en JavaScript puede ser explícita
o implícita. JavaScript realiza coerción implícita en muchas operaciones, lo que puede ser
fuente de confusión.
Los operadores en JavaScript incluyen operadores aritméticos (+, -, *, /, %, **), operadores de
comparación (==, ===, !=, !==, <, >, <=, >=), operadores lógicos (&&, ||, !), y el nuevo operador
de coalescencia nula (??) y encadenamiento opcional (?.).
El operador de igualdad estricta (===) compara tanto el valor como el tipo, mientras que la
igualdad débil (==) realiza coerción de tipos antes de comparar. Siempre se recomienda usar
=== para evitar comportamientos inesperados.
Ejemplo de Código
// Declaración de variables
const PI = 3.14159;
let contador = 0;
let nombre = "María";
// Destructuring
const [primero, segundo, ...resto] = [1, 2, 3, 4, 5];
const { nombre: n, edad, ciudad = "Desconocida" } = {
nombre: "Carlos",
edad: 30
};
// Spread operator
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinado = [...arr1, ...arr2]; // [1,2,3,4,5,6]
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a:1, b:2, c:3 }
// Coalescencia nula y encadenamiento opcional
const usuario = null;
const nombre2 = usuario?.nombre ?? "Anónimo";
[Link](nombre2); // "Anónimo"
// Conversiones
[Link](Number("42")); // 42
[Link](String(100)); // "100"
[Link](Boolean(0)); // false
[Link](Boolean("hola")); // true
3. Funciones y Closures
Las funciones son ciudadanos de primera clase en JavaScript, lo que significa que pueden
asignarse a variables, pasarse como argumentos y retornarse desde otras funciones.
JavaScript soporta múltiples formas de definir funciones: declaraciones de función, expresiones
de función, arrow functions y funciones de generador.
Las arrow functions (introducidas en ES6) tienen una sintaxis más concisa y no tienen su propio
this, lo que las hace ideales para callbacks y métodos de arrays. Sin embargo, no deben usarse
como métodos de objeto o constructores.
Un closure es una función que tiene acceso al ámbito (scope) en el que fue creada, incluso
después de que ese ámbito haya terminado de ejecutarse. Los closures son fundamentales en
JavaScript y se usan ampliamente para crear datos privados, funciones de fábrica y módulos.
Las funciones generadoras (function*) son funciones especiales que pueden pausar su
ejecución y resumirla más tarde. Retornan un objeto generador que implementa el protocolo
iterador. Los generadores son útiles para crear iteradores personalizados, secuencias infinitas y
código asíncrono con async generators.
Ejemplo de Código
// Diferentes formas de declarar funciones
function declaracion(x) { return x * 2; }
const expresion = function(x) { return x * 2; };
const flecha = (x) => x * 2;
const flecha2 = x => x * 2; // sin paréntesis si hay 1 arg
// Parámetros por defecto y rest
function conectar(host = "localhost", puerto = 3000, ...opciones) {
[Link](`${host}:${puerto}`, opciones);
}
// Closures
function crearContador(inicial = 0) {
let cuenta = inicial;
return {
incrementar: () => ++cuenta,
decrementar: () => --cuenta,
obtener: () => cuenta,
reiniciar: () => { cuenta = inicial; }
};
}
const contador = crearContador(10);
[Link](); // 11
[Link](); // 12
[Link]([Link]()); // 12
// Funciones de orden superior
const numeros = [1, 2, 3, 4, 5];
const dobles = [Link](n => n * 2);
const pares = [Link](n => n % 2 === 0);
const suma = [Link]((acc, n) => acc + n, 0);
[Link](dobles, pares, suma);
4. Objetos y Prototipos
JavaScript es un lenguaje basado en prototipos. Cada objeto tiene una propiedad interna
[[Prototype]] que apunta a otro objeto (su prototipo). Cuando se intenta acceder a una
propiedad que no existe en un objeto, JavaScript busca en la cadena de prototipos hasta
encontrarla o llegar a null.
Las clases en JavaScript (introducidas en ES6) son principalmente azúcar sintáctico sobre el
sistema de prototipos existente. Proporcionan una sintaxis más clara y familiar para crear
objetos y gestionar la herencia, pero internamente siguen usando prototipos.
El método Object tiene varias funciones útiles: [Link]() retorna un array de las claves
enumerables, [Link]() retorna los valores, [Link]() retorna pares [clave, valor],
[Link]() copia propiedades de un objeto a otro, y [Link]() hace un objeto
inmutable.
Los getters y setters permiten definir propiedades calculadas en objetos y clases. Los campos
privados (prefijo #) introducidos en ES2022 permiten encapsulación real en clases, aunque con
algunas limitaciones en comparación con lenguajes como Java o C#.
Ejemplo de Código
// Objetos literales
const persona = {
nombre: "Ana",
edad: 28,
saludar() {
return `Hola, soy ${[Link]}`;
},
get nombreCompleto() {
return `${[Link]} García`;
}
};
// Clases ES6
class Vehiculo {
#velocidad = 0; // Campo privado
constructor(marca, modelo, año) {
[Link] = marca;
[Link] = modelo;
this.año = año;
}
acelerar(cantidad) {
this.#velocidad += cantidad;
return this;
}
get velocidadActual() {
return this.#velocidad;
}
toString() {
return `${[Link]} ${[Link]} (${this.año})`;
}
}
class Auto extends Vehiculo {
constructor(marca, modelo, año, puertas) {
super(marca, modelo, año);
[Link] = puertas;
}
toString() {
return `${[Link]()} - ${[Link]} puertas`;
}
}
const miAuto = new Auto("Toyota", "Corolla", 2023, 4);
[Link](60).acelerar(20);
[Link]([Link]); // 80
5. Programación Asíncrona
JavaScript es single-threaded (un solo hilo) y usa un modelo de programación asíncrona
basado en eventos para manejar operaciones de larga duración sin bloquear el hilo principal. El
Event Loop (bucle de eventos) es el mecanismo que permite a JavaScript ejecutar código
asíncrono.
Las Promesas (Promises) son objetos que representan la eventual completación (o falla) de
una operación asíncrona. Una promesa puede estar en tres estados: pendiente, cumplida o
rechazada. Las promesas resuelven el problema del callback hell, permitiendo encadenar
operaciones asíncronas de forma legible.
Async/await es azúcar sintáctico sobre las promesas que permite escribir código asíncrono que
se ve y se comporta como código síncrono. Una función marcada con async siempre retorna
una promesa. El operador await puede usarse dentro de funciones async para esperar el
resultado de una promesa.
[Link]() ejecuta múltiples promesas en paralelo y espera a que todas se resuelvan.
[Link]() espera a que todas terminen, independientemente del resultado.
[Link]() resuelve o rechaza con la primera promesa que termine. [Link]() resuelve
con la primera promesa exitosa.
Ejemplo de Código
// Callbacks (forma antigua)
setTimeout(() => [Link]("1 segundo"), 1000);
// Promesas
const obtenerUsuario = (id) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (id > 0) {
resolve({ id, nombre: "Usuario " + id });
} else {
reject(new Error("ID inválido"));
}
}, 1000);
});
};
// Async/Await
async function obtenerDatos() {
try {
const usuario = await obtenerUsuario(1);
[Link](usuario);
// En paralelo
const [u1, u2, u3] = await [Link]([
obtenerUsuario(1),
obtenerUsuario(2),
obtenerUsuario(3)
]);
return [u1, u2, u3];
} catch (error) {
[Link]("Error:", [Link]);
} finally {
[Link]("Operación completada");
}
}
// Fetch API
async function obtenerPosts() {
const respuesta = await fetch("[Link]
const posts = await [Link]();
return [Link](0, 5);
}
obtenerDatos().then([Link]);
6. Arrays y Métodos Modernos
Los arrays en JavaScript son objetos especiales con propiedades numéricas indexadas y una
propiedad length. Los métodos de array se dividen en métodos que mutan el array original
(push, pop, shift, unshift, splice, sort, reverse) y métodos que retornan un nuevo array sin
modificar el original (map, filter, reduce, slice, concat).
Los métodos de array funcionales (map, filter, reduce) son fundamentales para la programación
funcional en JavaScript. map() transforma cada elemento, filter() selecciona elementos que
cumplen una condición, y reduce() combina todos los elementos en un único valor.
El método [Link]() crea arrays a partir de objetos iterables o similares a arrays. [Link]()
crea arrays con los argumentos dados. El método flat() aplana arrays anidados, y flatMap()
combina map y flat en una sola operación.
Nuevas adiciones como at(), findLast(), findLastIndex(), toSorted(), toReversed() y with()
(ES2023) proporcionan más formas de trabajar con arrays de manera inmutable. La
desestructuración de arrays permite extraer múltiples valores en una sola línea.
Ejemplo de Código
// Métodos de array modernos
const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// Map, filter, reduce
const cuadrados = [Link](n => n ** 2);
const pares = [Link](n => n % 2 === 0);
const suma = [Link]((acc, n) => acc + n, 0);
const sumaDobles = [Link]((acc, n) => acc + n * 2, 0);
// Encadenamiento
const resultado = numeros
.filter(n => n > 3)
.map(n => n * n)
.reduce((acc, n) => acc + n, 0);
// find, findIndex
const primero = [Link](n => n > 5); // 6
const indice = [Link](n => n > 5); // 5
// flat y flatMap
const anidado = [[1, 2], [3, 4], [5, [6, 7]]];
[Link]([Link]()); // [1,2,3,4,5,[6,7]]
[Link]([Link](2)); // [1,2,3,4,5,6,7]
const frases = ["Hola Mundo", "Hello World"];
const palabras = [Link](f => [Link](" "));
[Link](palabras); // ["Hola","Mundo","Hello","World"]
// [Link]
const rango = [Link]({ length: 5 }, (_, i) => i + 1);
[Link](rango); // [1, 2, 3, 4, 5]
// Métodos inmutables ES2023
const ordenado = [Link]((a, b) => b - a);
const revertido = [Link]();
const modificado = [Link](0, 100); // reemplaza índice 0
7. DOM y Eventos
El Document Object Model (DOM) es una representación en árbol del documento HTML que
permite a JavaScript manipular la estructura, estilo y contenido de las páginas web. El DOM es
una API proporcionada por los navegadores que no forma parte del lenguaje JavaScript en sí.
Los métodos de selección del DOM incluyen getElementById(), getElementsByClassName(),
getElementsByTagName(), querySelector() (retorna el primer elemento que coincide con el
selector CSS) y querySelectorAll() (retorna todos los elementos que coinciden). Estos métodos
son fundamentales para cualquier interacción con la página web.
Los eventos del DOM permiten responder a las acciones del usuario. addEventListener() es la
forma moderna de agregar manejadores de eventos. Los eventos se propagan a través del
DOM en dos fases: captura (de padre a hijo) y burbuja (de hijo a padre). stopPropagation()
detiene la propagación y preventDefault() previene el comportamiento predeterminado del
navegador.
La delegación de eventos es un patrón eficiente que aprovecha la burbuja de eventos para
manejar eventos en elementos hijos desde un ancestro común. Esto es especialmente útil
cuando se trabaja con listas dinámicas o cuando se generan muchos elementos del mismo tipo.
Ejemplo de Código
// Selección de elementos
const titulo = [Link]("titulo");
const botones = [Link](".btn");
const formulario = [Link]("form");
// Manipulación del DOM
[Link] = "Nuevo Título";
[Link] = "#333";
[Link]("activo");
[Link]("visible");
// Crear y agregar elementos
function crearTarjeta(titulo, descripcion) {
const tarjeta = [Link]("div");
[Link] = "tarjeta";
[Link] = `
<h3>${titulo}</h3>
<p>${descripcion}</p>
<button class="btn-eliminar">Eliminar</button>
`;
return tarjeta;
}
const contenedor = [Link]("#contenedor");
[Link](crearTarjeta("Título 1", "Descripción 1"));
// Eventos
[Link]("DOMContentLoaded", () => {
[Link]("DOM cargado");
});
// Delegación de eventos
[Link]("click", (evento) => {
if ([Link](".btn-eliminar")) {
[Link](".tarjeta").remove();
}
});
// Formularios
formulario?.addEventListener("submit", async (e) => {
[Link]();
const datos = new FormData([Link]);
const payload = [Link]([Link]());
[Link](payload);
});
8. Módulos ES6
El sistema de módulos de ES6 permite organizar el código en archivos separados y
reutilizables. Cada módulo tiene su propio ámbito, lo que evita la contaminación del ámbito
global. Los módulos usan import y export para compartir código entre archivos.
Hay dos tipos de exports: named exports (exportaciones nombradas) que pueden haber
múltiples por módulo, y default exports (exportaciones por defecto) que solo puede haber una
por módulo. Al importar exportaciones nombradas, el nombre debe coincidir (o usar alias con
as), mientras que las exportaciones por defecto pueden importarse con cualquier nombre.
Las importaciones dinámicas (import()) permiten cargar módulos de forma asíncrona y bajo
demanda, lo cual es útil para code splitting en aplicaciones grandes. Retorna una promesa que
se resuelve con el módulo.
Los módulos de ES6 tienen características importantes: se ejecutan en modo estricto por
defecto, las importaciones son bindings vivos (cambios en el módulo exportador se reflejan en
el importador), los módulos se ejecutan una sola vez sin importar cuántas veces se importen, y
las importaciones son hoisted (izadas) al inicio del archivo.
Ejemplo de Código
// [Link] - Exportaciones nombradas
export const PI = 3.14159;
export function suma(a, b) { return a + b; }
export function restar(a, b) { return a - b; }
// clase con export default
export default class Calculadora {
constructor() {
[Link] = [];
}
calcular(a, op, b) {
let resultado;
switch(op) {
case '+': resultado = a + b; break;
case '-': resultado = a - b; break;
case '*': resultado = a * b; break;
case '/': resultado = b !== 0 ? a / b : null; break;
}
[Link]({ a, op, b, resultado });
return resultado;
}
}
// [Link] - Importaciones
import Calculadora, { PI, suma as add } from './[Link]';
const calc = new Calculadora();
[Link]([Link](10, '+', 5)); // 15
[Link](add(3, 4)); // 7
// Importar todo
import * as utils from './[Link]';
[Link]([Link]);
// Importación dinámica
const cargarModulo = async () => {
const modulo = await import('./[Link]');
[Link]();
};
9. TypeScript y JavaScript Moderno
TypeScript es un superconjunto tipado de JavaScript desarrollado por Microsoft que compila a
JavaScript. Añade tipado estático opcional, interfaces, genéricos, enums, y otras características
que hacen el código más robusto y mantenible, especialmente en proyectos grandes.
El tipado estático en TypeScript permite detectar errores en tiempo de compilación en lugar de
en tiempo de ejecución. Las interfaces definen la forma de los objetos, los tipos genéricos
permiten escribir código reutilizable que funciona con cualquier tipo, y los decoradores
(similares a los de Python) permiten agregar metadatos y modificar el comportamiento de
clases.
JavaScript moderno incluye numerosas características nuevas: Optional Chaining (?.) para
acceso seguro a propiedades anidadas, Nullish Coalescing (??) para valores predeterminados,
el operador de asignación lógica (&&=, ||=, ??=), los métodos privados (#) en clases, y top-level
await en módulos ES2022.
Herramientas modernas del ecosistema JavaScript incluyen Vite (build tool ultra rápido), ESLint
(linter), Prettier (formateador), Jest y Vitest (testing), y TypeScript. [Link] con npm/yarn/pnpm
gestiona las dependencias. Frameworks populares incluyen React, Vue, Angular, Svelte y
SolidJS.
Ejemplo de Código
// TypeScript
interface Usuario {
id: number;
nombre: string;
email: string;
edad?: number; // opcional
readonly creado: Date;
}
type Rol = "admin" | "usuario" | "moderador";
// Genéricos
class Repositorio<T extends { id: number }> {
private items: T[] = [];
agregar(item: T): void {
[Link](item);
}
obtener(id: number): T | undefined {
return [Link](item => [Link] === id);
}
obtenerTodos(): T[] {
return [...[Link]];
}
}
// Uso
const repoUsuarios = new Repositorio<Usuario>();
[Link]({
id: 1,
nombre: "Ana García",
email: "ana@[Link]",
creado: new Date()
});
// JavaScript moderno ES2023+
const datos = {
usuario: {
perfil: {
nombre: "Bob"
}
}
};
const nombre = datos?.usuario?.perfil?.nombre ?? "Anónimo";
const ciudadUpper = datos?.usuario?.ciudad?.toUpperCase();
// Lógica condicional
let config = null;
config ??= { debug: false, nivel: "info" };
[Link] ||= [Link].NODE_ENV === "development";
10. Herramientas y Ecosistema
El ecosistema de JavaScript es uno de los más grandes y activos en el mundo del software.
npm (Node Package Manager) es el repositorio de paquetes más grande del mundo, con más
de 2 millones de paquetes disponibles. yarn y pnpm son alternativas más rápidas y eficientes a
npm.
[Link] permitió a JavaScript ejecutarse fuera del navegador, convirtiéndolo en un lenguaje de
servidor. [Link] es el framework web más popular para [Link], mientras que Fastify, Koa
y NestJS son otras alternativas modernas. Deno y Bun son nuevos entornos de ejecución que
buscan mejorar ciertas limitaciones de [Link].
Las herramientas de construcción (build tools) como Webpack, Vite y Rollup permiten
empaquetar y optimizar el código para producción. Babel transpila JavaScript moderno para
compatibilidad con navegadores más antiguos. Los service workers y las Progressive Web
Apps (PWA) permiten crear experiencias de aplicación nativa en la web.
Las pruebas en JavaScript se pueden realizar con Jest (el framework de pruebas más popular),
Testing Library para pruebas centradas en el usuario, Playwright y Cypress para pruebas end-
to-end, y Vitest como alternativa moderna a Jest. Las buenas prácticas incluyen TDD, pruebas
de integración y pruebas de contrato.
Ejemplo de Código
// [Link] - Servidor Express básico
const express = require('express');
const app = express();
[Link]([Link]());
// Middleware de autenticación
const autenticar = (req, res, next) => {
const token = [Link];
if (!token) return [Link](401).json({ error: "No autorizado" });
next();
};
// Rutas
[Link]('/usuarios', autenticar, async (req, res) => {
try {
const usuarios = await obtenerUsuarios();
[Link](usuarios);
} catch (error) {
[Link](500).json({ error: [Link] });
}
});
[Link]('/usuarios', async (req, res) => {
const { nombre, email } = [Link];
if (!nombre || !email) {
return [Link](400).json({ error: "Datos incompletos" });
}
const usuario = await crearUsuario({ nombre, email });
[Link](201).json(usuario);
});
[Link](3000, () => [Link]("Servidor en puerto 3000"));
// Jest - Pruebas unitarias
describe('Calculadora', () => {
test('suma dos números', () => {
expect(suma(2, 3)).toBe(5);
});
test('maneja división por cero', () => {
expect(() => dividir(5, 0)).toThrow('División por cero');
});
});