Objetos y JSON · Lenguaje de marcas

Hoy · Hoja de ruta

1. Aprende: Cómo se modela una entidad con un objeto, y qué es JSON.
2. Haz: Sustituye tus arrays paralelos por un array de objetos.
3. Comprueba: Tu catálogo es una sola estructura, y sabes convertirla a texto y de vuelta.

Antes de empezar · 5 minutos, sin apuntes

Si borras el tercer nombre pero no el tercer precio, ¿qué ocurre?
¿Cómo guardarías juntos los datos de un mismo producto?
¿En qué formato crees que viajan los datos por internet?

Un objeto agrupa datos con nombre

const producto = {
  id: 1,
  nombre: "Teclado mecánico",
  precio: 89.9,
  categoria: "teclados",
  stock: 4,
  activo: true
};

producto.nombre           // "Teclado mecánico"
producto["precio"]        // 89.9, útil cuando la clave es una variable
producto.color            // undefined

Un catálogo, por tanto, es un array de objetos:

const catalogo = [
  { id: 1, nombre: "Teclado", precio: 89.9, stock: 4 },
  { id: 2, nombre: "Ratón", precio: 24.5, stock: 0 }
];

Esta es la estructura que vas a usar durante el resto del módulo: en la UD4 la pintarás en la página, en la UD5 la guardarás en un fichero y en la UD6 la servirá tu API.

Modificar, añadir y borrar propiedades

producto.stock = 3;              // modificar
producto.descuento = 0.1;        // añadir
delete producto.descuento;       // borrar

Object.keys(producto);           // ["id", "nombre", "precio", ...]
Object.values(producto);
Object.entries(producto);        // pares [clave, valor]

Una const con un objeto sí se puede modificar por dentro

const protege la asignación, no el contenido. Puedes cambiar las propiedades de un objeto declarado con const; lo que no puedes es apuntarlo a otro objeto distinto.

De ahí sale otro clásico: dos variables que apuntan al mismo objeto. Modificar una cambia «las dos», porque siempre fue una. Para copiar de verdad: { ...producto }.

Anidar y acceder con seguridad

const pedido = {
  id: 1001,
  cliente: { nombre: "Ana", email: "ana@ejemplo.com" },
  lineas: [{ producto: "Teclado", unidades: 1 }]
};

pedido.cliente.nombre            // "Ana"
pedido.lineas[0].unidades        // 1
pedido.envio.direccion           // TypeError: no se puede leer de undefined
pedido.envio?.direccion          // undefined, sin romper nada

El interrogante es el encadenamiento opcional: si lo de la izquierda no existe, devuelve undefined en lugar de lanzar un error. Es el remedio a un fallo que verás mucho al consumir datos ajenos.

Desestructurar

const { nombre, precio } = producto;
const [primero, segundo] = catalogo;

function describir({ nombre, precio }) {
  return `${nombre} · ${precio.toFixed(2)} €`;
}

Sacar las propiedades que necesitas y darles nombre. Ahorra repetir producto. diez veces y hace explícito qué usa cada función.

JSON, el formato de intercambio

JSON

Un formato de texto para representar datos, nacido de la sintaxis de los objetos de JavaScript pero independiente de él: lo entienden Java, Python, PHP y cualquier otro lenguaje. Es como viajan los datos entre un navegador y un servidor.

const texto = JSON.stringify(producto);          // objeto → texto
const texto2 = JSON.stringify(producto, null, 2); // con sangría, legible
const recuperado = JSON.parse(texto);            // texto → objeto

Sus reglas son más estrictas que las de JavaScript:

{
  "nombre": "Teclado mecánico",
  "precio": 89.9,
  "stock": 4,
  "activo": true,
  "etiquetas": ["mecánico", "retroiluminado"]
}

Las claves van siempre entre comillas dobles, no se admiten comillas simples, ni comas finales, ni comentarios, ni funciones, ni undefined. Y JSON.parse de un texto mal formado lanza un error: en la sesión 14 lo trataremos como se debe.

Tarea 12 · El catálogo de verdad

Reescribe js/datos.js:

Convierte tus arrays paralelos en un array de al menos ocho objetos, con id, nombre, precio, categoria, stock y descripcion.
Adapta las funciones de la sesión 11 a la nueva estructura.
Escribe describir(producto) usando desestructuración en el parámetro.
Convierte el catálogo a JSON con sangría y obsérvalo.
Vuelve a convertirlo a objeto y comprueba que todo sigue igual.
Rompe el JSON a propósito y observa el error de JSON.parse.

Objetivo mínimoCatálogo de objetos, funciones adaptadas y conversión de ida y vuelta.

Si lo tienesAñade una propiedad anidada y accede a ella con encadenamiento opcional.

RetoEscribe una función que devuelva una copia del catálogo con todos los precios subidos un 5 %, sin tocar el original.

Cierre de la semana 4

Tu catálogo es un array de objetos, no listas paralelas.
Consultas ese catálogo con métodos declarativos.
Sabes copiar un objeto y por qué hace falta.
Conviertes a JSON y desde JSON, y sabes qué reglas tiene.

Ver respuestas

1 · Sí: const impide reasignar la variable, no modificar el objeto al que apunta.

2 · Las claves entre comillas dobles, sin comas finales, sin comentarios y sin funciones.

3 · Lanza un SyntaxError, que hay que capturar.

Microprueba semanal 4 · 5–10 minutos

Individual, sin IA y sin apuntes.

Di qué método usarías para: los productos caros, el primero caro, saber si hay alguno caro, y el valor total del almacén.
Ordena una lista de números de menor a mayor sin alterar la original.
Escribe el JSON de un producto con tres campos, respetando sus reglas.

---