What’s the difference between JSON and JavaScript object?

This is something a lot of people don’t understand, mostly people who are new to programming, but sometimes even people with coding experience. I see a lot of similar questions online. So I thought I’ll write a small post explaining the difference. Maybe I’ll need this myself in the future.

JSON

So let’s see what’s JSON first. Wikipedia defines JSON as “In computing, JavaScript Object Notation or JSON is an open-standard file format that uses human-readable text to transmit data objects consisting of attribute–value pairs and array data types (or any other serializable value).” It’s this definition that could be confusing. It says, JSON stands for JavaScript Object Notation. You have to notice, it’s a Notation, a human-readable text format of an object. JSON is used to transmit data from one system to another, without breaking the structure, per se, and not the object itself. It could be though of as a replacement for XML, a lighter version of XML, etc. If you know what XML is used for, you can say JSON is usually used for the same stuff.

Suppose you have a back-end server running an app written in PHP, and a mobile app for Android written in Java. Now, whenever the client (the Android app) makes a request to the server (the PHP app), the server sends some data as the response. Now this data has to be in a format that the client could understand, but at the same time, the server also needs to understand this data in order to send it. So we need a language, a format, or a notation which is agnostic of the language an app is written in. JSON is that format. All major programming languages have JSON encoding/decoding capabilities, either native or using a plugin.

JavaScript Objects

Now, a JavaScript object, on the other hand, is just an object in JavaScript. In PHP, you have PHP objects. In Java, you have Java objects, popularly known as POJOs. Similarly, in JavaScript, you have JavaScript objects. A JavaScript object has nothing to do with JSON. A JS object is how JS internally represents a data structure. A PHP app can’t understand a JS object. Similarly, JS will not understand a PHP or a Java object.

To understand more clearly, let’s try a small experiment. Below is a very simple JS object. There are two keys: foo and bar. foo has an object of the Date class and bar is a function which prints “Hello, World” to the console. What do you think will happen when you convert this to a JSON string? Remember, JSON is a textual representation of an object (a data structure). It can’t have functions. To see the result, open up the developer console in your browser and paste the following code.

const jsonVar = JSON.stringify({
    foo: new Date(),
    bar: function () { 
        console.log("Hello, World");
    }
});
console.log(jsonVar);

You should something similar to the following:

Wasn’t that interesting? So what happened here is, since JSON can’t have functions, it converted the Date() object to string, which is the current data and time, and completely omitted the bar property, which is a function.

You can try more experiments like this with objects of other languages and test the differences yourself.

And if you like what you see here, or on my Medium blog, and would like to see more of such helpful technical posts in the future, consider supporting me on Patreon and Github.