Working with JSON in JavaScript

Analogy categoryAnalogies

1. Introduction

JSON (JavaScript Object Notation) is a lightweight, text-based data format used to exchange structured data between systems, most commonly between a browser/client and a server via APIs. Although its syntax is derived from JavaScript object and array literals, JSON is language-independent and is supported by virtually every modern programming language. In JavaScript, the built-in JSON object provides two core methods for converting between JavaScript values and JSON text: JSON.stringify() and JSON.parse().

🏏

Cricket analogy: Like a scorecard format simple enough that any cricket board worldwide can read it regardless of language — JSON.stringify writes the scorecard out, and JSON.parse reads a foreign board's scorecard back in.

2. Syntax

javascript

// Convert a JavaScript value to a JSON string
const json = JSON.stringify(value);
JSON.stringify(value, null, 2); // pretty-printed with 2-space indent

// Convert a JSON string back into a JavaScript value
const value = JSON.parse(jsonString);

3. Explanation

JSON.stringify(value) serializes a JavaScript value into a JSON-formatted string. It supports objects, arrays, strings, numbers, booleans, and null, but it silently DROPS properties whose value is a function or undefined (and skips undefined array elements by converting them to null inside arrays). JSON.parse(text) does the reverse: it parses a JSON-formatted string back into a live JavaScript value (object, array, string, number, boolean, or null).

🏏

Cricket analogy: Like a scorecard export that keeps every run and wicket but silently drops the coach's private strategy notes (functions) and any blank unrecorded field (undefined), while re-importing the card faithfully rebuilds the numeric scorecard.

Because JSON is a strict text format, JSON.parse() throws a SyntaxError if given text that isn't valid JSON — for example, JSON requires double-quoted keys and strings, and does not allow trailing commas, single quotes, or comments.

🏏

Cricket analogy: Like an official scorecard being rejected by the scoring board if it's handwritten in pencil with abbreviations instead of the required standardized double-quoted format — no trailing notes, no shorthand allowed, or it's thrown out entirely.

JSON.stringify() cannot serialize objects containing circular references (an object that references itself, directly or indirectly) — it throws a TypeError: Converting circular structure to JSON. It also drops functions, Symbol values, and undefined properties entirely rather than erroring on them.

4. Example

javascript

const user = {
  name: 'Frank',
  age: 28,
  greet: function () { return 'hi'; },
  nickname: undefined,
  active: true
};

const json = JSON.stringify(user);
console.log(json);

const parsed = JSON.parse(json);
console.log(parsed);
console.log(typeof parsed.greet);

try {
  JSON.parse("{name: 'Grace'}");
} catch (err) {
  console.log(err instanceof SyntaxError);
}

5. Output

text

{"name":"Frank","age":28,"active":true}
{ name: 'Frank', age: 28, active: true }
undefined
true

6. Key Takeaways

JSON.stringify() converts a JavaScript value into a JSON-formatted string; JSON.parse() converts JSON text back into a JavaScript value.
Functions, undefined properties, and Symbol values are silently dropped by JSON.stringify().
JSON.parse() throws a SyntaxError on invalid JSON — missing quotes, trailing commas, and comments are all invalid.
JSON.stringify() throws a TypeError on circular references, since JSON cannot represent self-referencing structures.
JSON keys and strings must use double quotes; JSON does not support single quotes, comments, or trailing commas.
JSON round-tripping (JSON.parse(JSON.stringify(obj))) is a common (imperfect) technique for deep-cloning simple data objects.