Diccionario JavaScript

Quiero una caja con nombre donde guardar un valor, y poder cambiarlo después si hace falta.

let
↓
"Creá una caja llamada… y guardá esto adentro (después puedo cambiarlo)."

Un vaso normal: podés vaciarlo y volver a llenarlo con otra cosa.

let edad = 10;
edad = 11; // OK: el valor cambió

Crea una caja. El nombre es la etiqueta. El número (o texto) es lo que hay adentro. Con let, podés cambiar lo de adentro.

Olvidar las comillas en un texto: let nombre = Ada; (mal) → let nombre = "Ada"; (bien).

let puntos = 0;
puntos = puntos + 1;

¿Podés cambiar el valor de una variable creada con let?

Quiero guardar un valor que NO debería reasignarse después.

const
↓
"Creá una caja sellada: este valor no se puede reemplazar."

Un frasco sellado: podés mirar adentro, pero no cambiar el contenido por otro.

const PI = 3.14;
// PI = 3; ❌ TypeError

Igual que let para guardar, pero con candado: no podés hacer const x = 1; x = 2;

Usar const para un contador que va a subir. Si el valor cambia, usá let.

const nombre = "Ada";
console.log(nombre);

Si escribís const precio = 100; precio = 120; ¿qué pasa?

Quiero guardar palabras o frases, no números para calcular.

"Hola"
↓
"Esto es texto (lleva comillas)."

Un cartel escrito: las comillas son el marco del cartel.

let saludo = "Hola mundo";
let otro = 'Hola';

Todo lo que va entre comillas es texto. 10 es número; "10" es texto.

Sumar "3" + 10 y esperar 13: da "310" porque pega textos.

let ciudad = "Madrid";

¿"10" es número o texto?

Si ocurre esto, entonces hacé aquello.

if
↓
"Si ocurre esto…"

Un semáforo: si está verde, avanzás.

if (edad >= 18) {
  console.log("Mayor de edad");
}

Mira una condición. Si es verdadera, entra al bloque { }. Si no, lo salta.

Poner ; después del if: if (x); { … } — el ; corta el if y las llaves ya no le pertenecen.

if (llueve) {
  llevarParaguas();
}

¿El código dentro del if se ejecuta siempre?

Si no se cumplió lo del if, hacé esto otro.

else
↓
"Si no… entonces esto."

Si no hay helado de vainilla, pedí chocolate.

if (edad >= 18) {
  console.log("Adulto");
} else {
  console.log("Menor");
}

Es el plan B. Solo se usa cuando el if fue falso.

Escribir else sin un if antes, o poner otra condición en else (eso es else if).

if (tieneLlave) abrir(); else tocarTimbre();

¿else se ejecuta si el if fue verdadero?

Voy a revisar el valor que recibí para saber qué respuesta dar según cada caso.

switch (valor)
↓
"Revisá este valor y elegí el caso que coincida."

Un ascensor: mira qué botón apretaste (1, 2, 3…) y va a ese piso.

switch (mes) {
  case 1:
    return "Enero";
  case 2:
    return "Febrero";
  default:
    return "?";
}

Compara un valor con varios case. Cuando encuentra el que coincide, hace esa parte. default es el "si no es ninguno".

Olvidar break (en switches que no usan return) y que se ejecuten varios cases seguidos.

switch (dia) {
  case "lunes": console.log("Inicio"); break;
}

¿switch memoriza sintaxis o expresa una intención?

Repetí esto varias veces, con un contador que va subiendo.

for
↓
"Empezá en…; mientras…; después de cada vuelta, avanzá."

Un profesor revisando exámenes uno por uno: empieza en el 1, sigue hasta el último.

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

i es el contador. i++ significa «súbele 1». Se repite mientras la condición sea verdadera.

Confundir i++ (suma 1) con i + 1 sin guardar, o empezar en 1 cuando la lista empieza en 0.

for (let i = 0; i < 3; i++) {
  console.log("hola");
}

En for (let i = 0; i < 3; i++), ¿cuántas vueltas hay?

Mientras esto siga siendo verdad, seguí haciendo lo de adentro.

while
↓
"Mientras…, hacé esto."

Seguir sirviendo sopa mientras quede en la olla.

let n = 1;
while (n <= 3) {
  console.log(n);
  n++;
}

