The JSON file format, an acronym for JavaScript Object Notation, is a prevalent data structure across the web. Despite its name suggesting a close tie to JavaScript, JSON is actually language-agnostic and widely adopted by various programming languages. Many languages either inherently support JSON or offer libraries for seamless conversion of this notation into their native data structures. For example, Python uses a structure known as a dictionary, which closely mirrors the JSON format and serves a similar purpose to an JavaScript object.
In this lesson, you'll learn how to use the JSON builtin to convert a JavaScript object into JSON and back again. You'll also learn a bit more about JSON in general.
Converting JavaScript Objects to JSON Text
In JavaScript, when you need to send JSON data, the process involves converting objects into plain text. This process is technically called serialization. This is done using the JSON object, a built-in object in JavaScript that acts as a container for utility functions. Here's a simple example:
let myObj = { name: "John", age: 31, city: "New York" };
JSON.stringify(myObj); // '{"name":"John","age":31,"city":"New York"}'
This code snippet demonstrates how a JavaScript object is transformed into a JSON string with the JSON.stringify() method. There is nothing special about the string as a data type, it's a plain pritimitve string, what's special about it is that it's in a format that many different languages will be able to convert into a data structure that they can then use.
Converting JSON Text Back into Objects
Receiving JSON data typically involves the reverse process, or deserialization. When JSON text is received, it's just a string. To utilize it as an object in your JavaScript code, you use the JSON.parse() method:
let myJSON = '{"name":"John", "age":31, "city":"New York"}';
JSON.parse(myJSON); // {name: 'John', age: 31, city: 'New York'}
This example shows how JSON text is converted back into a functional JavaScript object via the JSON.parse() method.
JSON's Evolution Beyond JavaScript
JSON began as a syntax for representing object-like data structures, closely tied to JavaScript. However, over time, it has transformed into a universally accepted format for transmitting key-value pair data across the web. This evolution marks a significant departure from its JavaScript-centric origins, as JSON is now supported and utilized by a myriad of programming languages and platforms.
As JSON became a standard in data interchange, its syntax and usage started to develop independently of JavaScript. This independence has led to some interesting scenarios where certain JSON structures, while perfectly valid within the JSON format, do not conform to JavaScript syntax. A common example of this divergence is related to property names.
In JavaScript, object property names do not necessarily have to be enclosed in quotes if they are valid identifiers. For example:
let jsObj = { name: "Nomad", age: 31 };
However, in JSON, all property names must be enclosed in double quotes, making it more strict. The equivalent JSON representation would be:
{ "name": "Nomad", "age": 31 }
This difference means that while the JavaScript object is valid, a JSON file with unquoted property names would be considered invalid.
Summary - JSON, What it is, and How to Use it in JavaScript
In this lesson you've covered the JSON (JavaScript Object Notation) file format, its language-agnostic nature, and its usage in JavaScript for data serialization and deserialization.
- JSON is a widely used data format independent of JavaScript, despite its name suggesting a close relationship.
- Various programming languages support JSON, directly or through libraries, to convert JSON into native data structures.
- You'll learn to use the
JSONbuilt-in object in JavaScript for converting objects to JSON text (serialization) and vice versa (deserialization). - You can serialize with
JSON.stringify(). - You can deserialize with
JSON.parse(). - JSON's syntax has evolved beyond JavaScript, requiring strict formatting like enclosing property names in double quotes, unlike JavaScript objects.