JSON Data Types

By the end, you can identify the six JSON value types and convert between JSON text and JavaScript values safely.

What it is

JSON (JavaScript Object Notation) is a lightweight text format for representing data. It supports six value types: string, number, boolean, null, object, and array. In JavaScript, JSON.parse() turns JSON text into JavaScript values, and JSON.stringify() turns supported JavaScript values into JSON text. Related terms include key, value, pair, member, element, and serialization.

Why it matters

• Web APIs commonly send and receive JSON, so you need to parse responses before using them.
• Browser storage such as localStorage stores strings, so JSON is a practical way to save structured data.
• Configuration files and logs often use JSON because it is readable and language-neutral.
• Knowing JSON types helps you avoid sending unsupported JavaScript values like functions or undefined.
• It makes debugging easier when you can compare the JSON text with the parsed JavaScript object.

Syntax or steps

The smallest useful pattern is: write valid JSON text, parse it into JavaScript, then stringify it again if needed.

const jsonText = '{"name":"Ada","age":36,"active":true,"tags":["math","code"],"address":null}';
const data = JSON.parse(jsonText);
const backToText = JSON.stringify(data);

Example

const jsonText = `{
  "n": 1,
  "s": "x",
  "b": true,
  "arr": [],
  "obj": {},
  "nul": null
}`;

const data = JSON.parse(jsonText);

console.log(typeof data.n);              // "number"
console.log(typeof data.s);              // "string"
console.log(typeof data.b);              // "boolean"
console.log(Array.isArray(data.arr));    // true
console.log(typeof data.obj);            // "object"
console.log(data.nul === null);          // true

console.log(JSON.stringify(data, null, 2));

Part-by-part explanation

• "n": 1 is a JSON number. JSON numbers can be integers, decimals, or exponent notation, but not NaN or Infinity.
• "s": "x" is a JSON string. JSON strings must use double quotes.
• "b": true is a JSON boolean.
• "arr": [] is a JSON array. Arrays can contain any JSON value, including other arrays or objects.
• "obj": {} is a JSON object. Object keys must be strings.
• "nul": null is JSON null, which represents an intentional missing value.
• JSON.parse() creates a JavaScript object from the JSON text.
• JSON.stringify(data, null, 2) converts the JavaScript value back to JSON text with two-space indentation.

Common mistakes

• Using single quotes. JSON strings require double quotes. Fix: write "x", not 'x'.
• Adding trailing commas or comments. JSON does not allow commas after the last item or // comments. Fix: remove them.
• Assuming all JavaScript values survive. Functions, undefined, symbols, and Date objects are not JSON value types. Fix: convert them to strings, numbers, arrays, objects, or null before sending.
• Confusing JSON text with a JavaScript object. A JSON string is just text until parsed. Fix: use JSON.parse() before accessing properties.

When to use it

Use JSON when data must be stored or transmitted as text. Use JavaScript object literals when you are writing code that runs directly in JavaScript.

Practice

Guided exercise: Create JSON text for a book with title, pages, available, tags, and author. Set author to null. Parse it and log the title.

Challenge: Add a nested publisher object with name and year, then stringify the whole value with indentation.

Expected output: The title logs as a string, and the final output is readable JSON text. Solution hint: Use double quotes for every key and string, and do not add trailing commas.

Quick check

Question: Which JSON value type should you use for an intentionally missing value?

Answer: Use null. JSON does not have an undefined value.

Summary

JSON has exactly six value types: string, number, boolean, null, object, and array. In JavaScript, JSON text becomes usable data through JSON.parse(), and JavaScript data becomes portable text through JSON.stringify(). The key transferable idea is that JSON is a strict text format, not a full JavaScript object system.