JSON is an acronym standing for JavaScript Object Notation. JSON is a lightweight and language-independent format used for data interchanging in plain text. According to JSON being in plain text and very popular, most programming languages support JSON out of the box as they can read and parse JSON data into their own easily. The file extension for JSON is .json
, and the MIME type is application/json
.
The following is an example of JSON data representing the information of the JavaScript programming language.
{
"name": "JavaScript",
"creator": "Brendan Eich",
"year": 1995,
"extensions": [
".js",
".mjs"
]
}
The JSON syntax is pretty straightforward, human-friendly, and readable because it's a subset of the familiar JavaScript syntax. The following are the basic rules of the JSON syntax.
"key": "value"
.,
.{}
are used for creating JSON objects.[]
are used for creating JSON arrays.Basically, JSON's data types are similar to that of JavaScript. There are six data types used in JSON as listed below.
""
.true
or false
.[]
. Each value in an array is separated by a comma ,
.{}
. The keys are in the string format enclosed by double quotes ""
whereas the values can be anything.null
.JSON completely ignores whitespace characters. There are four types of whitespace characters in JSON; i.e. space, tab, newline \n
, and carriage return \r
. Please note that JSON does not support function, date, and undefined data types, or even comments unlike JavaScript.
JSON is mostly used for creating APIs. As you already know that JSON data is in plain text, it can be transmitted over the internet easily. Webs and apps nowadays use JSON for data interchanging between the server and client via APIs.
Moreover, you can use json to create a local config file within your app, such as config.json like so.
{
"host": "example.com",
"port": 1234,
"username": "admin",
"password": "9auBQmHT"
}
Basically, JSON is part of JavaScript. Therefore, you can easily convert between JSON data and JavaScript objects without having to install any third-party libraries. There is the built-in function named JSON.parse
in JavaScript that lets you parse a string representing JSON data to the corresponding JavaScript object. The string must be written in the correct JSON format so that it can be converted successfully.
// Please note that this JSON data is in a string format.
const data = `{
"name": "John",
"gender": "male",
"age": 25
}`;
// Use the built-in JSON.parse function to parse JSON data to a JavaScript object.
const obj = JSON.parse(data);
console.log(obj); // { name: "John", gender: "male", age: 25 }
Similar to parsing JSON data to a JavaScript object above, you can also convert a JavaScript object to JSON data easily using the built-in JSON.stringify
function. Please note that the output JSON data will be in plain text with escaped characters.
const obj = {
name: 'John',
gender: 'male',
age: 25,
};
// Use the built-in JSON.stringify function to convert a JavaScript object to JSON data.
const data = JSON.stringify(obj);
// The output JSON data is in a string format with backslash escapes.
console.log(data); // "{\"name\":\"John\",\"gender\":\"male\",\"age\":25}"
JSON data is mostly minified when used in production so that it can help reduce the transfer bandwidth. However, minified JSON data is not human-friendly and readable. Sometimes when you're debugging an API that returns JSON data, you'll probably need a tool like JSON Formatter to properly format it so that you can read the returned JSON data with ease.
JSON minification is the process of removing any unnecessary characters, such as white spaces, tabs, and new lines from JSON data in order to make it compact for production use without touching or changing its original data and functionality. JSON minification immensely helps reduce the file size so that bandwidth usage will be a lot less when transmitting over the internet.
For example, here is the minified version of the JSON data above. As you can see, the JSON data is reduced into one single line with all the unnecessary characters removed.
{"name":"JavaScript","creator":"Brendan Eich","year":1995,"extensions":[".js",".mjs"]}