Guía de Referencia de JavaScript con Ejemplos

1. const, let, var — cuál es la diferencia

Las tres palabras clave crean una variable, pero se comportan de forma distinta.

var — la opción obsoleta

var es la forma más antigua. Tiene un alcance de función "con fugas" (function scope), por lo que una variable puede "escaparse" accidentalmente fuera de un bloque { }. Hoy no se recomienda usarlo.

let — una variable que se puede cambiar

let contador = 0;
contador = contador + 1; // se puede cambiar el valor
console.log(contador); // 1

let vive estrictamente dentro del bloque { } en el que fue declarada — a eso se le llama block scope.

const — una variable que no se puede reasignar

const nombre = "Juan";
nombre = "Pedro"; // ❌ Error: Assignment to constant variable

const usuario = { nombre: "Juan" };
usuario.nombre = "Pedro"; // ✅ esto sí se puede

Regla por defecto: usa const en todo lo que no se vaya a reasignar. Si el valor va a cambiar, usa let. var ya casi no se usa hoy en día.

2. Cómo seleccionar un elemento en la página

Para cambiar algo en el HTML mediante JavaScript, primero hay que "encontrar" ese elemento.

querySelector — encuentra el primer elemento que coincide

const btn = document.querySelector(".mi-boton");
const titulo = document.querySelector("#titulo-principal");

Funciona como un selector CSS: .clase — por clase, #id — por id, etiqueta — por etiqueta.

querySelectorAll — encuentra todos los elementos que coinciden

const items = document.querySelectorAll(".list-item");
items.forEach(function (item) {
    console.log(item.textContent);
});

getElementById — búsqueda rápida por id

const caja = document.getElementById("caja");

querySelector es más universal y en el 99% de los casos es suficiente — recomendamos empezar por él.

3. onclick, onchange, addEventListener

Los eventos son reacciones a las acciones del usuario: un clic, escribir texto, enviar un formulario.

onclick — el evento de clic

const btn = document.querySelector(".btn");
btn.onclick = function () {
    console.log("¡Botón clicado!");
};

onchange — el evento de cambio de valor

Se dispara cuando el usuario cambia el valor de un input, un select o un checkbox y quita el foco del elemento.

const select = document.querySelector("select");
select.onchange = function () {
    console.log("Seleccionado:", select.value);
};

addEventListener — una forma más flexible

btn.addEventListener("click", function () {
    console.log("Clic mediante addEventListener");
});

4. Template literals

Permiten insertar variables directamente en un string, usando comillas invertidas ` en vez de comillas normales.

const nombre = "María";
const edad = 20;

// forma antigua
console.log("Hola, " + nombre + "! Tienes " + edad + " años.");

// template literal
console.log(`Hola, ${nombre}! Tienes ${edad} años.`);

Dentro de ${ } se puede escribir cualquier expresión, no solo una variable: `El próximo año: ${edad + 1}`.

5. Funciones flecha vs normales

// función normal
function suma(a, b) {
    return a + b;
}

// función flecha
const suma2 = (a, b) => a + b;

Las funciones flecha son más cortas — si el cuerpo es una sola expresión, se pueden omitir el return y las llaves.

La diferencia principal es que las funciones flecha no tienen su propio this, lo toman del código que las rodea. Al principio esto no es crítico, pero es importante saber que esa diferencia existe.

6. Recorrer arrays: forEach, map, filter

forEach — simplemente "recorrer" un array

const frutas = ["manzana", "banana", "pera"];
frutas.forEach(function (fruta) {
    console.log(fruta);
});

map — crear un nuevo array a partir de uno existente

const numeros = [1, 2, 3];
const duplicados = numeros.map(n => n * 2);
console.log(duplicados); // [2, 4, 6]

filter — dejar solo los elementos que necesitas

const numeros = [1, 2, 3, 4, 5];
const pares = numeros.filter(n => n % 2 === 0);
console.log(pares); // [2, 4]

Una regla simple: forEach cuando solo necesitas hacer algo con cada elemento; map cuando necesitas un nuevo array transformado; filter cuando necesitas seleccionar parte de los elementos.

7. Trabajar con objetos

const usuario = {
    nombre: "Ana",
    edad: 22,
    esEstudiante: true
};

console.log(usuario.nombre);       // con punto
console.log(usuario["edad"]);      // con corchetes

usuario.ciudad = "Madrid";         // añadir una nueva propiedad
delete usuario.esEstudiante;       // eliminar una propiedad

Los corchetes son útiles cuando el nombre de la propiedad está guardado en una variable: usuario[key].

8. JSON: stringify y parse

JSON es un formato de intercambio de datos. En JavaScript, un objeto y un string JSON no son lo mismo — hace falta convertir entre ellos.

const usuario = { nombre: "Oscar", edad: 30 };

// objeto → string JSON
const json = JSON.stringify(usuario);
console.log(json); // '{"nombre":"Oscar","edad":30}'

// string JSON → objeto
const parseado = JSON.parse(json);
console.log(parseado.nombre); // "Oscar"

JSON.stringify se necesita sobre todo para enviar datos a un servidor o guardarlos en localStorage, y JSON.parse para el proceso inverso.

Qué sigue