JSON: Jason? No, JSON!

Picture an ancient Greek hero named Jason, sailing around seeking mythical treasures like the golden fleece. Now swap that idea with a modern developer who just needs a concise, human-readable format to send data between systems—enter JSON. While Jason from myth is an epic adventurer, JSON is simply a format for representing data in a way that’s easy for both humans and machines to understand.

JSON stands for JavaScript Object Notation. It’s crucial for any web developer to master because it’s one of the most common ways data is exchanged over the internet. By the end of this lesson, you’ll grasp:

• The fundamental concept of JSON as just a format
• Why JSON looks suspiciously like JavaScript objects
• How to serialize and deserialize data with JSON
• The built-in JSON object methods JSON.parse and JSON.stringify

JSON Is a Format!

At its core, JSON is just text. It’s similar to an HTML document (which is also just text) or a DOCX file (a specific format for Microsoft Word). JSON isn’t executable code, even if it looks like JavaScript. Think of it as a blueprint for data—a set of instructions describing what the data looks like, but not actually running like a JavaScript function might.

JSON is just a string. It's just text.

If you hear someone say “a JSON object,” that’s technically inaccurate. In truth, JSON is a string representation of data, not an actual JavaScript object—though it often resembles one closely.

Why All the Confusion?

JSON’s syntax heavily mirrors JavaScript object literals. This isn’t by accident. Douglas Crockford, a major proponent of JavaScript and the author of JavaScript: The Good Parts, popularized JSON because he wanted a lightweight alternative to XML for transferring data. XML can be bulky and harder to parse for humans. JSON, on the other hand, is compact and fairly easy to read.

So while XML was the reigning champion back in the early 2000s, JSON snuck in, gave developers a simpler approach, and quickly became the new standard for data communication on the web.

JavaScript Literals Refresher

A “literal” in JavaScript is just a hard-coded value in your code, like 7 for a number, or true for a boolean, or { key: "value" } for an object. JSON took inspiration from how JavaScript defines arrays and objects in these literal forms, then built an independent format out of it.

For example, a JavaScript array literal looks like ["Ohio", "Iowa"]. In JSON, you’ll see something very similar—but keep in mind, it’s stored as a plain string: "["Ohio", "Iowa"]".

Boolean, Numeric, and Null Values

Here’s a quick cheat sheet for how some common JavaScript literal values translate into JSON:

Notice how, in JSON format, these values are still strings—just text that indicates booleans, numbers, or null.

String Literals in JSON

JSON always uses double quotes to mark strings. If you need to include quotes inside the string, you’ll need to escape them with a backslash \ so the JSON parser doesn’t get confused.

Example JavaScript string: 'this is "text"'
As JSON, it becomes: "this is \"text\"".

Here’s a subtlety: JSON is old-school in that it doesn’t allow multiline strings. If you need a newline, you represent it as \n inside the string. Also, if you see \" in JSON, that backslash is just telling the parser, “Hey, the following double quote is part of the actual text, not the end of the string.”

Array Values

In JavaScript, you might declare an array as [1, 2, 3]. In JSON, you’ll see the same bracket syntax, but keep in mind it’s still just text at heart:

"[1, 2, 3]"

So conceptually, you end up with:

• JavaScript array literal: [1, 2, 3] (actual code)
• JSON string: "[1,2,3]" (a text representation of that same array)

Object Values

In JavaScript, an object might look like: { person: true, name: "Roberta" }. JSON requires that keys be in double quotes. So you’d see:

"{ \"person\": true, \"name\": \"Roberta\" }"

That’s a string containing curly braces and key-value pairs. The computer reading this sees it as a chunk of text, which it can parse into a structured object if it knows how to interpret JSON.

Serialization and Deserialization

Serialization is the act of taking data (like a JavaScript array or object) and turning it into a format (like JSON or XML) that can be stored or sent somewhere else.

Deserialization is the reverse: taking a serialized format (like a JSON string) and transforming it back into a usable data structure (like a JavaScript object).

Think of serialization as packing your belongings into boxes for a move, and deserialization as unpacking those boxes in your new home.

Using the Built-In JSON Object in JavaScript

Modern JavaScript engines provide a global JSON object with two handy methods:

• JSON.stringify(value) – Serializes a JavaScript value into a JSON string.
• JSON.parse(jsonString) – Deserializes a JSON string into a JavaScript object or array.

Example:

const array = [1, 'hello, "world"', 3.14, { id: 17 }];
console.log(JSON.stringify(array));
// prints: [1,"hello, \"world\"",3.14,{"id":17}]

And the reverse:

const str = '[1,"hello, \\"world\\"",3.14,{"id":17}]';
console.log(JSON.parse(str));
// prints an array -> [ 1, 'hello, "world"', 3.14, { id: 17 } ]

Notice the double backslashes in the string. That’s just the computer’s way of escaping quotes so they survive both JavaScript’s string rules and JSON’s string rules. In practice, you’ll rarely handwrite complex JSON with many escapes—you’ll typically rely on JSON.stringify to handle that for you.

You Will Almost Never Write Raw JSON by Hand

Don’t be alarmed if all the escaping seems convoluted. Most of the time you’ll let the computer do the formatting. When you fetch data from an API, you might call:

fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    console.log(data); // Here's your deserialized JavaScript object
  });

Or you might build an object and then:

const user = { name: 'Ava', age: 20 };
const body = JSON.stringify(user);
// Send 'body' in an API request

Either way, you’re mainly reading or writing JavaScript values, letting JSON.parse and JSON.stringify handle the conversion under the hood.

Brain Teaser

Check out these lines of code:

const a = [1, 2, 3, 4, 5];
console.log(a[0]);

const s = JSON.stringify(a);
console.log(s[0]);

const v = JSON.parse(s);
console.log(v[0]);

Let’s break it down:

• a[0] is 1 because a is a JavaScript array.
• s is a string like "[1,2,3,4,5]". So s[0] is the "[" character. That’s the first character of the JSON string.
• v is what you get when you call JSON.parse(s), which is back to a JavaScript array. So v[0] is 1.

This quick example shows the difference between raw JSON strings and their corresponding JavaScript data structures.

What You Just Learned

With some practice, you’ll become adept at identifying valid JSON and using it to transmit data across the web. Here are the key takeaways:

• JSON is just a text format used to represent data.
• Serialization is the process of converting JavaScript objects/arrays into JSON strings with JSON.stringify.
• Deserialization is the opposite process of turning JSON strings back into objects/arrays with JSON.parse.
• Keys in JSON objects must be in double quotes, and strings are always delimited by double quotes.

As you continue your journey, you’ll see JSON nearly everywhere—config files, REST APIs, messaging between microservices, and more. While Jason might be off on mythical expeditions, JSON is the real modern hero, simplifying the way our applications talk to each other, across languages and platforms.