Qué es JSON.parse y JSON.stringify

Fino señores que hoy hay resumen

JSON.parse y JSON.stringify

Código Clase

const obj1 = {
    a: 'a',
    b: 'b',
    c: {
        d: 'd',
        e: 'e',
    },
    editA() {
        this.a = 'Abcd'
    }
};

const stringifiedComplexObj = JSON.stringify(obj1);
// "{\"a\":\"a\",\"b\":\"b\",\"c\":{\"d\":\"d\",\"e\":\"e\"},\"f\":[1,\"2\",3]}"

const obj2 = JSON.parse(stringifiedComplexObj); 
// {a: "a", b: "b", c: {d: "d", e: "e"}}

JSON.stringify()

El método JSON.stringify() convierte un objeto o valor de JavaScript en una cadena JSON, reemplazando opcionalmente valores si se especifica una función de reemplazo u opcionalmente incluyendo solo las propiedades especificadas si se especifica una matriz de reemplazo.

• Descripción
  • Los objetos Boolean, Number, and String se convierten a sus valores primitivos, de acuerdo con la conversión semántica tradicional.
  • Si durante la conversión se encuentra un undefined, una Function, o un Symbol se omite (cuando se encuentra en un objeto) o se censura a null (cuando se encuentra en un array). JSON.stringify() puede devolver undefined cuando se pasan valores “puros” como JSON.stringify(function(){}) o JSON.stringify(undefined).
  • Todas las propiedades que utilicen Symbol en los nombres de la clave se ignoran por completo, incluso si utilizan una función replacer.
  • Las instancias de Date implementan la función toJSON() devolviendo una cadena de texto (igual que date.toISOString()). Por lo que son tratadas como strings.
  • Los números Infinity y NaN, así como el valor null, se consideran null.
  • El resto de instancias de Object (incluyendo Map, Set, WeakMap, y WeakSet) sólo tendrán serializadas sus propiedades enumerables.

JSON.stringify () convierte un valor en notación JSON que lo representa:

JSON.parse()

El método JSON.parse() analiza una cadena de texto (string) como JSON, transformando opcionalmente el valor producido por el análisis.

Why JSON.parse(JSON.stringify()) is a bad practice to clone an object in JavaScript

• Puedes perder tipos de datos.
• JavaScript no te avisara cuando pierdas algún tipo de dato al usar JSON.stringify(), asi que GG mi rey
• Convierte tipos de datos no soportados en soportados, como infinity y NaN en null
• Los tipos de datos Date serán parseados como strings, no como Date
• No es tan rápido y eficiente.

Creo que JSON.stringify seria util cuando queremos validar si dos objetos son iguales, ya que siguiendo con el ejemplo si uno compara obj1 === obj2 da false.

obj1 == obj2
false

se pueden comparar como strings usando stringfy y asi retorna true.

JSON.stringify(obj1) === JSON.stringify(obj2)
true

Spoiler: los vamos a usar algunas veces para leer datos del BackEnd.

4. JSON.perse y JSON.stringify

Con JSON.stringify podemos convertir un objeto en un string, pero no es lo mismo. y con JSON.parse podemos convertir un string en un objeto. ¿Confuso no?
nota: Ambos no saben trabajar con funciones

Estos dos métodos nos permiten crear una copia más profunda del objeto, sin tener el problema de las referencias de los objetos. Ya que JSON.stringify convierte el objeto en una cadena de texto, por lo cual no guarda la referencia al objeto.

const person = {
	name: 'Eduardo',
	email: '[email protected]',
  social: {
    facebook: 'Eduardo Garcia',
    twiiter: 'EduGar'
  }
}

const stringifiedObject = JSON.stringify(person)
const person2 = JSON.parse(stringifiedObject)

person2.name = 'Eduardo Miguel'
person
/* {
  name: 'Eduardo',
  email: '[email protected]',
  social: { facebook: 'Eduardo Garcia', twiiter: 'EduGar' }
} */

person2
/* {
  name: 'Eduardo Miguel',
  email: '[email protected]',
  social: { facebook: 'Eduardo Garcia', twiiter: 'EduGar' }
} */

person2.social.facebook = 'Eduardo Miguel Garcia'
person
/* {
  name: 'Eduardo',
  email: '[email protected]',
  social: { facebook: 'Eduardo Garcia', twiiter: 'EduGar' }
} */

person2
/* {
  name: 'Eduardo Miguel',
  email: '[email protected]',
  social: { facebook: 'Eduardo Miguel Garcia', twiiter: 'EduGar' }
} */

