Objetos y JSON

⏱ 45 minutos
📶 Nivel: principiante
🧩 Incluye ejercicio

💡 🎯 Al terminar esta lección podrás…

Crear y modificar objetos, y acceder a sus propiedades de varias formas.
Usar desestructuración, spread y Object.entries.
Leer datos con seguridad usando ?. y ??.
Convertir datos a JSON y procesar listas de objetos.

1.Qué es un objeto

Un objeto agrupa datos relacionados bajo nombres (propiedades). Mientras un array es una lista ordenada por posición ([0], [1]…), un objeto es un conjunto de pares nombre–valor: describe una cosa con todas sus características.

Un objeto que describe a una persona

const persona = {
  nombre: "Ana",
  edad: 28,
  activa: true,
  hobbies: ["leer", "correr"],
  direccion: { ciudad: "Lima", pais: "Perú" }
};

console.log(persona.nombre);              // notación de punto: "Ana"
console.log(persona["edad"]);             // notación de corchetes: 28
console.log(persona.direccion.ciudad);    // objetos dentro de objetos: "Lima"
console.log(persona.hobbies[0]);          // "leer"

Aspecto	Array	Objeto
Se identifica por	Posición (`0`, `1`…)	Nombre (`"nombre"`)
Ideal para	Una lista de cosas parecidas	Una cosa con varias características
Sintaxis	`[ … ]`	`{ clave: valor }`

▶ Crear y modificar un objeto

Código (edítalo y pulsa Ejecutar)

<script>
  const libro = { titulo: "El principito", autor: "Saint-Exupéry", paginas: 96 };

  console.log(libro.titulo);
  libro.paginas = 100;               // modificar
  libro.leido = true;                // añadir una propiedad
  delete libro.autor;                // eliminar
  console.log(libro);

  const clave = "titulo";
  console.log(libro[clave]);         // los corchetes admiten variables
  console.log("leido" in libro);     // ¿existe la propiedad?
</script>

Página (resultado)

Consola

2.Métodos y this

Una propiedad cuyo valor es una función se llama método. Dentro de él, this apunta al objeto que lo llamó:

▶ Métodos

Código (edítalo y pulsa Ejecutar)

<script>
  const cuenta = {
    titular: "Ana",
    saldo: 100,
    depositar(monto) {
      this.saldo += monto;
      return this.saldo;
    },
    resumen() {
      return `${this.titular} tiene $${this.saldo}`;
    }
  };

  cuenta.depositar(50);
  console.log(cuenta.resumen());
</script>

Página (resultado)

Consola

⚠️ Importante · this y las funciones flecha

Las funciones flecha no tienen su propio this: heredan el del lugar donde se escribieron. Por eso, para los métodos de un objeto, usa la forma normal (nombre() { … }), no una flecha.

3.Atajos modernos: shorthand, desestructurar y spread

▶ Sintaxis cómoda

Código (edítalo y pulsa Ejecutar)

<script>
  const nombre = "Ana", edad = 28;

  // 1. Propiedades abreviadas: { nombre: nombre } → { nombre }
  const persona = { nombre, edad };
  console.log(persona);

  // 2. Desestructurar: sacar propiedades en variables
  const { nombre: n, edad: e, pais = "desconocido" } = persona;
  console.log(n, e, pais);

  // 3. Spread: copiar y actualizar sin modificar el original
  const actualizada = { ...persona, edad: 29, ciudad: "Lima" };
  console.log(persona.edad, actualizada);

  // 4. Desestructurar en los parámetros de una función
  function presentar({ nombre, edad }) { return `${nombre} (${edad})`; }
  console.log(presentar(actualizada));
</script>

Página (resultado)

Consola

4.Recorrer objetos

Función	Devuelve	Ejemplo
`Object.keys(o)`	Array con las claves	`["nombre", "edad"]`
`Object.values(o)`	Array con los valores	`["Ana", 28]`
`Object.entries(o)`	Array de pares `[clave, valor]`	`[["nombre","Ana"], ["edad",28]]`
`Object.assign(a, b)`	Copia propiedades de `b` en `a`	(mejor usa spread)
`Object.fromEntries(pares)`	Crea un objeto desde pares	Inverso de `entries`

