You've probably seen JSON (JavaScript Object Notation) everywhere by now—whether it's in a config file or coming back from an API. The most important thing to realize is that JSON isn't actually a JavaScript object; it's a string that happens to be formatted to look like one. It's a way of packaging data so it can be sent across the wire or saved to a disk without losing its structure.

To show you how this actually works in a real scenario, let's build a tiny save-game system for a character in an RPG. We need a way to take our live character object and turn it into something we can store in localStorage.

Turning a character into a string

First, I'll define a character object. This is a standard JavaScript object with some nested data, which is where JSON really shines.

const player = {
  name: "Valerius",
  class: "Paladin",
  stats: {
    strength: 18,
    dexterity: 10,
    intelligence: 12
  },
  inventory: ["Steel Shield", "Healing Potion", "Ancient Map"]
};

// Now, let's turn this into a JSON string
const saveGameString = JSON.stringify(player);
console.log(saveGameString);
// Output: {"name":"Valerius","class":"Paladin","stats":{"strength":18,...}}

I used JSON.stringify() here. It takes that rich object and flattens it into a single string. If you tried to save the original player object directly to localStorage, you'd just get the useless string "[object Object]". Stringifying it ensures the data survives the trip.

The "missing method" trap

Here is where I usually trip up when I'm rushing. I decided I wanted the player object to have a helper method to calculate their combat power, so I added it right into the object:

player.calculatePower = function() {
  return this.stats.strength * 2;
};

const saveWithMethod = JSON.stringify(player);
console.log(saveWithMethod);

When I logged the result, I noticed something annoying: calculatePower was gone. Completely vanished. I didn't get an error; JSON just silently ignored the function.

This is a critical lesson: JSON only supports data. It handles strings, numbers, booleans, arrays, and other objects. It cannot store functions, Dates, or undefined values. If you try to stringify a function, JSON just drops it. To fix this, I have to keep my data (the JSON) separate from my logic (the functions). I'll store the stats in JSON and re-attach the methods after I load the data back into the game.

Bringing the data back to life

Now, let's say the player comes back to the game tomorrow. We have that saveGameString, but we can't access saveGameString.name because it's just a string. We need to turn it back into a JavaScript object using JSON.parse().

const loadedPlayer = JSON.parse(saveGameString);

console.log(loadedPlayer.name); // "Valerius"
console.log(loadedPlayer.stats.strength); // 18

// Now I re-attach the logic that JSON couldn't save
loadedPlayer.calculatePower = function() {
  return this.stats.strength * 2;
};

console.log(loadedPlayer.calculatePower()); // 36

It's a simple two-step dance: stringify to save, parse to load. Just remember that once you parse it, you're back in the world of JavaScript objects, and you'll need to manually restore any behavior or complex types that didn't make the trip.

📋 Practical Task

Build a Movie Watchlist Parser

You have been given a JSON string representing a user's movie watchlist. Your task is to convert this string into a usable JavaScript object, add a new movie to the list, and then convert it back into a JSON string for storage.

Requirements:

• Start with this string: const jsonInput = '{"username": "cinephile_99", "watchlist": ["Inception", "The Matrix", "Interstellar"]}';
• Parse the string into an object called userAccount.
• Push the movie "Arrival" into the watchlist array.
• Convert the updated userAccount object back into a JSON string and log it to the console.