Objetos y JSON en JavaScript: propiedades, métodos y this

Un objeto agrupa valores relacionados bajo nombres. Cada propiedad asocia una clave con un valor. Usa un objeto para un registro y un array de objetos para una lista ordenada. Los arrays paralelos pueden dejar de corresponderse cuando solo se ordena o modifica uno de ellos.

Crea y lee un registro

const book = { title: "Dune", pages: 412, available: true };
book.title;    // "Dune"
book["title"]; // "Dune"

Los valores de las propiedades pueden ser arrays, objetos o funciones, además de valores primitivos. Las claves son cadenas o símbolos; estos ejemplos usan cadenas. Las claves de cadena que son identificadores válidos no necesitan comillas. Las claves que contienen espacios o guiones necesitan comillas: { "release-year": 1965 }. Las claves numéricas se convierten en cadenas, por lo que { 1: "a" } tiene la clave "1". Los literales de objeto permiten una coma final.

El acceso con punto usa el nombre literal después del punto. El acceso con corchetes evalúa una expresión:

const field = "pages";
book[field]; // 412
book.field;  // undefined

La segunda expresión busca una propiedad llamada "field". Los corchetes también permiten usar book["release-year"]. Una propiedad ausente devuelve undefined; seguir accediendo a través de ella, como en book.author.name, lanza un TypeError cuando falta la propiedad del autor.

Modifica el contenido del objeto

book.author = "Frank Herbert";
book.pages = 896;
delete book.available;

La asignación añade una propiedad ausente o sustituye un valor existente. La eliminación quita la propia propiedad, por lo que "available" in book ahora es falso. const mantiene la variable vinculada a este objeto, pero permite modificar su contenido.

Para const reading = { city: "Nairobi", tempC: 24.5 };, reading.tempC += 1.5; almacena 26. Después, reading.humidity = 61; añade un campo. Con const key = "humidity";, reading[key] lee 61. Un nombre como tempC hace visible la unidad de la medición.

Usa variables en un literal

const name = "Lena";
const age = 29;
const person = { name, age };
const lang = "nl";
const greeting = { [lang]: "Hallo" };

La sintaxis abreviada { name, age } significa { name: name, age: age }. Un nombre calculado evalúa la expresión dentro de los corchetes: greeting tiene la propiedad "nl". Sin esos corchetes, { lang: "Hallo" } crearía la clave literal "lang".

Comprobar si existe un campo es distinto de comprobar su valor. Una cadena vacía, cero o false pueden ser valores almacenados perfectamente válidos.

Plantea la pregunta adecuada sobre la existencia

const item = { stock: 0, note: undefined };
Object.hasOwn(item, "stock"); // true
"note" in item;                // true
Boolean(item.stock);          // false

Object.hasOwn(obj, key) comprueba solo las propiedades propias del objeto. El operador in también comprueba las propiedades heredadas: "toString" in {} es true, mientras que Object.hasOwn({}, "toString") es false. El código más antiguo suele llamar a obj.hasOwnProperty(key).

Una condición como if (item.stock) comprueba si el valor es verdadero en contexto booleano. No puede distinguir un campo ausente de uno presente que contiene cero. El mismo problema se aplica a "", false, null, undefined y NaN. Incluso un valor undefined puede pertenecer a una propiedad existente, como ocurre con note arriba.

Elige claves, valores o pares

Para const scores = { Ana: 82, Ben: 74, Chen: 91 };, estas funciones devuelven arrays de las propiedades propias y enumerables con claves de cadena:

El objeto no tiene una longitud como la de un array: scores.length es undefined. Object.keys(scores).length cuenta tres propiedades. Para sumar las puntuaciones, reduce los valores con un cero inicial. Su suma es 247 y su media es aproximadamente 82,33.

Recorre con ambas partes disponibles

let bestName;
let bestScore = -Infinity;
for (const [name, score] of Object.entries(scores)) {
  if (score > bestScore) {
    bestName = name;
    bestScore = score;
  }
}

El bucle compara 82, 74 y después 91 con la mejor puntuación encontrada hasta ese momento. Termina con "Chen" y 91. El patrón de corchetes da nombres a las dos partes de cada par.

Un objeto ordinario no es iterable, por lo que for...of scores lanza un TypeError. Object.entries(scores) proporciona un array iterable. El bucle más antiguo for...in produce claves de cadena y puede incluir propiedades heredadas enumerables.

Transforma las entradas de nuevo en un objeto

const weightsG = { flour: 500, sugar: 250, salt: 5 };
const weightsKg = Object.fromEntries(
  Object.entries(weightsG).map(([item, g]) => [item, g / 1000])
);

entries produce pares, map cambia cada valor y conserva su clave, y fromEntries reconstruye el registro. El resultado es { flour: 0.5, sugar: 0.25, salt: 0.005 }; weightsG permanece sin cambios.

El orden de las propiedades propias está definido. Las claves de índice de array desde "0" hasta "4294967294" aparecen primero en orden ascendente; las demás claves de cadena siguen el orden de inserción. Un cero inicial, como en "01", impide que una clave sea un índice de array. Así, Object.keys({ b: 1, 2: "x", a: 2, 1: "y" }) da ["1", "2", "b", "a"]. Usa un array cuando las posiciones tengan significado.

Dos variables pueden hacer referencia a un mismo objeto. Antes de predecir una actualización, determina si el código creó un objeto nuevo o copió una referencia a uno existente.