▶ Recorrer un objeto

Código (edítalo y pulsa Ejecutar)

<script>
  const precios = { pan: 20, leche: 25, huevos: 45 };

  for (const [producto, precio] of Object.entries(precios)) {
    console.log(`${producto}: $${precio}`);
  }

  const total = Object.values(precios).reduce((s, p) => s + p, 0);
  console.log("Total:", total);

  // Transformar un objeto: subir todo un 10%
  const nuevos = Object.fromEntries(
    Object.entries(precios).map(([producto, precio]) => [producto, precio * 1.1])
  );
  console.log(nuevos);
</script>

Página (resultado)

Consola

5.Acceso seguro: ?. y ??

Si pides una propiedad de algo que no existe (undefined o null), JavaScript lanza un error. El encadenamiento opcional ?. lo evita:

▶ Encadenamiento opcional

Código (edítalo y pulsa Ejecutar)

<script>
  const usuario = { nombre: "Ana", direccion: null };

  // console.log(usuario.direccion.ciudad);   // ← TypeError: Cannot read properties of null
  console.log(usuario.direccion?.ciudad);       // undefined, sin error
  console.log(usuario.direccion?.ciudad ?? "sin ciudad");   // valor por defecto

  console.log(usuario.hobbies?.[0]);            // también con arrays
  console.log(usuario.saludar?.());             // y con métodos
</script>

Página (resultado)

Consola

💡 Consejo · Combina ?. y ??

?. devuelve undefined si algo en la cadena falta, y ?? aporta un valor por defecto solo para null/undefined. Son muy útiles con datos que llegan de internet, donde nunca sabes qué campos faltan.

6.JSON: el formato de intercambio

JSON (*JavaScript Object Notation*) es un formato de texto para intercambiar datos entre programas. Se parece a un objeto de JavaScript, con reglas más estrictas: las claves y los textos van entre comillas dobles y no admite funciones ni undefined.

Función	Hace	Ejemplo
`JSON.stringify(valor)`	Convierte un valor a texto JSON	`JSON.stringify({a: 1})` → `'{"a":1}'`
`JSON.parse(texto)`	Convierte texto JSON en un valor	`JSON.parse('{"a":1}')` → `{a: 1}`

▶ Ida y vuelta con JSON

Código (edítalo y pulsa Ejecutar)

<script>
  const tarea = { id: 1, texto: "Estudiar JS", hecha: false, etiquetas: ["curso", "web"] };

  const texto = JSON.stringify(tarea);
  console.log(texto);
  console.log(typeof texto);

  const bonito = JSON.stringify(tarea, null, 2);       // con sangría
  console.log(bonito);

  const vuelta = JSON.parse(texto);
  console.log(vuelta.etiquetas[1], typeof vuelta);

  // Una copia profunda
  const copia = structuredClone(tarea);
  copia.etiquetas.push("nuevo");
  console.log(tarea.etiquetas.length, copia.etiquetas.length);
</script>

Página (resultado)

Consola

📌 Nota · Para qué sirve

JSON es el formato en que casi todas las APIs devuelven datos y en que se guardan cosas en localStorage (lecciones 10 y 11). Un error de sintaxis en el texto hace que JSON.parse lance una excepción, así que se suele envolver en try…catch.

7.Arrays de objetos: el patrón más común

En la práctica, casi todos los datos son listas de objetos: usuarios, productos, tareas, mensajes. Y todo lo que aprendiste de arrays se aplica:

▶ Una tienda pequeña

Código (edítalo y pulsa Ejecutar)

<script>
  const productos = [
    { id: 1, nombre: "Cuaderno", precio: 25,  categoria: "papeleria", stock: 10 },
    { id: 2, nombre: "Lápiz",    precio: 5,   categoria: "papeleria", stock: 0 },
    { id: 3, nombre: "Mochila",  precio: 450, categoria: "bolsas",    stock: 3 },
    { id: 4, nombre: "Regla",    precio: 12,  categoria: "papeleria", stock: 7 }
  ];

  const disponibles = productos.filter(p => p.stock > 0);
  console.log(disponibles.map(p => p.nombre));

  const mochila = productos.find(p => p.id === 3);
  console.log(mochila.nombre, mochila.precio);

  const valorInventario = productos.reduce((s, p) => s + p.precio * p.stock, 0);
  console.log("Inventario:", valorInventario);

  const porCategoria = productos.reduce((grupos, p) => {
    (grupos[p.categoria] ??= []).push(p.nombre);
    return grupos;
  }, {});
  console.log(porCategoria);
