JSON (JavaScript Object Notation) serialization converts a JavaScript object into...

JSON serialization is an efficient way to transfer data. Learn to serialize an object in JavaScript so that it can be easily transmitted or stored in a file.

Your Guide to Implementing JSON Serialization in JavaScript

How to Implement JSON Serialization in JavaScript

JSON is a lightweight data-interchange format that is easy for humans to read and write and for machines to parse and generate. It is a text format and is based on a subset of JavaScript, Standard ECMA-262 3rd Edition - December 1999.

JSON is entirely language-independent but it uses conventions familiar to programmers of the C family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make it an ideal data-interchange language.

In JavaScript, JSON serialization is the process of converting a JavaScript object into a JSON string by using the JSON.stringify() method. It serializes JavaScript objects so that they can be easily transmitted over a network or stored in a file.

Here's a basic example of how to use JSON.stringify() to serialize a JavaScript object:

Here, the JSON.stringify() method converts the JavaScript object obj into a JSON string which logs to the console.

JSON.stringify() method accepts an optional second parameter, a replacer function that filters out values, transforms values, or adds values. It’s called for each item. If you return a value different from the original value, it is replaced. If you return undefined, the key-value pair is removed from the result.

Here’s an example of how the replacer function filters values:

Here, the replacer function filters out the password property from the final JSON string by not including it.

The optional second parameter can also be a literal function. It is a replacer function, which filters out values, transforms values, or adds values. Here is an example where the replacer function filters out values.

Here, the replacer function filters out the password property from the final JSON string.

JSON.stringify() also accepts an optional third parameter, a space argument, that can format the last JSON string with proper indentation which makes it more human-readable.

Here, the 'JSON.stringify()' method is called with a 'space' parameter of 2, which results in the JSON string being indented with 2 spaces.

It's worth noting that the JSON.stringify() method can only convert JSON-safe data types, such as numbers, strings, booleans, arrays, and objects. All others like functions and undefined values when encountered are converted to null in the final JSON string.

What is JSON?

JSON is simple, lightweight, and easy to read and write. However, like any technology, it also has some limitations. Here are a few:

Limited data types: JSON only supports a limited set of data types, including strings, numbers, booleans, arrays, and objects. It does not support more complex data types, such as binary data, date and time, and null values.

No support for comments: JSON does not support comments, which can make it harder for developers to understand the meaning of certain sections of JSON code.

Limited support for object-oriented concepts: JSON is based on a subset of JavaScript and does not support some object-oriented concepts, such as inheritance.

No support for circular references: JSON.stringify() method will throw an error if the object has circular references. A circular reference occurs when an object references itself directly or indirectly.

Limited support for large numbers: JSON does not support large numbers with decimal places, which can lead to a loss of precision.

Limitations of JSON serialization

There are some ways to convert non-JSON data types into JSON. Let's explore them one by one.

Handling limitations of JSON.stringify()

In JavaScript, the JSON.stringify() method cannot serialize functions because they are not JSON-safe data types. However, there are a few ways to work around this limitation.

One way is to convert the function to a string before passing it to JSON.stringify(). The toString() method returns the string representation of the function.

Here, the replacer function checks the type of the value. If the value is a function, it converts it to a string using the toString() method. Otherwise, it returns the value.

It's worth noting that when you convert a function to a string, it loses its scope and context so it can't be executed once it's deserialized and parsed again. It’s important to keep this in mind when working with functions.

Handling functions / Other complex data types

When an object contains a reference to itself, it creates a circular reference. For example, if object A has a property that references itself, such as A.self = A, it creates a circular 'reference'.

This is because the JSON.stringify() method uses recursion to convert the object into a JSON string. If it encounters a circular reference, it will keep following the references indefinitely, causing an infinite loop and resulting in a maximum call stack size exceeded error.

In the example, the object obj contains a reference to itself, creating a circular reference. When the JSON.stringify() method is called on this object, it will throw an error. To avoid this problem, some libraries can handle the serialization of circular reference objects, such as 'circular-json', 'clone', and 'js-object-clone'.

Handling circular references

JSON does not support large numbers with decimal places, which can lead to a loss of precision. When using the JSON.stringify() method to convert a JavaScript object that contains large numbers, those numbers may be rounded or truncated.

One way to handle large numbers in JSON serialization is to represent them as strings in the JavaScript object before passing them to JSON.stringify(). This will prevent JSON.stringify() from rounding or truncating the numbers.

This will ensure that the number is stored as a string and not converted to a JavaScript number when parsing the JSON object.

Note: When storing large numbers as strings, you will need to convert them back to a number if you have to perform an arithmetic operation on them.

Observe that in most cases, you don't need to use any library to handle these limitations. They can be solved with just a little bit of programming. However, the libraries make it easier to handle these limitations, especially when working on large and complex projects.

Handling large numbers

JSON.stringify() is a powerful method in JavaScript that allows developers to convert JavaScript objects into JSON strings, which can then be transmitted over a network or stored in a file. It accepts an optional replacer function that filters out values, transforms values, or adds values. It also accepts an optional space argument that formats the final JSON string with proper indentation to make it more human-readable. In addition to JSON.stringify(), JavaScript also provides the JSON.parse() method to deserialize JSON strings into JavaScript objects.

Conclusion

JSON (JavaScript Object Notation) serialization converts a JavaScript object into a JSON string. It is a good way of exchanging information between server and client or between servers. Since it is language-independent, the two or more parties sharing the information need not be written in the same language. JSON is widely used in web development and APIs as it's a convenient and efficient way to transfer data between the client and the server.

This article will explore how to serialize an object in JavaScript as well as the limitations of serialization.

Alternatives to JSON include XML, YAML, Protocol Buffers, BSON, MessagePack, and CBOR.

JSON is considered more lightweight and easier to read and write than XML. It also supports more data types and has a flexible structure.

JSON can be used to store the configuration data for a user interface, allowing for a more dynamic and configurable experience. By using JSON, developers can easily change the layout, behavior, and content of the UI without having to make changes to the codebase.

Frequently Asked Questions

What’s up with Turing?
Get the latest news about us here.

Press

Know more about remote work.
Checkout our blog here.

Blog

Have any questions?
We’d love to hear from you.

FOR DEVELOPERS

How to Implement JSON Serialization in JavaScript

Author

Dhawal Pandya

How to Build React Custom Hooks in TypeScript

Top Features in Next.js 13

Stack vs Heap Memory Allocation in Java

Node.js Logging Guide

How to Create Bar Charts in ReactJS?

Frequently Asked Questions

Press

Blog

Contact

Hire remote developers