Sigue la identidad por separado de los datos

const p1 = { x: 1 };
const p2 = p1;
p2.x = 99;
p1.x;       // 99
p1 === p2;  // true

La asignación copió la referencia. Ambos nombres acceden a la misma propiedad. La asignación de valores primitivos funciona de otra manera: después de let a = 5; let b = a; b = 6;, a sigue siendo 5.

Los objetos se comparan por identidad tanto con === como con ==. Dos literales crean objetos separados aunque todos sus campos coincidan: ({ x: 1 } === { x: 1 }) es false. Para comparar sus datos, compara las propiedades pertinentes. Que se muestren de la misma forma no comprueba su identidad.

Pasar un objeto a una función también copia su referencia. Una función que ejecuta order.status = "shipped"; modifica el objeto de quien la llama. Devolver { ...order, status: "shipped" } en su lugar crea un registro nuevo en el nivel superior.

Distingue const, la congelación y la copia

const cart = { items: 2 }; permite cart.items = 3;, pero la reasignación cart = {}; lanza un TypeError. Object.freeze(cart) bloquea los cambios en sus propiedades propias. En modo estricto, los intentos de añadirlas, eliminarlas o sobrescribirlas lanzan un TypeError.

La congelación es superficial. Si un registro congelado contiene otro objeto, los campos de ese objeto anidado aún pueden cambiar. Un contenedor congelado y una estructura que no puede modificarse en profundidad son cosas distintas.

Sigue una copia superficial

const settings = { theme: "dark", font: { size: 14 } };
const copy = { ...settings };
copy.theme = "light";
copy.font.size = 18;

La propagación crea un objeto externo nuevo. Su valor theme se copia, por lo que cambiar copy.theme deja settings.theme como "dark". Su valor font es una referencia que se copia en ambos registros. Por tanto, actualizar copy.font.size hace que settings.font.size también sea igual a 18.

Object.assign({}, settings) también crea una copia superficial. Una copia superficial separa el registro externo, pero conserva la identidad de los objetos y arrays anidados.

Copia los datos anidados cuando deban ser independientes

const deep = structuredClone(settings);
deep.font.size = 22;
settings.font.size; // 18

structuredClone copia objetos y arrays anidados, junto con valores compatibles como Map, Set y Date. También maneja referencias circulares. El nuevo font anidado puede cambiar de forma independiente. Las funciones no se pueden clonar de este modo: un objeto que contiene un método provoca un DataCloneError.

Una conversión de ida y vuelta mediante JSON, JSON.parse(JSON.stringify(obj)), copia solo datos compatibles con JSON. Omite las propiedades de objeto que contienen undefined o funciones, convierte fechas en cadenas y pierde las entradas de Map y Set salvo que las conviertas. Elige una clonación para obtener datos de JavaScript compatibles e independientes, y elige JSON cuando quieras crear una representación de texto.

Los datos anidados combinan registros y listas. Lee una ruta paso a paso y comprueba si cada paso llega a un objeto, un array o un valor final.

Lee y procesa una lista dentro de un registro

const order = {
  id: 1042,
  customer: { name: "Sara", city: "Lisbon" },
  items: [
    { product: "Tea", qty: 2, unitPrice: 4.5 },
    { product: "Mug", qty: 1, unitPrice: 9 }
  ]
};

order.customer.city lee "Lisbon". order.items[1].product selecciona primero el array de artículos, después su segundo registro y luego "Mug". order.items.length es 2.

Los métodos de array que ya conoces funcionan con propiedades de registros. map(item => item.product) produce nombres de productos. filter(item => item.qty > 1) conserva la línea del té. find(item => item.product === "Mug") devuelve el registro existente de la taza, por lo que modificar el registro devuelto modifica el artículo del pedido.

Para calcular el total, usa order.items.reduce((sum, item) => sum + item.qty * item.unitPrice, 0). La primera línea suma 9; la segunda suma otros 9, lo que da 18. Calcular un total cuando se necesita evita que un total almacenado por separado quede desactualizado cuando cambian los artículos.

Lee datos opcionales con una alternativa de respaldo

order.shipping?.date;                 // undefined
order.customer?.city ?? "unknown";    // "Lisbon"

El encadenamiento opcional, ?., se detiene cuando el valor inmediatamente a su izquierda es null o undefined. Un acceso directo con order.shipping.date lanzaría un TypeError. Usa una comprobación en cada enlace opcional de una ruta más larga. El acceso con corchetes y las llamadas también lo admiten: order.items?.[0] y order.print?.().

El encadenamiento opcional es para valores que pueden faltar. Los campos obligatorios siguen necesitando comprobaciones o errores que revelen un registro incorrecto. No puede aparecer a la izquierda de una asignación: order.shipping?.date = "2026-05-01" es un error de sintaxis.

El operador de coalescencia nula, ??, usa su lado derecho solo para null o undefined. Conserva cero, false y "". Para const qty = 0;, qty ?? 1 sigue siendo cero, mientras que qty || 1 pasa a ser 1 porque || sustituye todos los valores falsos en contexto booleano.

Elige una estructura útil

Un array de registros es adecuado para enumerar, filtrar y ordenar. Un objeto con claves basadas en ID permite la búsqueda directa: usersById["u23"].name. Un Map es útil cuando las claves de búsqueda se añaden y eliminan con frecuencia.

El JavaScript más reciente ofrece Object.groupBy, ampliamente disponible desde 2024:

