Understanding JSON and JSON5Github

Introducing JSON5: The Improved Version of JSON for Web Developers

Introudction

If you work in web development, you've probably heard of JSON. It's a simple and lightweight way to store and exchange data that's become a standard in the industry. But have you heard of JSON5? It's an extension of JSON that adds some new features to make it even more convenient for developers. In this article, we're going to explore both JSON and JSON5 in depth. We'll start by looking at the basics of JSON and how it's used in web development. Then, we'll dive into the new features of JSON5 and how they can make your life easier.

What's JSON?

In today's technology-driven world, data is the backbone of every application. The data that we interact with on a daily basis is often passed between computers, servers, and applications. This is where data interchange formats come into play. One such format is JSON, or JavaScript Object Notation. JSON is a lightweight format that is easy for humans to read and write and easy for machines to parse and generate.
JSON data is represented in key-value pairs where keys are strings and values can be strings, numbers, objects, arrays, or null. Here is an example of JSON data:
{
"bank": "My Bank",
"account_number": "1234567890",
"balance": 5000.00,
"account_type": "Savings",
"transactions": [
  {
    "date": "2021-09-01",
    "description": "Deposit",
    "amount": 1000.00
  },
  {
    "date": "2021-09-10",
    "description": "Withdrawal",
    "amount": -500.00
  }
]
}
This JSON data includes the bank name, account number, balance, account type, and a list of transactions. Transactions include the date, description, and amount of the transaction.

Why use JSON?

JSON has several advantages over other data exchange formats:
  1. Lightweight: JSON is lightweight and doesn't require a lot of resources to parse and generate. This makes it an ideal format for web applications that require fast and efficient data transfer.
  2. Easy to read and write: JSON is human-readable and easy to write, which makes it easy for developers to work with. It is also easy to understand and debug, which makes it a popular choice for APIs.
  3. Language independent: JSON is completely language independent and can be used with any programming language. This makes it a great choice for applications that need to communicate with other applications written in different languages.
  4. Supports complex data structures: JSON supports complex data structures such as arrays and nested objects, which makes it a flexible format for data exchange.

How to use JSON?

JSON is easy to serialize and deserialize data, which means that it can be converted into a string representation and then back into its original format. That's the reasone why JSON is often used in web applications to transfer data between the server and the client. It can be used to transfer data in a variety of contexts, including browser AJAX requests, and server internal API requests.
JSON API
Data exchanged in JSON format between server and client.

What's JSON5?

JSON5 adds new syntax to the JSON format, including support for comments, trailing commas in arrays and objects, and more relaxed rules for defining keys and strings. These features make it easier for developers to write and read JSON5 data, which is particularly useful for larger and more complex JSON files.

JSON vs JSON5

JSON5 is a superset of JSON, which includes all the functionality of JSON and adds additional features that make it easier to work with. However, JSON5 is not a widely adopted standard and may not be supported by all JSON parsers. JSON is a more widely used and accepted format, but JSON5 can be a useful tool for certain use cases where additional flexibility is needed.

JSON5 allows more relaxed rules for defining keys

Developers can use single quotes for strings instead of double quotes. Additionally, keys can be defined without quotes if they are valid JavaScript identifiers, which can make the code easier to read and write.
{
// Key is allowed to be single quoted:
'key1': "str", 

// Key is allowed to be unquoted:
key2: "str", 
}

JSON5 allows trailing commas

JSON5 also supports trailing commas in arrays and objects. This means that developers can add a comma after the last item in an array or object, which makes it easier to add new items or properties without having to worry about removing or adding commas in other parts of the code. For example:
{
// Array is allowed to have a trailing comma:
"key1": [1, 2, ],

// Object is allowed to have a trailing comma:
"key2": { "a": "str", "b": "str", },
}

JSON5 allows for more flexibility in how strings can be represented

JSON5 is able to use single quotes instead of double quotes in string values and also allows for the inclusion of line breaks and special characters. For example:
{
// string value is allowed to be single quoted
singleQuotes: 'I can use "double quotes" here', 

// string value is allowed to include character escapes
lineBreaks: "Look, Mom!                        
No \n's!",
}

JSON5 allows comments

JSON does not support comments at all, while JSON5 allows for both single-line and multi-line comments. For example:
{
// Single-line comment:      
// "key1": "str",

// Multi-line comment:
/* "key2": "str",
   "key3": "str" */
}

JSON5 supports more flexibility in number formatting

JSON5 allows for more flexibility and readability when it comes to number formatting. For example:

// Numbers could be hexadecimal:
"key1": 0xdecaf,

// Numbers could have a leading decimal point:
"key2": .123,

// Numbers could begin with an explicit plus sign:
"key3": +1,
}

What's JSONC?

JSONC (JSON with comments) is a proposed extension to the JSON format that allows developers to include comments in their JSON data structures.

JSON5 vs JSONC

JSONC was created by Microsoft and is used in VS Code. While JSONC is an extension of JSON, it lacks a specification and is incompatible with other tools and tooling. JSONC allows developers to add comments to their JSON data, but that's the only significant benefit it offers over JSON.
On the other hand, JSON5 is a well-defined specification that includes comments, trailing commas, multi-line strings, single or double quotes, object keys without quotes, and other features borrowed from ECMAScript 5.1. It is a strict subset of JavaScript and immediately understandable. JSON5's syntax is similar to JavaScript, making it an excellent alternative for developers who are more comfortable working with JavaScript.

Conclusion

Benefits of using JSON5:
  1. Improved Readability: JSON5 is designed to be more human-readable than JSON, with features like support for comments, trailing commas, and single-quoted strings.
  2. Flexibility: JSON5 is more flexible than JSON, allowing developers to use more relaxed syntax rules that are easier to work with.
  3. Easier to Write: JSON5 is easier to write, with fewer syntax restrictions than JSON.
  4. Improved Collaboration: JSON5's improved readability and flexibility make it easier for developers and non-technical users to collaborate on JSON5 data.
  5. Familiarity: JSON5 is based on JSON, so developers who are familiar with JSON can easily learn and work with JSON5.
Benefits of using JSON5 Editor:
  1. User-Friendly Interface: JSON5 Editor provides a user-friendly interface that makes it easy to create, modify, and delete JSON5 data.
  2. Syntax Highlighting: JSON5 Editor highlights the different parts of JSON5 data in different colors, making it easier to identify the different components of JSON5 data.
  3. Auto-completion: JSON5 Editor provides auto-completion suggestions to help users write JSON5 data faster and with fewer errors.
  4. Error Highlighting: JSON5 Editor highlights syntax errors in JSON5 data in real-time, making it easier for users to identify and fix errors.
  5. Multiple Formats: JSON5 Editor can edit JSON5 data in different formats, including compact, pretty, and minified formats.

Read More