Y parece que JSON.parse y JSON.stringify llegaron a resolvernos la vida 🥳, sin embargo no todo es bueno 😭. Si nosotros queremos hacer la copia de funciones, estos métodos no nos ayudarán

const person = {
	name: 'Eduardo',
	email: '[email protected]',
  social: {
    facebook: 'Eduardo Garcia',
    twiiter: 'EduGar'
  },
  printName() {
    return `Hola ${name}`
  }
}

const stringifiedObject = JSON.stringify(person)
const person2 = JSON.parse(stringifiedObject)

person2.name = 'Eduardo Miguel'
person
/* {
  name: 'Eduardo',
  email: '[email protected]',
  social: { facebook: 'Eduardo Garcia', twiiter: 'EduGar' },
  printName: ƒ printName()
} */

person2
/* {
  name: 'Eduardo Miguel',
  email: '[email protected]',
  social: { facebook: 'Eduardo Garcia', twiiter: 'EduGar' }
} */

person2.social.facebook = 'Eduardo Miguel Garcia'
person
/* {
  name: 'Eduardo',
  email: '[email protected]',
  social: { facebook: 'Eduardo Garcia', twiiter: 'EduGar' },
  printName: ƒ printName()
} */

person2
/* {
  name: 'Eduardo Miguel',
  email: '[email protected]',
  social: { facebook: 'Eduardo Miguel Garcia', twiiter: 'EduGar' }
} */

Seguiremos en la búsqueda de una forma de poder copiar un objeto sin importar si cuenta con objetos internos o funciones 🤩🤓

Aquí vemos como al momento de resolver un problema, pueden surgir mas problemas a resolver

JSON.parse y JSON.stringify

Estos métodos permiten hacer copias de objetos en JS. Pero no funcionan con métodos.

const obj1 = {
  a: 'a',
  b: 'b',
  c: {
    d: 'd',
    e: 'e',
  },
  editaA(){
    this.a = 'AAAAA'
  }
}

const stringifiedComplexObject = JSON.stringify(obj1); //* Lo convierte en un string
const obj2 = JSON.parse(stringifiedComplexObject); //* Lo convierte en un objeto

A día de hoy ya contamod con structuredClone👇

At the time of writing, all browsers have implemented this API in their nightly releases, Firefox has shipped it to stable in Firefox 94. Additionally, Node 17 and Deno 1.14 have implemented this API. You can start using this function right now and not feel bad about it.
Deep-copying in JavaScript using structuredClone

.

Imagen de MiduDev: Tweet

que buen profesor, me gusta como explica, entiendo todo, saludos

vaya ya me veias en las dos clases anteriores queriendo hacerme mi propia funcion para lograrlo y obviamente no llegue a ver todas las posibilidades en un dia asi que…
esta bueno ir avanzando .

💈Qué es JSON.parse y JSON.stringify

Ideas/conceptos claves

JSON es un formato de texto sencillo para el intercambio de datos. Se trata de un subconjunto de la notación literal de objetos de JavaScript, aunque, debido a su amplia adopción como alternativa a XML, se considera un formato independiente del lenguaje.

Recursos

JSON.stringify() - JavaScript | MDN

JSON.parse() - JavaScript | MDN

Why JSON.parse(JSON.stringify()) is a bad practice to clone an object in JavaScript

Apuntes

• JSON.stringify permite volver un objeto en una cadena de texto con formato JSON.
• JSON.parse hace que una cadena de texto en formato JSON se vuelva un objeto JavaScript.
• Si utilizamos ambos métodos podemos clonar un objeto JavaScript.

const obj2 = JSON.parse(JSON.stringify(obj1))

• Lastimosamente, si tenemos una función JavaScript dentro de nuestro objeto, estas no se copiaran porque en formato JSON solo nos ayuda a guardar anotaciones no procedimientos.
• Pero los objetos internos ya no estaran conectados a su referencia inicial, como cuando usabamos:
  1. Object.assign
  2. Object.create

📌 **RESUMEN:** Podemos usar el truco de implementar `JSON.stringify` y `JSON.parse` para clonar un objeto, pero en el procedimiento se pueden perder datos como funciones.

Cuando empezamos con .parse y .stringify pensé yei así nos evitamos recursividad
… no, no lo hacemos

why-json-parse-json-stringify-is-a-bad-practice-to-clone-an-object-in-javascript
·

cada vez que necesite clonar un objeto, recuerde que JSON.parse (JSON.stringify ()) puede causar problemas y es mejor que evite usarlo.

Eso se soluciona usando clases, ¿no?