const tasks = [
  { title: "Book flights", status: "done" },
  { title: "Pack", status: "todo" },
  { title: "Renew passport", status: "done" }
];
const grouped = Object.groupBy(tasks, task => task.status);

grouped.done contiene dos registros y grouped.todo contiene uno. El resultado no tiene prototipo, por lo que no tiene un método toString heredado. Una alternativa más antigua construye los arrays explícitamente para estas claves de estado:

const groupedOlder = tasks.reduce((groups, task) => {
  if (!Object.hasOwn(groups, task.status)) {
    groups[task.status] = [];
  }
  groups[task.status].push(task);
  return groups;
}, {});

El primer registro de cada grupo crea su array. Los registros posteriores se añaden a ese mismo array. Este acumulador es un objeto ordinario; el resultado del método más reciente no tiene prototipo. Usa nombres y tipos de valor coherentes entre los registros; nombres como distanceKm y tempC también mantienen visibles las unidades.

Un método es una propiedad cuyo valor es una función y a la que se llama a través de un objeto. Permite que una acción use los datos actuales del registro.

Escribe un método con this

const counter = {
  count: 0,
  increment() {
    this.count += 1;
    return this.count;
  }
};
counter.increment(); // 1
counter.increment(); // 2

La sintaxis abreviada increment() { ... } define una propiedad cuyo valor es una función ordinaria. En counter.increment(), el objeto receptor counter pasa a ser this. Cada llamada lee el contador almacenado, suma uno y devuelve el nuevo número.

Un count sin más selecciona una variable, no la propiedad. Si no hay una variable correspondiente, count += 1 lanza un ReferenceError. Usa this.count para acceder al campo del objeto receptor.

Lee una función o ejecútala

counter.increment lee un valor de tipo "function". Los paréntesis en counter.increment() la ejecutan y dan su valor de retorno. Al pasar una acción para usarla más adelante, el código que la recibe necesita la función, no el resultado de ejecutarla ahora.

Los métodos integrados también usan esta forma de llamada: Math.max(3, 7) devuelve 7 y "abc".toUpperCase() devuelve "ABC".

Reutiliza una acción

function describe() {
  return this.name + " (" + this.year + ")";
}
const film = { name: "Up", year: 2009, describe };
const song = { name: "Hello", year: 2015, describe };

film.describe() devuelve "Up (2009)"; song.describe() devuelve "Hello (2015)". Usar this permite que la misma función lea cualquiera de los dos objetos receptores. Escribir film.name directamente la vincularía a la variable de la película.

Devuelve el objeto receptor para otra acción

const playlist = {
  tracks: [],
  add(title) { this.tracks.push(title); return this; },
  count() { return this.tracks.length; }
};
playlist.add("Rain").add("Waves").count(); // 2

Cada llamada a add devuelve la lista de reproducción, lo que permite buscar el siguiente método en ese objeto. Devolver un número desde add rompería la cadena porque el siguiente add se buscaría en ese número.

La conversión ordinaria a JSON omite los métodos: al serializar { name: "Kit", hi() { return 1; } } solo se escribe name. El análisis no puede restaurar el código omitido. Los registros para guardar o intercambiar suelen contener datos ordinarios y usar funciones de procesamiento separadas.

Para una función ordinaria, la llamada determina this. Almacenar una función en un objeto no la vincula permanentemente a ese objeto.

Sigue el objeto receptor en la llamada

const a = { n: "A", who() { return this.n; } };
const b = { n: "B" };
b.who = a.who;
a.who(); // "A"
b.who(); // "B"

Ambas propiedades contienen la misma función. El objeto receptor antes del punto es distinto, por lo que los resultados son distintos. La ubicación original de la función no determina qué objeto lee.

Para una llamada sin receptor, f(), el modo estricto proporciona undefined como this. Los módulos de JavaScript siempre se ejecutan en modo estricto; un script o una función también pueden comenzar con "use strict";. Una función ordinaria no estricta llamada sin receptor usa en su lugar el objeto global, globalThis. En un navegador, ese objeto global es window.

Reconoce el contexto circundante de una función flecha

Una función flecha no tiene un this propio. Conserva el this del código circundante donde se creó. Un literal de objeto no crea un nuevo contexto de this.

// At the top level of a module:
const user = {
  name: "Ida",
  hi: () => "Hi, " + this.name
};

Llamar a user.hi() lanza un TypeError: la función flecha capturó el this del nivel superior del módulo, que es undefined. Cambiar la llamada para que parezca una llamada a método no puede dar a la función flecha un objeto receptor nuevo. En el nivel superior de un script clásico, el this circundante es, en cambio, el objeto global.

Usa un método ordinario cuando la acción necesite el objeto desde el que se llama. Usa una función flecha dentro de ese método cuando una función de devolución de llamada necesite conservar el contexto del método:

const group = {
  title: "Team",
  members: ["Ana", "Ben"],
  list() {
    return this.members.map(m => this.title + ": " + m);
  }
};
group.list(); // ["Team: Ana", "Team: Ben"]

list obtiene group de su llamada como método. La función flecha se crea dentro de ese método durante su ejecución y conserva el mismo this. Una función de devolución de llamada ordinaria en modo estricto, sin un objeto receptor proporcionado, recibiría undefined, por lo que this.title fallaría allí.

Sigue un orden de decisión

Cuando encuentres una llamada, identifica primero la función a la que se llama:

