JavaScript: JavaScript JSON
Last updated: 2026-10-13
JSON (JavaScript Object Notation) is a lightweight data-interchange format. Think of it as a standardized shipping box — no matter what you put inside, the packaging follows a universal spec so the recipient knows exactly how to unpack it. Front-end/back-end communication, configuration files, local storage — JSON is everywhere.
1. JSON Syntax Rules
JSON looks a lot like a JS object literal, but the rules are stricter:
| Rule | Description |
|---|---|
| Keys must use double quotes | "name" ✅ name ❌ 'name' ❌ |
| String values must use double quotes | "hello" ✅ 'hello' ❌ |
| No trailing commas | {"a":1,} ❌ |
| Limited value types | string, number, boolean, null, object, array |
| Not allowed | undefined, functions, comments |
JSON
{
"name": "Alice",
"age": 25,
"skills": ["HTML", "CSS", "JS"],
"address": {
"city": "New York",
"zip": "10001"
},
"active": true,
"spouse": null
}
⚠️ Note: No single quotes in JSON! The most common beginner mistake is writing
'key' or 'value' — this is valid in JS but illegal in JSON.
2. JSON.stringify()
JSON.stringify() converts a JS value into a JSON string — serialization.
HTML
<script>
JSON.stringify(value)
JSON.stringify(value, replacer)
JSON.stringify(value, replacer, space)
</script>
| Parameter | Description |
|---|---|
value |
The value to serialize |
replacer |
Filter or transform — a function or array |
space |
Indentation — number or string, for pretty-printing |
▶ Example: Serialization and Formatting
▶ Try it Yourself💡 Tip: Note:
undefined, functions, and Symbols are ignored during serialization (properties disappear from objects, become null in arrays). Date objects are converted to ISO strings.
3. JSON.parse()
JSON.parse() converts a JSON string back into a JS value — deserialization.
HTML
<script>
JSON.parse(text)
JSON.parse(text, reviver)
</script>
| Parameter | Description |
|---|---|
text |
The JSON string |
reviver |
A transform function applied to each key-value pair |
▶ Example: Deserialization
▶ Try it Yourself4. JSON vs JS Object
| Comparison | JSON | JS Object |
|---|---|---|
| Nature | String (text) | In-memory data structure |
| Key quotes | Double quotes required | Omissible (for valid identifiers) |
| Value types | Limited (6 types) | Any type |
| Trailing commas | Not allowed | Allowed |
| Comments | Not allowed | Supported (via tooling) |
💡 Tip: Easy way to remember: JSON is "a string version of JS objects with strict validation." It's not an object — it's text. You need
parse to turn it into an object you can work with.
▶ Example: Common JSON Errors
▶ Try it Yourself💡 Tip: The three most common JSON errors: single quotes, trailing commas, and
undefined. When debugging JSON issues, paste it into the browser console with JSON.parse() — the error message will pinpoint the exact location.
❓ FAQ
Q Why does
JSON.stringify(NaN) return null?A The JSON spec has no
NaN, Infinity, or -Infinity — they all become null during serialization. If you need to preserve these values, use a custom replacer function.Q Can
JSON.parse parse JS object literals?A No.
JSON.parse('{}') works, but JSON.parse('{a:1}') throws an error — the key lacks double quotes. JSON syntax is stricter than JS object literals.Q Can you write comments in JSON?
A Standard JSON does not support comments. If needed, use a field like
"_comment": "description" as a workaround, though this isn't a formal convention.📖 Summary
- JSON is a string-based data format — keys must be double-quoted, no trailing commas, limited value types
JSON.stringify()serializes,JSON.parse()deserializes — they are inverse operationsundefined, functions, and Symbols are ignored or becomenullduring serialization- The
spaceparameter inJSON.stringifymakes output readable; thereplacerparameter filters fields - Parsing invalid JSON throws an exception — always wrap it in
try/catch
📝 Exercises
- Basic: Create an array of 3 student objects and format the output with
JSON.stringify(2-space indent). - Intermediate: Write a
safeParse(str)function that wrapsJSON.parseintry/catch, returning the result on success ornullwith an error message on failure. - Challenge: Build a "local notepad" — use
promptfor input, save tolocalStoragewithJSON.stringify, and load/display it on page load withJSON.parse.
