JavaScript JSON

JavaScript Object Notation (JSON) est la pierre angulaire des échanges de données sur le web. Presque toutes les API que vous appelez renvoient du JSON, la plupart des fichiers de configuration que vous lisez sont probablement en JSON, et chaque fois que le navigateur communique avec un serveur, JSON est généralement le format utilisé. Ce guide couvre tout ce dont vous avez besoin pour travailler avec JSON en toute confiance en JavaScript : la syntaxe, les deux méthodes essentielles (JSON.parse et JSON.stringify), comment formater et filtrer la sortie, comment gérer les dates et les copies profondes, ainsi que les pièges courants en production.

Ce qu'est JSON et pourquoi il est important

JSON est un format de données léger basé sur du texte, facile à lire et à écrire pour les humains, et facile à analyser et à générer pour les machines. Il est indépendant du langage — même si sa syntaxe s'inspire de JavaScript (Standard ECMA-262), pratiquement tous les langages (Python, Java, C#, Go, Rust, PHP) peuvent le lire et l'écrire. C'est cette universalité qui en a fait le format par défaut pour les API REST, les fichiers de configuration (package.json, tsconfig.json) et localStorage.

La chose essentielle à comprendre : JSON est une string, pas un object. Une string JSON ne devient un objet JavaScript utilisable qu'après avoir été analysée, et un objet JavaScript ne devient du JSON qu'après avoir été sérialisé. La plupart du travail avec JSON consiste à passer d'un état à l'autre.

Syntaxe JSON de base

La syntaxe JSON est un sous-ensemble strict de la syntaxe littérale des objets JavaScript :

• Les données sont écrites sous forme de paires "clé": valeur
• Les paires sont séparées par des virgules
• Les accolades {} délimitent les objets, les crochets [] délimitent les tableaux
• Les clés doivent être des strings entre guillemets doubles (les guillemets simples et les clés sans guillemets sont invalides)
• Les valeurs peuvent être une string, un nombre, un boolean, null, un object ou un array — mais pas undefined, une fonction ou une Date

{
  "name": "John",
  "age": 30,
  "isDeveloper": true,
  "languages": ["JavaScript", "Python", "Rust"]
}

Analyser du JSON avec JSON.parse()

JSON.parse() convertit une string JSON en objet JavaScript (ou en array, nombre, etc.) que vous pouvez lire et manipuler. Dans du vrai code — surtout quand le JSON provient d'une requête réseau ou d'une saisie utilisateur — enveloppez-le toujours dans un try...catch, car un JSON mal formé lève une SyntaxError.

Accéder aux données imbriquées

Le JSON analysé se comporte comme n'importe quel autre objet, vous accédez donc aux valeurs imbriquées avec la notation par point ou par crochets. C'est la manipulation la plus courante avec une réponse d'API.

Transformer les valeurs avec un reviver

JSON.parse() accepte une fonction reviver optionnelle comme deuxième argument. Elle est appelée pour chaque paire clé/valeur, et ce qu'elle retourne devient la valeur finale — pratique pour convertir des types à l'analyse. Un usage classique est la restauration des objets Date (JSON n'a pas de type date, donc les dates arrivent sous forme de strings).

Sérialiser des objets avec JSON.stringify()

JSON.stringify() fait l'inverse : il convertit une valeur JavaScript en string JSON, prête à être envoyée sur le réseau ou sauvegardée dans un stockage.

Mise en forme avec l'indentation

Le troisième argument contrôle l'espacement. Passez un nombre (espaces) ou une string pour produire un JSON lisible et indenté — utile pour les logs, les fichiers de configuration et le débogage.

Filtrer les propriétés avec un replacer

Le deuxième argument est un replacer. Sous forme d'array de clés, il définit une liste blanche des propriétés à conserver — un moyen rapide d'éliminer les champs sensibles comme les mots de passe avant d'envoyer des données.

Sous forme de fonction, le replacer est appelé pour chaque clé et vous permet de transformer ou d'omettre des valeurs. Retourner undefined depuis celui-ci omet la propriété.

Sérialisation personnalisée avec toJSON

Vous pouvez contrôler la façon dont un objet spécifique est sérialisé en lui donnant une méthode toJSON(). Quand JSON.stringify() rencontre un objet avec cette méthode, il appelle toJSON() et sérialise ce qu'elle retourne. (C'est exactement ainsi que les objets Date produisent des strings ISO — ils ont un toJSON intégré.)

Ce que stringify supprime silencieusement

JSON.stringify() est avec perte par conception. Savoir ce qu'il ignore évite des bugs déroutants :

• Les valeurs undefined, les fonctions et les valeurs Symbol sont omises des objets (et deviennent null à l'intérieur des arrays).
• Les objets Date deviennent des strings ISO (via leur toJSON).
• NaN et Infinity deviennent null.
• BigInt lève une TypeError.
• Les références circulaires lèvent une TypeError.

Techniques avancées et patterns courants

Au-delà des deux méthodes essentielles, le travail quotidien avec JSON implique la copie profonde, la gestion des dates et le traitement des arrays d'enregistrements.

Copie profonde d'objets

L'astuce JSON.parse(JSON.stringify(obj)) crée une copie profonde — un clone dont les objets imbriqués sont totalement indépendants de l'original, de sorte que la modification de l'un n'affecte jamais l'autre.

C'est rapide et sans dépendance, mais hérite de toutes les limitations de stringify : il supprime les fonctions, undefined et les Symbols, transforme les Dates en strings, et lève une erreur sur les références circulaires. Pour un clone fidèle, préférez le structuredClone() intégré, qui gère les dates, les maps, les sets et les cycles.

Travailler avec les dates

JSON n'a pas de type date, donc les dates voyagent sous forme de strings ISO 8601. JSON.stringify les écrit automatiquement, mais à l'analyse vous récupérez une simple string — vous devez reconstruire la Date vous-même, soit avec new Date(...) soit avec un reviver (montré précédemment).

Traiter des arrays d'enregistrements

Les réponses d'API sont généralement des arrays d'objets. Après l'analyse, les méthodes standards des arrays (forEach, map, filter) font le reste.

JSON et le navigateur : fetch et localStorage

Deux endroits du quotidien où JSON apparaît :

• fetch : response.json() lit le corps et l'analyse pour vous, donc vous appelez rarement JSON.parse directement sur un résultat fetch — const data = await response.json();. Consultez le guide de l'API Fetch.
• localStorage : il ne stocke que des strings, donc sérialisez à l'entrée et analysez à la sortie : localStorage.setItem('user', JSON.stringify(user)) puis JSON.parse(localStorage.getItem('user')).

Conclusion

JSON est le format que vous utiliserez le plus souvent en tant que développeur JavaScript, et tout se résume à deux méthodes : JSON.parse() pour transformer une string en valeur utilisable, et JSON.stringify() pour retransformer une valeur en string. Ajoutez les arguments reviver et replacer pour la conversion de types et le filtrage, l'indentation pour une sortie lisible, et toJSON pour une sérialisation personnalisée, et vous pouvez gérer presque toutes les tâches d'échange de données.

Gardez à l'esprit les cas limites avec perte — undefined/fonctions supprimés, dates sérialisées en strings, et erreurs de référence circulaire — et faites appel à structuredClone() quand vous avez besoin d'une vraie copie plutôt qu'un aller-retour JSON. Avec ces outils, vous pouvez déplacer des données en toute confiance entre votre application, le serveur et le stockage du navigateur.

Exercices