1. Una función flecha conserva su this circundante; call, apply y bind no pueden sustituirlo.
2. Una función ordinaria vinculada conserva su this vinculado, incluso mediante call o apply.
3. Una función ordinaria no vinculada a la que se llama con call o apply usa el this proporcionado.
4. Una llamada ordinaria obj.method() usa obj.
5. Una llamada ordinaria sin receptor usa undefined en modo estricto o el objeto global en modo no estricto.

Las funciones de devolución de llamada pueden recibir un objeto receptor de quien las llama. Por ejemplo, un detector ordinario de eventos del DOM registrado con addEventListener recibe como this el elemento en el que está registrado. Revisa cómo el código receptor invoca una función de devolución de llamada antes de suponer que es una llamada sin receptor.

Extraer un método de su objeto conserva la función, pero pierde la expresión de llamada original. Una función de devolución de llamada debe invocarse de forma que reciba el objeto que necesita.

Identifica un método desvinculado

const counter = {
  count: 0,
  increment() {
    this.count += 1;
    return this.count;
  }
};
const inc = counter.increment;
inc(); // TypeError in strict mode

inc() es una llamada sin receptor, por lo que this es undefined. Leer this.count falla antes de que pueda producirse un incremento. En código no estricto, una llamada sin receptor usa el objeto global y puede escribir un count global; no accede al contador.

El mismo problema aparece en las funciones de devolución de llamada de arrays. [1, 2].map(counter.increment) proporciona una función a map sin su objeto receptor original. Los valores del array que se pasan como argumentos no proporcionan this.

Envuelve la llamada al método

const results = [1, 2].map(() => counter.increment());
// results is [1, 2]; counter.count is 2

La función de devolución de llamada es una función flecha que realiza una llamada normal a counter.increment(). Esa llamada tiene un objeto receptor. La función envolvente ignora deliberadamente los valores que pasa map; cada invocación simplemente incrementa una vez. Esta forma resulta cómoda cuando solo se necesita la función de devolución de llamada en un lugar.

Vincula una función reutilizable

Partiendo de un contador nuevo en cero:

const boundInc = counter.increment.bind(counter);
const results = [1, 2].map(boundInc);
// results is [1, 2]; counter.count is 2

bind devuelve una función nueva; todavía no llama al método. La nueva función conserva counter como objeto receptor. Volver a vincularla a un objeto diferente no puede sustituir ese receptor. Cada llamada a bind crea una función distinta, así que guarda el resultado cuando el código deba reconocer exactamente la misma función de devolución de llamada más adelante.

La vinculación también puede fijar argumentos iniciales. function multiply(a, b) { return a * b; } seguido de const double = multiply.bind(null, 2); hace que double(21) devuelva 42. null ocupa la posición del objeto receptor porque esta función no usa this; 2 ocupa su primer parámetro ordinario.

Ejecuta una vez con call o apply

function describe(unit) {
  return this.value + " " + unit;
}
describe.call({ value: 12 }, "kg");    // "12 kg"
describe.apply({ value: 12 }, ["kg"]); // "12 kg"

Ambas formas se ejecutan inmediatamente con el objeto receptor elegido. call proporciona los argumentos por separado; apply los proporciona en un array. El contexto de una función flecha queda fijado por su entorno, por lo que estos métodos no pueden sustituir su this.

Pasar counter.increment() como función de devolución de llamada ejecuta el método inmediatamente y pasa el número que devuelve. Esa no es la función que necesita map. En un registro de eventos como button.addEventListener("click", counter.increment()), el contador cambia inmediatamente y el detector numérico provoca un TypeError. Pasa una función como valor, una función envolvente de tipo flecha o una función vinculada almacenada.

La desestructuración de objetos lee campos nombrados y los asigna a variables locales. Selecciona valores sin copiar todo el registro de origen.

Empareja y cambia nombres

const book = { title: "Dune", pages: 412 };
const { pages, title: bookTitle, rating: stars = 0 } = book;

El emparejamiento usa los nombres de las propiedades, no su orden. Esto declara pages con valor 412, bookTitle con "Dune" y stars con 0. No declara ninguna variable title ni rating: el nombre después de los dos puntos es el destino local.

Un campo ausente proporciona undefined. Un valor predeterminado sustituye solo a undefined y conserva null, cero, false y las cadenas vacías. Por tanto, const { a = 5 } = { a: null }; deja a con valor null.

Sigue los campos anidados

const data = {
  location: { name: "Oslo" },
  current: { tempC: -3, windKph: 18 }
};
const {
  location: { name },
  current: { tempC, windKph: wind }
} = data;

Las variables declaradas son name, tempC y wind, que contienen "Oslo", -3 y 18. Los nombres externos location y current seleccionan rutas; no se convierten también en variables.

La ausencia de un objeto externo hace que falle una lectura anidada. const { shipping: { date } } = {}; lanza un TypeError. Proporciona un valor predeterminado externo cuando ese campo pueda ser undefined:

const { shipping: { date } = {} } = {};
// date is undefined

Esto no sustituye shipping cuando su valor es null. Desestructurar directamente null o undefined también lanza un error, por lo que el origen debe poder usarse antes de comenzar la extracción.

Recibe opciones nombradas

function formatUser({ name, age = "unknown" }) {
  return name + ", " + age;
}

formatUser({ name: "Mo" }) devuelve "Mo, unknown". Cambiar el orden de los campos en { age: 40, name: "Ines" } sigue devolviendo "Ines, 40". Llamar a formatUser sin argumentos falla porque no hay ningún objeto del que extraer valores. Un valor predeterminado para todo el parámetro permite esa llamada:

