JSON en JavaScript : JSON.stringify et JSON.parse

JSON, c'est du texte, pas un objet

Le JSON (JavaScript Object Notation) est un format texte conçu pour échanger des données. Visuellement, ça ressemble à un objet littéral JavaScript, sauf que c'est en réalité une chaîne de caractères — une suite de caractères qu'on peut envoyer sur le réseau, sauvegarder dans un fichier ou coller dans un fichier de config.

// Un objet JavaScript — une valeur vivante en mémoire.
const user = { name: "Rosa", age: 30 };

// JSON — une chaîne de texte qui représente les mêmes données.
const json = '{"name":"Rosa","age":30}';

Les deux se ressemblent beaucoup, d'où la confusion. Le modèle mental qui évite de se mélanger les pinceaux : les objets vivent dans votre programme ; le JSON, c'est à quoi ils ressemblent une fois sortis. Pour passer de l'un à l'autre, on dispose de deux fonctions : JSON.stringify (objet → chaîne) et JSON.parse (chaîne → objet).

JSON.stringify : convertir un objet en JSON

Transformez n'importe quelle valeur JavaScript en sa représentation JSON :

Le résultat est une chaîne sur une seule ligne, sans espaces — compacte, parfaite pour passer sur le réseau. Le typeof le confirme : string, et non object.

Pour y voir plus clair pendant le débogage, tu peux passer deux arguments supplémentaires. Le deuxième, c'est le replacer (on y revient juste après) ; mettre null signifie « on garde tout ». Le troisième, c'est l'indentation :

C'est la mise en forme classique avec indentation. Utilise 2 ou 4 espaces — c'est ce que produisent la plupart des outils.

JSON.parse : de la chaîne JSON à l'objet JavaScript

L'opération inverse : on passe une chaîne JSON et on récupère une valeur JavaScript.

Une fois la chaîne parsée, tu te retrouves avec un objet classique — accès par point, accès par crochets, méthodes de tableau, tout est dispo.

JSON.parse ne pardonne rien. Tous ces cas déclenchent une SyntaxError :

JSON.parse("{name: 'Rosa'}");      // clé non entourée de guillemets, guillemets simples
JSON.parse('{"name": "Rosa",}');   // virgule de fin
JSON.parse("// a comment\n{}");    // les commentaires ne sont pas autorisés
JSON.parse("");                    // chaîne vide

Dès que la donnée provient de l'extérieur de votre programme — une réponse fetch, un fichier, une saisie utilisateur — encadrez le parsing avec un try/catch :

Les valeurs qui ne survivent pas à l'aller-retour

JSON ne prend en charge que six types de valeurs : les chaînes, les nombres, les booléens, null, les tableaux et les objets simples. Tout le reste de JavaScript est soit ignoré, soit transformé, soit carrément cassé lors de la sérialisation.

Ce qu'il se passe concrètement :

• Les fonctions et undefined sont tout simplement retirés des objets sans un mot. Dans un tableau, ils deviennent null — impossible d'avoir des trous dans un tableau JSON.
• Les objets Date sont sérialisés sous forme de chaîne ISO via leur méthode toJSON. Au parsing, tu récupères la chaîne, pas un objet Date.
• Un BigInt déclenche une TypeError. Les nombres JSON n'ont aucun équivalent.
• Map, Set et les références circulaires ne passent pas non plus tels quels.

Pour récupérer correctement un Date lors du round-trip, on utilise la fonction reviver de JSON.parse :

La fonction reviver est appelée pour chaque paire clé/valeur et vous permet de transformer les valeurs au passage.

Le replacer : filtrer ce qui est sérialisé

Le deuxième argument de JSON.stringify sert à contrôler ce qui se retrouve dans la sortie. Passez-lui un tableau de clés pour ne garder que celles-ci :

Ou passez-lui une fonction pour une logique sur mesure : retirer des champs, masquer des valeurs, transformer à la volée :

Renvoyer undefined supprime la clé. Renvoyer toute autre valeur la remplace.

Personnaliser la sérialisation avec toJSON

Si un objet possède une méthode toJSON, JSON.stringify l'appelle et sérialise la valeur retournée à la place. C'est précisément ce mécanisme qui permet à Date de contrôler son propre format, et rien ne vous empêche d'exploiter ce même point d'entrée :

Parfait pour les classes qui veulent exposer une forme publique cohérente, peu importe qui les sérialise.

Cloner en profondeur (la vieille astuce, et la meilleure)

Pendant des années, JSON.parse(JSON.stringify(obj)) a été le one-liner pour faire un clone profond d'un objet simple :

Ça marche — tant que l'objet ne contient que des valeurs compatibles JSON. Les Date, les Map et les fonctions font tout planter (voir les problèmes d'aller-retour évoqués plus haut).

Le JavaScript moderne propose structuredClone, qui gère les Date, les Map, les Set, les tableaux typés et même les références circulaires :

Privilégie structuredClone dès que tu peux. Garde l'astuce JSON.parse(JSON.stringify(...)) sous le coude pour cloner vite fait des données simples.

Un cas concret : récupérer et parser du JSON

C'est sur les requêtes HTTP que tu vas le plus souvent croiser du JSON. Attention : fetch ne parse pas le JSON tout seul — il faut appeler .json() sur la réponse (ce qui revient à faire un JSON.parse sur le corps de la réponse) :

Envoyer du JSON, c'est l'opération inverse : on passe le corps de la requête à JSON.stringify et on précise l'en-tête Content-Type.

await fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Rosa", age: 30 }),
});

Ces deux patterns couvrent l'immense majorité des cas d'usage réels avec du JSON.

La suite : le chaînage optionnel

Quand on parse du JSON, on tombe souvent sur des champs optionnels — un user.address.city qui peut ne pas exister, un response.data.items parfois absent. Accéder à des propriétés imbriquées en profondeur sans tout faire planter, c'est exactement le rôle du chaînage optionnel (?.), et c'est justement le sujet de la page suivante.