Mira la condición. Si es true, ejecuta el bloque y vuelve a mirar. Cuando sea false, para.

Olvidar aumentar el contador (n++) y crear un bucle infinito.

while (hayFila) {
  atenderCliente();
}

¿while necesita saber de antemano cuántas vueltas hará?

Guardá este proceso con un nombre para usarlo cuando yo diga ese nombre.

function
↓
"Creá una receta llamada… que haga esto."

Un botón: lo definís una vez; cada vez que lo apretás, hace la misma acción.

function saludar(nombre) {
  console.log("Hola " + nombre);
}
saludar("Ada");

Escribís los pasos una vez. Los ( ) al llamar significan: «ejecutá la receta ahora, con estos ingredientes».

Definir la función pero nunca llamarla (falta saludar()).

function duplicar(n) {
  return n * 2;
}

¿Qué significan los paréntesis al escribir saludar("Ada")?

Acá está la respuesta: devolvé este valor a quien llamó la función.

return
↓
"Aquí está la respuesta."

Entregar el pedido en la ventanilla: la función cocina y return entrega el plato.

function sumar(a, b) {
  return a + b;
}
let total = sumar(2, 3); // 5

return sale de la función y manda un valor hacia afuera. Sin return, la función «hace cosas» pero no entrega un resultado guardable.

Poner código después de return pensando que se va a ejecutar: return corta la función.

function mitad(n) {
  return n / 2;
}

¿return imprime en la consola?

Quiero guardar varios valores juntos, en orden, como una lista.

["a", "b", "c"]
↓
"Una fila de casilleros ordenados."

La lista del supermercado: ítem 1, ítem 2, ítem 3…

let frutas = ["manzana", "pera", "uva"];
console.log(frutas[0]); // manzana

Los corchetes [ ] crean la lista. El primer casillero es el 0, no el 1.

Pedir frutas[3] en una lista de 3 elementos → undefined (solo hay 0, 1 y 2).

let tareas = ["lavar", "barrer"];

En ["a","b","c"], ¿qué hay en la posición 1?

Decime cuántos elementos hay en esta lista.

lista.length
↓
"¿Cuántos hay?" (es un dato, no una acción)

El cartel del cajón que dice «hay 3 cosas».

let frutas = ["a", "b", "c"];
console.log(frutas.length); // 3

length es una PROPIEDAD: va sin paréntesis. Cuenta cuántos hay.

Escribir frutas.length() con paréntesis → error. No es un método.

if (tareas.length === 0) {
  console.log("Nada pendiente");
}

¿length lleva paréntesis?

Agregá esto al final de la lista.

lista.push(x)
↓
"Meté x al final."

Añadir un renglón nuevo al final de la lista del súper.

let frutas = ["pera"];
frutas.push("kiwi");
// ["pera", "kiwi"]

push es un MÉTODO (acción): lleva paréntesis. Después, length sube en 1.

Escribir frutas.push sin () — no hace nada útil; hace falta push("kiwi").

tareas.push("trapear");

¿push es propiedad o método?

Quiero una ficha con datos etiquetados: título, autor, edad…

{ clave: valor }
↓
"Una ficha con etiquetas, no casilleros numerados."

La ficha de una persona en una biblioteca: nombre, edad, teléfono.

let libro = {
  titulo: "El Principito",
  paginas: 96
};

Las llaves { } crean el objeto. Cada dato tiene nombre (clave), no número como en el array.

Usar libro[0] pensando que es un array. En objetos usás libro.titulo.

let user = { nombre: "Ada", edad: 20 };

¿Array y objeto se leen igual?

Quiero acceder a una característica o herramienta que pertenece a esta cosa.

cosa.detalle
↓
"El detalle DE esa cosa" / "su detalle".

auto.color = el color del auto. No «el auto del color».

libro.titulo;
elemento.textContent;
persona.nombre;

El punto se lee «de» o «su». Antes: la cosa. Después: lo que le pertenece (propiedad) o lo que puede hacer (método).

Inventar palabras después del punto: elemento.pizza no existe. Solo usás lo que esa cosa ya trae.

console.log(libro.autor);

¿Qué significa mejor auto.color?

Documento, buscá el elemento cuyo identificador es este.

document.getElementById("titulo")
↓
"Documento, buscá el id titulo."