function greet({ name = "guest" } = {}) {
  return "Hi, " + name;
}
greet(); // "Hi, guest"

El valor predeterminado externo maneja un argumento omitido; el interno maneja un nombre ausente. Pasar null sigue provocando un error. Para asignar valores a variables existentes, rodea con paréntesis una sentencia con un patrón de objeto: let x, y; ({ x, y } = { x: 4, y: 7 });. De lo contrario, las llaves iniciales se interpretan como un bloque de sentencias.

La desestructuración de arrays lee valores por posición de un iterable. Las comas controlan qué valores se seleccionan; los nombres de las variables no eligen las posiciones.

Selecciona u omite posiciones

const medals = ["gold", "silver", "bronze"];
const [first, second] = medals;
const [, , third] = medals;

Las variables reciben "gold", "silver" y "bronze". Las posiciones vacías consumen valores sin declarar variables. Un nombre situado más allá de los valores disponibles recibe undefined. Los valores predeterminados sustituyen solo a undefined:

const [p, q = 10] = [1]; // p is 1; q is 10
const [r = 10] = [null]; // r is null

Recopila los valores restantes

const [head, ...tail] = [1, 2, 3, 4];
// head is 1; tail is [2, 3, 4]

El elemento de resto final crea un array nuevo, vacío cuando no queda nada. Debe ir al final. Los valores de objeto dentro de ese array conservan su identidad; recopilarlos no los clona en profundidad.

Lee un par devuelto o intercambia variables

function minMax(nums) {
  return [Math.min(...nums), Math.max(...nums)];
}
const [lo, hi] = minMax([4, 9, 1]);
// lo is 1; hi is 9

Quien llama sigue el orden acordado por la función que devuelve los valores. Para muchos campos de resultado, las propiedades de objeto nombradas evitan tener que recordar posiciones.

Con let x = 1, y = 2;, [x, y] = [y, x]; intercambia las variables. El array de la derecha se evalúa como [2, 1] antes de cualquiera de las asignaciones, lo que conserva ambos valores anteriores sin una variable temporal.

Extrae valores de otros iterables

También se pueden extraer valores de cadenas y Set: const [initial] = "Zoe"; da "Z". Los Set proporcionan valores en orden de inserción. Las entradas de Map son pares ordenados:

const distances = new Map([["park", 2], ["lake", 5]]);
for (const [place, distanceKm] of distances) {
  console.log(place, distanceKm);
}

El bucle recibe un par y después el patrón separa su clave y su valor. Object.entries proporciona la misma estructura de pares.

Un objeto ordinario no es iterable, por lo que const [name] = { name: "Ana" }; lanza un TypeError. Usa llaves para seleccionar su campo nombrado: const { name } = { name: "Ana" };. Los corchetes requieren una secuencia de valores; las llaves seleccionan propiedades por nombre.

Los tres puntos, ..., tienen dos funciones relacionadas. La propagación expande datos existentes en un valor o una llamada. El resto recopila valores en una variable donde la declara un patrón o un parámetro.

Combina en orden de prioridad

const defaults = { lang: "en", units: "metric", alerts: true };
const user = { lang: "pt", alerts: false };
const options = { ...defaults, ...user };
// { lang: "pt", units: "metric", alerts: false }

La propagación de propiedades de objetos copia las propiedades propias y enumerables. Cuando una clave vuelve a aparecer, prevalece el valor posterior. Colocar user antes de defaults sobrescribiría la configuración del usuario. Propagar null o undefined en un objeto no añade nada.

Las copias mediante propagación son superficiales. Si cambia un registro anidado, copia también ese nivel:

const settings = { theme: "dark", font: { size: 14, family: "serif" } };
const next = {
  ...settings,
  font: { ...settings.font, size: 18 }
};

La propagación externa conserva theme. La interna conserva family y sustituye size. settings.font.size sigue siendo 14 porque el registro anidado modificado es nuevo.

Sustituye un registro de una lista

const todos = [{ id: 1, done: false }, { id: 2, done: false }];
const updated = todos.map(t =>
  t.id === 2 ? { ...t, done: true } : t
);

map crea un array nuevo. El elemento que coincide se convierte en un objeto nuevo, por lo que updated[1].done es true mientras que todos[1].done sigue siendo false. El primer elemento, que no cambia, se reutiliza: updated[0] === todos[0] es true. Las actualizaciones independientes no requieren copiar los registros que no cambian.

Expande valores de iterables

En un literal de array o una llamada a función, la propagación toma valores de un iterable. [...a, ...b] une sus valores en un array nuevo. Math.max(...[4, 9, 1]) pasa tres argumentos y devuelve 9. Un objeto ordinario no puede expandirse en un array: [...{ a: 1 }] lanza un TypeError. La propagación de propiedades de objetos y la de valores de iterables usan reglas distintas para determinar qué leen.

Recopila argumentos o propiedades restantes

function total(...nums) {
  return nums.reduce((sum, n) => sum + n, 0);
}
total(2, 3, 5); // 10
total();        // 0

Un parámetro de resto recibe un array real, incluso cuando no recibe ningún valor. Debe ser el último parámetro y solo puede haber uno. El antiguo objeto arguments no es un array real. Las funciones flecha no tienen un arguments propio, aunque pueden leer el enlace de una función ordinaria que las contiene.

