What is JSON?

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:

1. Objects (which closely resemble what is found in programming languages)
2. 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:

1. Strings: Must be enclosed in double quotes.
2. Numbers: Without quotes, they can be integers or floating-point values.
3. Booleans: Either true or false, without quotes.
4. Objects: Enclosed in braces { }.
5. Arrays: Enclosed in brackets [ ].
6. Null: Represents a null value, written as null without 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 a null value 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.