Buscar una caja en el depósito por su etiqueta de código.

let titulo = document.getElementById("titulo");

document = la página. getElementById = la herramienta de búsqueda. Si no existe, devuelve null.

Escribir mal el id ("Titulo" vs "titulo") y recibir null.

let msg = document.getElementById("mensaje");

Si el id no existe, ¿qué devuelve getElementById?

Quiero leer o cambiar el texto que está dentro de este elemento.

elemento.textContent
↓
"El texto de este cartel."

El escrito en un cartel: el cartel es el elemento; el escrito es textContent.

mensaje.textContent = "Adiós";
console.log(mensaje.textContent);

Es una PROPIEDAD (sin ()). mensaje es el elemento completo; mensaje.textContent es solo el texto.

Pensar que textContent es magia. Es «el texto DE ese elemento» (punto = de).

titulo.textContent = "Hola";

¿textContent es propiedad o método?

Quiero cambiar cómo se ve: color, fondo, etc.

elemento.style.color
↓
"De este elemento, sus estilos, el color…"

Pintar la caja: primero la caja, luego la pintura (estilo).

caja.style.backgroundColor = "yellow";
titulo.style.color = "red";

Cadena: cosa → estilos → propiedad concreta. No inventás botones: style ya existe en el elemento.

Escribir background-color con guion en JS. En JS es backgroundColor (camelCase).

p.style.color = "blue";

¿Cómo se escribe el fondo en JavaScript?

Quiero agregar o quitar una «calcomanía» (clase CSS) al elemento.

elemento.classList.add("activo")
↓
"En su lista de clases, agregale activo."

Pegar una etiqueta adhesiva en la caja: la lista de etiquetas es classList; add es pegar.

caja.classList.add("activo");
caja.classList.remove("activo");

classList es la lista. add/remove/toggle son MÉTODOS (acciones) y llevan ().

Escribir elemento.class = "activo" y pisar todas las clases. Mejor classList.add.

btn.classList.add("grande");

En classList.add("activo"), ¿add es propiedad o método?

Cuando pase esto (por ejemplo un clic), ejecutá esta acción.

addEventListener("click", …)
↓
"Cuando hagan clic, hacé esto."

Poner un portero en la puerta: cuando alguien toca el timbre (evento), avisa y vos reaccionás.

boton.addEventListener("click", function () {
  alert("¡Clic!");
});

El elemento escucha un tipo de evento. Cuando ocurre, corre la función que le pasaste.

Escribir onclick en JS moderno mezclado raro, o olvidar que el segundo argumento es una función.

btn.addEventListener("click", saludar);

¿Qué es el "click" en addEventListener("click", …)?

Mostrame esto en la consola para ver qué está pasando.

console.log(x)
↓
"Mostrá x en la consola."

Decirle al ayudante: «anotá esto en el pizarrón para que yo lo vea».

console.log("Hola");
console.log(2 + 2);

No cambia la página visible. Sirve para vos, el programador, para inspeccionar valores.

Creer que console.log es lo mismo que return. Uno muestra; el otro entrega un valor.

console.log(edad);

¿El usuario de la web ve console.log en la página?

¿Estos dos valores son iguales (mismo valor y tipo)?

a === b
↓
"¿a es igual a b de verdad?"

Comparar dos carteles: ¿dicen exactamente lo mismo?

5 === 5;      // true
5 === "5";    // false (número ≠ texto)
5 == "5";     // true (evitalo: confunde)

=== es la comparación estricta. Preferila a == porque == convierte tipos solo y te puede engañar.

Usar = (asignar) en vez de === (comparar): if (x = 5) asigna, no pregunta.

if (nombre === "Ada") { … }

¿5 === "5" es verdadero?

Documento, buscá el primer elemento que coincida con este selector (como en CSS).

document.querySelector(".card")
↓
"Traé el primer .card."

En una fila de cajas etiquetadas .card, agarrás la primera.

let card = document.querySelector(".card");
let titulo = document.querySelector("#titulo");

Usa selectores CSS: .clase, #id, "p", etc. Solo el primero. Para todos: querySelectorAll.

Esperar una lista y usar querySelector (devuelve uno solo).

document.querySelector("h1").textContent = "Hola";

¿querySelector trae todos los .card?