El resto de propiedades de un objeto recopila las propiedades propias y enumerables que aún no se han seleccionado:

const userRecord = { id: 8, name: "Rae", password: "x9!k" };
const { password, ...publicUser } = userRecord;
// publicUser is { id: 8, name: "Rae" }

Esto crea un registro nuevo y deja el origen sin cambios. La propiedad de resto debe ir al final. Fíjate en la posición para distinguir las funciones: los tres puntos en un literal o una llamada expanden hacia fuera; los tres puntos en una lista de parámetros o un destino de desestructuración recopilan hacia dentro.

Un Map almacena asociaciones entre claves y valores. A diferencia de las claves de cadena de un objeto ordinario, una clave de Map puede ser un número, un objeto u otro valor sin convertirse en una cadena.

Crea y mantén entradas

const stock = new Map();
stock.set("apples", 12).set("pears", 7);
stock.get("apples"); // 12
stock.has("kiwis");  // false
stock.size;           // 2

set añade una entrada o sustituye su valor y devuelve el Map para permitir el encadenamiento. get devuelve undefined para una clave ausente; usa has para distinguirla de una entrada que almacena undefined. delete(key) devuelve si eliminó una entrada y clear() vacía la colección.

La notación de corchetes usa una zona de almacenamiento distinta: stock["plums"] = 5; añade una propiedad ordinaria al objeto Map. No crea una entrada visible para get, has o size. Usa los métodos de Map para las entradas.

Conserva los tipos y las identidades de las claves

m.set(1, "number"); m.set("1", "text"); crea dos entradas. Las claves 1 y "1" de un objeto ordinario harían referencia a una sola propiedad. Las claves de Map se comparan como con ===, salvo que NaN coincide consigo mismo y los ceros con signo comparten una clave.

const person = { id: 1 };
const notes = new Map([[person, "ready"]]);
notes.get(person);      // "ready"
notes.get({ id: 1 });   // undefined

La segunda búsqueda crea un objeto nuevo. Que los campos coincidan no lo convierte en la misma clave. Conserva y reutiliza la referencia al objeto original cuando uses un objeto como clave.

Recorre y convierte pares

for (const [name, count] of stock) {
  console.log(name, count);
}

Un Map proporciona pares [key, value] en el orden de la primera inserción. Sustituir un valor no mueve su clave. keys(), values() y entries() devuelven iteradores que puedes recorrer o propagar en arrays. forEach pasa a su función de devolución de llamada primero el valor y después la clave.

new Map(Object.entries(obj)) convierte las entradas de un registro en un Map. Object.fromEntries(map) crea un objeto; úsalo cuando las claves sean cadenas, porque las claves de objeto no pueden conservar todos los tipos de clave de Map. [...map] crea un array de pares, útil para guardar las entradas de un Map como JSON.

Cuenta claves que cambian

const words = "the cat saw the dog and the bird".split(" ");
const counts = new Map();
for (const word of words) {
  counts.set(word, (counts.get(word) ?? 0) + 1);
}

La primera aparición comienza en cero y después suma uno. Las apariciones posteriores leen y aumentan la cuenta almacenada. counts.get("the") es 3 y counts.size es 6: el tamaño cuenta palabras distintas, no las ocho apariciones.

Elige un objeto ordinario para un registro con campos conocidos, especialmente para datos compatibles con JSON. Elige un Map para claves que cambian, comprobaciones frecuentes del tamaño o claves cuyos tipos deban conservarse. El método más reciente Map.groupBy conserva los tipos de las claves de grupo:

const owner = { name: "Ari" };
const jobs = [{ owner, done: false }, { owner, done: true }];
const byOwner = Map.groupBy(jobs, job => job.owner);
byOwner.get(owner).length; // 2

En código más antiguo, recorre las tareas. Para cada propietario, usa has y set para crear una sola vez un array de grupo y después get(owner).push(job) para añadir el registro. Mantener el propietario como clave de objeto distingue a propietarios diferentes incluso cuando sus campos de nombre coinciden. Un WeakMap puede asociar metadatos a objetos sin mantener vivos objetos usados como claves que de otro modo serían inalcanzables. No permite la iteración ni tiene tamaño. Los WeakMap modernos también aceptan símbolos no registrados como claves.

Un Set almacena valores únicos. Sus preguntas principales son si un valor está presente y cómo se solapan dos colecciones.

Añade y comprueba valores

const tags = new Set(["js", "css", "js"]);
tags.size;       // 2
tags.add("html");
tags.has("css"); // true

Añadir un valor existente no cambia nada. add devuelve el Set para permitir el encadenamiento. delete(value) devuelve si se eliminó el valor, mientras que clear() elimina todos los valores. El constructor recibe un iterable: usa new Set([1, 2, 3]). new Set(1, 2, 3) lanza un TypeError porque su primera entrada no es iterable. Una cadena es iterable, por lo que new Set("hello") contiene "h", "e", "l" y "o".

Un Set no tiene posiciones indexadas. tags[0] es undefined. Recorre con for...of, llama a forEach o convierte a un array para operaciones como map y filter. La iteración sigue el orden de inserción; eliminar un valor y volver a añadirlo lo coloca al final.

Elimina duplicados sin ordenar

const unique = [...new Set([3, 1, 3, 2, 1])];
// [3, 1, 2]

El Set conserva la primera aparición de cada valor. La propagación coloca esos valores en un array. Array.from(set) realiza la misma conversión.

