Qué es un objeto en programación: propiedades y valores

Imagina guardar los datos de un jugador con una lista:

let jugador = ["Joaco", 1500, 3];

¿Qué es el 1500? ¿Puntos, monedas, milisegundos? ¿Y el 3, vidas o nivel? Tendrías que recordar el orden exacto para siempre.

Un objeto le pone nombre a cada dato. Se escribe entre llaves { }, con nombre: valor.

Imagine storing a player's data with a list:

let player = ["Joaco", 1500, 3];

What is 1500? Points, coins, milliseconds? And the 3, lives or level? You would have to remember the exact order forever.

An object gives each value a name. Written between braces { }, as name: value.

<script>
  let jugador = {
    nombre: "Joaco",
    puntos: 1500,
    vidas: 3,
    tieneEscudo: true
  };

  console.log(jugador.nombre);
  console.log(jugador.puntos);
  console.log(jugador);
</script>

Cada dato se llama propiedad, y se pide con un punto: jugador.puntos. Se lee solo, sin recordar ningún orden.

Funcionan igual que las variables: puedes leerlas, cambiarlas y hasta crear nuevas sobre la marcha.

<script>
  let jugador = { nombre: "Joaco", puntos: 0, vidas: 3 };

  jugador.puntos += 250;              // cambiar
  jugador.nivel = 2;                  // crear una nueva
  console.log(jugador);

  // Y con lo que sabes de decisiones:
  if (jugador.vidas === 0) {
    console.log("Game over");
  } else {
    console.log(jugador.nombre + " sigue con " + jugador.vidas + " vidas");
  }
</script>

Acá es donde se juntan las dos ideas, y es como está armado prácticamente todo el software que existe: una lista de objetos.

Una tabla de puntajes, un carrito de compras, los mensajes de un chat, los enemigos de un nivel. Todos son esto.

<script>
  let ranking = [
    { nombre: "Ana",   puntos: 340 },
    { nombre: "Joaco", puntos: 500 },
    { nombre: "María", puntos: 210 }
  ];

  for (let j of ranking) {
    console.log(j.nombre + ": " + j.puntos);
  }

  console.log("---");

  // Buscar al mejor, con lo que ya sabes
  let mejor = ranking[0];
  for (let j of ranking) {
    if (j.puntos > mejor.puntos) {
      mejor = j;
    }
  }
  console.log("Gana " + mejor.nombre + " con " + mejor.puntos);
</script>

Variables, decisiones, bucles, funciones, listas y objetos. Con eso está construido todo el software que has usado en tu vida.

Lo que viene ahora es distinto: cómo hacer que esto se vea en una página web. Empezamos por HTML, que es la estructura.

Objetos: datos con nombre

Objects: data with names