JSON en JavaScript: cómo convertir datos con JSON.parse() y JSON.stringify()

En el artículo de objetos en JavaScript vimos cómo agrupar datos relacionados en una sola pieza, y lo dejamos con una pregunta abierta: ¿cómo conviertes esa estructura en algo que puedas guardar en el navegador o enviar a un servidor? La respuesta es JSON. En este artículo ves qué es, cómo convertir un valor de JavaScript a JSON con JSON.stringify(), cómo hacerlo al revés con JSON.parse(), y los errores con los que te vas a encontrar antes de usarlo de verdad con localStorage o con una API, que verás en próximos artículos.

Qué es JSON y por qué lo necesitas

JSON (JavaScript Object Notation) es un formato de texto para representar datos. Su sintaxis está basada en los object literals y arrays de JavaScript, pero JSON no es JavaScript: es un formato independiente del lenguaje, pensado para que cualquier programa, en cualquier tecnología, pueda leer y escribir los mismos datos.

Por eso es el formato que vas a ver en casi todas partes: es como las APIs devuelven datos cuando haces una petición, es como localStorage guarda información compleja en el navegador (solo acepta texto), y es un formato habitual para archivos de configuración. Saber convertir entre un valor de JavaScript y JSON es, por tanto, un paso obligatorio antes de tocar cualquiera de esas tres cosas.

JSON no es JavaScript: las diferencias de sintaxis

A primera vista, un JSON se parece mucho a un objeto o un array de JavaScript. Pero tiene reglas más estrictas, y si no las respetas, falla:

Esto es importante porque muchos errores al empezar con JSON no son de lógica, sino de sintaxis: un texto JSON escrito "a mano" con comillas simples o con una coma final de más deja de ser JSON válido, aunque a simple vista parezca correcto.

Convertir un valor de JavaScript a JSON: JSON.stringify()

JSON.stringify() toma un valor de JavaScript (normalmente un objeto o un array) y devuelve el texto JSON equivalente:

const usuario = {
  nombre: "Ana",
  edad: 28,
  activo: true
};

const texto = JSON.stringify(usuario);

console.log(texto);
// '{"nombre":"Ana","edad":28,"activo":true}'
console.log(typeof texto);
// "string"

Fíjate en el último console.log: el resultado es una cadena de texto, no un objeto. Es fácil olvidarlo y tratar el resultado como si siguiera siendo el objeto original.

Dar formato a la salida: los parámetros replacer y space

JSON.stringify() acepta dos parámetros opcionales más. El segundo (replacer) te deja filtrar qué propiedades incluir, pasando un array con sus nombres. El tercero (space) añade sangrado para que el resultado sea legible, algo muy útil cuando quieres inspeccionar un objeto por consola:

const usuario = { nombre: "Ana", edad: 28, passwordHash: "x7f3..." };

// Solo estas dos propiedades, con sangrado de 2 espacios
JSON.stringify(usuario, ["nombre", "edad"], 2);
// {
//   "nombre": "Ana",
//   "edad": 28
// }

El replacer también puede ser una función (clave, valor) => nuevoValor, si en algún momento quieres aplicar una de tus propias funciones a cada propiedad antes de convertirla.

Convertir JSON a un valor de JavaScript: JSON.parse()

JSON.parse() hace lo contrario: toma un texto JSON y te devuelve el valor de JavaScript correspondiente, ya utilizable (puedes acceder a sus propiedades, recorrerlo, etc.):

const texto = '{"nombre":"Ana","edad":28,"activo":true}';

const usuario = JSON.parse(texto);

console.log(usuario.nombre); // "Ana"
console.log(typeof usuario); // "object"

Igual que stringify tiene su replacer, parse acepta un segundo parámetro opcional llamado reviver: una función que se ejecuta para cada propiedad mientras se construye el resultado, útil por ejemplo para convertir una fecha en texto a un objeto Date real:

const evento = JSON.parse(
  '{"titulo":"Lanzamiento","fecha":"2026-10-28"}',
  (clave, valor) => (clave === "fecha" ? new Date(valor) : valor)
);

console.log(evento.fecha instanceof Date); // true

Qué pasa con los valores que JSON no entiende

Como JSON no tiene undefined, funciones, NaN ni Infinity, JSON.stringify() tiene que decidir qué hacer con ellos. El comportamiento no siempre es el que esperarías a primera vista:

JSON.stringify({ a: undefined, b: () => {}, c: NaN });
// '{}' (a, b y c desaparecen)

JSON.stringify([undefined, () => {}, NaN]);
// '[null,null,null]' (misma info, comportamiento distinto en array)

La consecuencia práctica: si conviertes un objeto a JSON y lo recuperas más tarde, no es garantía de recuperar exactamente lo mismo. Revisa siempre qué tipos de datos estás guardando.

Dónde vas a usar esto en la práctica

Dos sitios, sobre todo. El primero es localStorage, que solo guarda texto: cuando quieras guardar algo más complejo que una cadena suelta (por ejemplo, una lista de objetos con las preferencias del usuario), tendrás que convertirla con JSON.stringify() antes de guardarla, y con JSON.parse() al leerla. Es un tema con suficiente miga para su propio artículo, así que lo verás en detalle más adelante.

El segundo es cualquier API: cuando tu código le pide datos a un servidor con fetch, lo que recibes de vuelta es JSON, y cuando le envías datos, normalmente tienes que convertirlos a JSON tú. Ahí es donde todo lo que acabas de ver — y sobre todo sus errores típicos — se vuelve importante de verdad.

Errores típicos al empezar

• Escribir JSON "a mano" con comillas simples o claves sin comillas. JSON.parse("{'a': 1}") o JSON.parse("{a: 1}") lanzan SyntaxError: eso es JavaScript válido, pero no JSON válido.
• Dejar una coma final. {"a": 1, "b": 2,} también es un SyntaxError en JSON, aunque sea habitual dejarla en JavaScript.
• Convertir dos veces el mismo dato. Si usas fetch, el método response.json() ya hace el JSON.parse() por ti; volver a llamar a JSON.parse() sobre el resultado da error, porque ya no es texto.
• Dar por hecho que JSON.parse(null) funciona. localStorage.getItem() devuelve null si la clave no existe, y JSON.parse(null) lo convierte primero a texto "null" y devuelve null — no falla, pero conviene comprobarlo explícitamente en vez de confiar en ese comportamiento.
• Esperar que las fechas sobrevivan al viaje de ida y vuelta. Un Date se convierte en texto al hacer stringify, y parse no lo vuelve a convertir en Date por sí solo: sigue siendo texto, salvo que uses un reviver como el del ejemplo anterior.

En resumen

• JSON es un formato de texto para representar datos, basado en la sintaxis de JavaScript pero con reglas propias y más estrictas (comillas dobles obligatorias, sin comas finales, sin comentarios).
• JSON.stringify() convierte un valor de JavaScript en texto JSON; JSON.parse() hace lo contrario.
• Valores como undefined, funciones, NaN o BigInt no existen en JSON y se omiten, se transforman o directamente dan error al convertirlos.
• Vas a usar esto constantemente al guardar datos complejos en localStorage y al trabajar con APIs mediante fetch — los dos próximos pasos naturales de esta serie.