Los valores se comparan como con ===, salvo que NaN coincide consigo mismo; los ceros con signo cuentan como un solo valor. Los valores de objeto se comparan por identidad: new Set([{ id: 1 }, { id: 1 }]).size es 2. Para conservar un registro por ID, construye un Map con ese ID como clave y después lee sus valores. Los registros posteriores con el mismo ID sustituyen a los anteriores, porque set actualiza una entrada existente.

Para comprobar repetidamente la pertenencia en colecciones grandes, un Set evita la búsqueda uno por uno de includes en un array. Úsalo cuando la presencia importe más que la posición.

Compara dos colecciones

Los métodos más recientes de Set están disponibles en los principales navegadores desde 2024. Con a que contiene 1, 2, 3, 4 y b que contiene 3, 4, 5:

Estos métodos devuelven Set nuevos. isSubsetOf comprueba que todos los valores estén en la otra colección. isSupersetOf comprueba la inclusión inversa. isDisjointFrom comprueba que las colecciones no compartan valores. Los tres devuelven booleanos. Por ejemplo, new Set([3, 4]).isSubsetOf(a) es verdadero. La diferencia tiene una dirección: los valores en b pero no en a serían solo 5.

En un entorno más antiguo, una intersección puede escribirse como new Set([...a].filter(x => b.has(x))).

Una llamada ordinaria a JSON.stringify(set) produce "{}" y pierde los valores almacenados. Convierte a un array antes de escribir JSON y después usa new Set(parsedArray) al leerlo. Un WeakSet puede marcar objetos como procesados sin mantener vivos objetos que de otro modo serían inalcanzables. No se puede recorrer. Los WeakSet modernos también aceptan símbolos no registrados.

JSON es un formato de texto independiente del lenguaje para datos estructurados. Un objeto es un valor activo de JavaScript; JSON es texto que puede describir ese valor.

Reconoce los seis tipos de valor

JSON admite objetos, arrays, cadenas, números, booleanos y null. Cualquiera de ellos puede ser el valor de nivel superior. El texto 42 es JSON válido incluso sin llaves. JSON no tiene representación para funciones, undefined, fechas como tipo distinto, Map, Set, NaN ni Infinity.

{
  "name": "Amara",
  "age": 34,
  "languages": ["en", "yo"],
  "address": null,
  "member": true
}

Las mismas ideas estructurales aparecen en los literales de JavaScript, pero la escritura permitida es más estricta. JSON se usa en configuraciones e intercambio de datos. El JSON intercambiado usa la codificación UTF-8 y el tipo de medio application/json; los archivos JSON usan la extensión .json.

Aplica las reglas de sintaxis

Cada clave de objeto debe ser una cadena entre comillas dobles. Las cadenas también requieren comillas dobles. Las comas separan propiedades o elementos de array, pero no puede haber una coma después del último. Los comentarios están prohibidos. Se permiten espacios en blanco entre valores y signos de puntuación.

Los números usan notación decimal. 1.5e3, -0.25 y 0 son válidos. 07, +1 y 0x1F son inválidos porque JSON prohíbe los ceros iniciales, el signo más inicial y la notación hexadecimal.

Escapa caracteres dentro de cadenas

Usa \" para una comilla doble, \\ para una barra invertida, \n para una nueva línea y \t para una tabulación dentro de una cadena JSON. No puede aparecer un salto de línea literal dentro de una cadena JSON. Deja que JSON.stringify genere secuencias de escape a partir de los valores reales de las cadenas para que las comillas internas no invaliden el resultado.

Una secuencia de escape Unicode consta de una barra invertida, la letra u y cuatro dígitos hexadecimales para una unidad de código UTF-16. Por ejemplo, \u00e9 representa é. Un carácter fuera de ese rango puede necesitar dos secuencias de escape de este tipo; también puede escribirse directamente en la cadena. Las comillas que rodean el texto JSON en el código fuente de JavaScript son una capa separada de las comillas dentro del propio JSON.

Conserva los identificadores y evita las claves duplicadas

Los números de JavaScript conservan todos los enteros del rango seguro desde -9 007 199 254 740 991 hasta 9 007 199 254 740 991. Fuera de ese rango, algunos enteros siguen siendo exactos y otros se redondean. Analizar '{"id":9007199254740993}' da un valor de id de 9 007 199 254 740 992. Almacena los identificadores largos como cadenas JSON cuando sus dígitos exactos sean importantes.

Las claves de objeto deberían ser únicas dentro de cada objeto JSON. JSON.parse de JavaScript conserva la última aparición cuando se repite una clave: analizar '{"a":1,"a":2}' produce { a: 2 }. No se pueden recuperar propiedades distintas a partir de ese nombre repetido.

JSON.stringify convierte valores compatibles de JavaScript en texto JSON. Decide qué debe conservar el texto antes de convertir un registro con métodos o valores de colección.

Escribe texto compacto o con sangría

const person = { name: "Amara", age: 34, tags: ["admin"] };
const text = JSON.stringify(person);
// '{"name":"Amara","age":34,"tags":["admin"]}'

El resultado es una cadena, por lo que typeof text es "string". Las propiedades propias y enumerables con claves de cadena se escriben en el orden de Object.keys. JSON.stringify(person, null, 2) añade saltos de línea y dos espacios de sangría por nivel. El segundo argumento es null porque no se usa ningún sustituto de serialización. La sangría numérica está limitada a 10 espacios; una cadena usada para la sangría se limita a sus primeros 10 caracteres.

