JSON (short for JavaScript Object Notation) is one of the most commonly used formats for data exchange.
Note: Despite its name, JSON is not exclusively used by JavaScript! 😉
Over the years, it has become a key standard for exchanging information in web development and mobile applications.
The Origins of JSON
The origin of JSON traces back to Douglas Crockford. As a developer, he wanted to provide an option for those who needed to exchange data more easily. First introduced in 2001, JSON can be described as:
- Simple to write
- Fast to read
- Intuitive to understand
Inspired by JavaScript objects, this is why the format carries its name! 😁
Its syntax is deceptively similar to what can be found in dictionaries in JavaScript.
The Syntax of JSON
The syntax of JSON is both simple and strict. It is based on two structure types:
- Objects (which closely resemble what is found in programming languages)
- Arrays (which also resemble what is found in programming languages)
Objects
In JSON, an object is simply a collection of "key: value" pairs, similar to what we often see in JavaScript.
Each key must:
- Be unique (you cannot have the same name twice)
- Be a string (so no numbers)
Here’s an example of a JSON object:
{
"name": "Louis-Nicolas",
"age": 27,
"freelancer": true,
"skills": ["JavaScript", "Next.js", "Symfony", "React"]
}
Breaking down this object:
"name"- the key as a string"age"- a number"freelancer"- a boolean"skills"- an array of strings
As we can see, the JSON format allows for mixing data types.
Arrays
An array in JSON is very similar to arrays in programming languages in general.
It is a list of values that can be of any type.
Here’s an example of a JSON array:
[
"Next.js",
"React",
"Vue.js"
]
Accepted Data Types
As shown in the examples above, the data types supported by JSON are diverse. There are six:
- Strings: Must be enclosed in double quotes.
- Numbers: Without quotes, they can be integers or floating-point values.
- Booleans: Either
trueorfalse, without quotes. - Objects: Enclosed in braces
{ }. - Arrays: Enclosed in brackets
[ ]. - Null: Represents a null value, written as
nullwithout quotes.
A Practical JSON Example
To combine everything we’ve learned, here is a complex example that mixes objects and arrays. This is a realistic example you may encounter in your career when working with JSON:
{
"name": "Louis-Nicolas",
"age": 27,
"courses": [
{
"title": "Freelance Developer",
"progress": 75
},
{
"title": "Advanced Next.js",
"progress": 50
}
],
"freelancer": true,
"email": null
}Some notes on this example:
- The key
"courses"is an array containing objects for each value, which is a common pattern 🙂. - The key
"email"has anullvalue to indicate no information is provided.
Conclusion
The JSON syntax is strict and leaves no room for flexibility, but it establishes a simple and readable standard.
If you want to dive deeper while practicing JSON, we offer a complete JavaScript course where you’ll build projects using JSON, such as:
- A geolocated weather application
- A Bitcoin price tracker
You can access it for free here.
