JSON and Javascript objects look very similar at a glance, but they are actually very different.
JSON can be thought of as a simple notation standard for storing key/value pairs outside of your code.
A javascript object stores key/value pairs, but it is also more active. It can mutate itself with methods (functions), as well as enable object oriented programming by encapsulating related functions inside the object.
From a practical standpoint, most front-end code on the web shies away from object-oriented programming do to the trouble of triggering reactivity when an object mutates. The biggest asset remains being able to use dot notation to access key value pairs, and the many built in methods such as sort and map which are built in to every object.
Summary:
Use javascript objects to deal key/value pairs internally.
Use json notation to send, receive and store key/value pairs externally.
"name": "Danny",
"age": 48,
"skills": ["coding", "drawing", "skateboarding"],
"active": true
}JSON is just a notation standard
JSON is stored as a plain string
Keys must be quoted
Cannot include functions
Must be parsed into a javascript object before it can be used in javascript
The 2 common ways of parsing are:
response.body.json() if parsing from a fetch api call
or JSON.parse(myJsonString) for other parsing such as when json is stored on a server.
name: "Danny",
age: 48,
skills: ["coding", "drawing", "skateboarding"],
active: true,
greeting: function() { return "✋ High Five!"; }
}Keys are unquoted
Functions are allowed
JavaScript objects contain many built in methods that must be stripped away if intending to store the object in JSON notation
That is where JSON.stringify(myObject) comes in.