Predice los valores omitidos y modificados

const data = {
  a: undefined,
  b: () => 1,
  c: NaN,
  d: [undefined, Infinity]
};
JSON.stringify(data); // '{"c":null,"d":[null,null]}'

Se omite una propiedad de objeto que contiene undefined, una función o un símbolo. En un array, ese valor se convierte en null, con lo que se conserva la posición. NaN e Infinity se convierten en null en ambos casos. En el nivel superior, valores no admitidos como undefined o una función hacen que stringify devuelva undefined, no texto JSON.

Un Date escribe su cadena ISO en UTC mediante toJSON. Las entradas ordinarias de Map y Set no se escriben, por lo que cualquiera de las dos colecciones se convierte en {}. Convierte los valores de Set en un array y las entradas de Map en pares o en un objeto con claves de cadena antes de escribirlos.

Una referencia circular y un BigInt ordinario como 10n provocan un TypeError. Las referencias compartidas que no forman un ciclo pueden serializarse, pero JSON no conservará su identidad compartida.

Elige datos con un sustituto de serialización

const user = { name: "Rae", email: "rae@example.com", password: "x9!k", age: 31 };
JSON.stringify(user, ["name", "email"]);
// '{"name":"Rae","email":"rae@example.com"}'

Un array sustituto selecciona nombres de propiedades. Una función sustituta transforma los valores a medida que se visitan, comenzando por la entrada completa bajo la clave "":

JSON.stringify(user, (key, value) =>
  key === "password" ? undefined : value
);

Devolver undefined omite una propiedad de objeto, convierte una posición de array en null o provoca un resultado general undefined cuando se devuelve para la raíz. Devuelve el valor sin cambios para los datos que quieras conservar.

El método toJSON() de un objeto puede elegir su representación. Para { celsius: 21, toJSON() { return { c: this.celsius }; } }, la serialización escribe '{"c":21}'.

No construyas JSON uniendo cadenas entrecomilladas por tu cuenta: las comillas internas o los saltos de línea pueden romper su sintaxis. Tampoco serialices texto ya serializado esperando una representación de objeto. Serializar '{"a":1}' codifica una cadena; analizar ese resultado una vez devuelve una cadena, no un objeto.

JSON.parse lee texto JSON y devuelve el valor que describe. El análisis comprueba la sintaxis del texto; comprobar si el resultado se ajusta a tu programa es una tarea independiente.

Lee el valor y después inspecciona sus campos

const data = JSON.parse('{"city":"Lima","tempC":19.5}');
data.tempC + 1; // 20.5

Las comillas simples externas delimitan una cadena de JavaScript. Las comillas dobles dentro de ella pertenecen a JSON. El análisis crea un objeto ordinario con una propiedad numérica tempC. Un texto que describe un array produce un array; los textos JSON primitivos producen sus valores primitivos correspondientes.

Los datos que ya son un objeto no necesitan un paso de análisis. JSON.parse({ a: 1 }) convierte primero ese argumento en "[object Object]" y después lanza un SyntaxError. JSON.parse(undefined) también falla porque "undefined" no es texto JSON válido.

Maneja texto inválido

function safeParse(text, fallback) {
  try {
    return JSON.parse(text);
  } catch (error) {
    return fallback;
  }
}
safeParse("{ok:true}", null); // null

Una entrada mal formada, incluidas una cadena vacía, cadenas JSON entre comillas simples, claves sin comillas y comas finales, lanza un SyntaxError. Capturar ese fallo da al programa una alternativa de respaldo deliberada en lugar de detenerlo. También es posible analizar correctamente null, así que decide cómo distinguirá quien llama una alternativa de respaldo de datos válidos cuando esa diferencia importe.

Restaura valores seleccionados con una función de transformación

Una fecha almacenada como texto vuelve como una cadena. Un array de pares clave-valor sigue siendo un array hasta que new Map(pairs) lo convierte en un Map. Las funciones omitidas al escribir no se pueden recuperar del texto restante.

const text = '{"title":"Dentist","due":"2026-03-01T09:00:00.000Z"}';
const event = JSON.parse(text, (key, value) =>
  key === "due" ? new Date(value) : value
);

La función de transformación de valores analizados visita los valores internos antes que sus contenedores y termina con el resultado completo bajo la clave "". Devolver un valor sustituye el valor actual. Devolver undefined elimina esa propiedad; devolverlo para la raíz hace que todo el resultado del análisis sea undefined. Por tanto, olvidar return value para otras claves puede borrar los datos que querías conservar.

Comprueba la estructura y planifica una conversión de ida y vuelta

Un JSON válido aún puede tener tipos incorrectos. Analizar '{"temp":"19"}' deja una cadena, por lo que data.temp + 1 concatenaría hasta formar "191". Comprueba los campos y tipos obligatorios, como typeof data?.temp === "number", antes de calcular. Convierte con Number solo cuando el formato previsto permita una cadena numérica; el encadenamiento opcional y ?? pueden manejar campos que pueden faltar.

Para const settings = { theme: "dark", volume: 0.8, recent: ["a.txt"] };, la serialización produce 48 caracteres de texto JSON. Analizarlo restaura los mismos datos de los campos, pero loaded === settings es falso porque el análisis crea objetos nuevos. Un Date vuelve como una cadena, una propiedad de objeto con valor undefined desaparece y un Set sin convertir vuelve como {}. Convierte los valores especiales antes de escribir y restaura sus tipos previstos después de leer.