</script>

Página (resultado)

Consola

8.Un vistazo a las clases

Cuando necesitas crear muchos objetos con la misma forma y comportamiento, existen las clases: moldes para fabricar objetos.

▶ Una clase sencilla

Código (edítalo y pulsa Ejecutar)

<script>
  class Tarea {
    constructor(texto) {
      this.texto = texto;
      this.hecha = false;
    }
    completar() {
      this.hecha = true;
    }
    describir() {
      return `${this.hecha ? "✔" : "·"} ${this.texto}`;
    }
  }

  const t1 = new Tarea("Aprender clases");
  const t2 = new Tarea("Practicar");
  t1.completar();
  console.log(t1.describir());
  console.log(t2.describir());
</script>

Página (resultado)

Consola

📌 Nota · No son imprescindibles

Para empezar, funciones y objetos literales bastan para casi todo. Las clases te serán útiles más adelante, y las encontrarás en muchas bibliotecas. Con lo visto aquí ya puedes leerlas.

9.Errores frecuentes

Confundir . con []: obj.clave busca la propiedad literal «clave»; obj[clave] usa el valor de la variable.
Pensar que const hace el objeto inmutable: solo impide reasignar la variable; puedes cambiar sus propiedades (Object.freeze lo impide).
Copiar con = esperando una copia: const b = a; apunta al mismo objeto. Usa { ...a } o structuredClone(a).
Usar una flecha como método y perder this.
Leer una propiedad de undefined: usa ?. o comprueba antes.
Comparar objetos con ===: dos objetos distintos con el mismo contenido no son iguales.
JSON con comillas simples o con una coma final: no es válido.
Olvidar la coma entre propiedades.

📒 Apuntes para llevar

Un objeto agrupa datos relacionados en pares clave: valor; se accede con obj.clave o obj["clave"].
Una propiedad que es una función es un método; this apunta al objeto. Usa la sintaxis normal, no flechas, para métodos.
Atajos: propiedades abreviadas { nombre }, desestructuración const { a, b } = obj y spread { ...obj, a: 1 }.
Object.keys/values/entries convierten un objeto en arrays para recorrerlo.
?. evita errores con valores que faltan y ?? aporta valores por defecto.
JSON.stringify y JSON.parse convierten entre objetos y texto; structuredClone hace copias profundas.
Las listas de objetos son el formato más habitual de datos; los métodos de array funcionan igual.
Los objetos se copian y comparan por referencia, no por contenido.

10.Glosario

Término	Significado
Objeto	Conjunto de pares nombre–valor que describe una cosa.
Propiedad	Un par nombre–valor dentro de un objeto.
Método	Propiedad cuyo valor es una función.
`this`	En un método, el objeto que lo llamó.
Desestructuración	Sacar propiedades de un objeto en variables: `const { a } = obj`.
JSON	Formato de texto para intercambiar datos.
Referencia	Dirección de un objeto: dos variables pueden apuntar al mismo.
Encadenamiento opcional	Operador `?.` que evita errores si algo es `null` o `undefined`.

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.

¿Cómo accedes a la propiedad cuyo nombre está en la variable clave?

const a = { x: 1 }; const b = a; b.x = 2; ¿Cuánto vale a.x?

b y a apuntan al mismo objeto: los cambios se ven en ambos.

¿Cuál es una forma correcta de copiar un objeto de un solo nivel?

usuario?.direccion?.ciudad cuando direccion es null, devuelve…

El encadenamiento opcional corta la cadena y devuelve undefined.

¿Qué hace JSON.parse('{"a":1}')?

parse pasa de texto a valor; stringify hace lo contrario.

Tu progreso se guarda en este navegador y se refleja en el índice del curso.

💡 🚀 ¡Ahora te toca!

La práctica fija lo aprendido. Pasa al ejercicio de esta lección.

Ir al ejercicio