This is an old revision of the document!
Table of Contents
Object to String and String to Object
These actions are useful for:
Data Interchange: When communicating with a server or other systems, data is often sent and received as JSON strings. JSON.stringify and JSON.parse are used to serialize and deserialize data to and from this format.
Storing Data Locally: If you want to save an object's state in local storage or a cookie, you'll need to convert it to a string first. Local storage, for example, can only store strings, so objects must be serialized before being stored.
Debugging and Logging: Converting objects to strings can be useful for logging and debugging purposes. You can log the state of an object at a specific point in time, and the string representation provides a human-readable format.
Cloning Objects: Although not the most efficient method, you can make a deep clone of an object by converting it to a string and then parsing it back to an object.
URL Parameters: When passing objects as parameters in URLs, you may need to serialize them into a string format. This can be used to maintain state between pages or to track user behavior with analytics tools.
Working with Immutable Data: In some applications, you may want to ensure that objects are not modified after they are created. Converting an object to a string can be part of a process to create a “frozen” or immutable version of that object.
Custom Serialization: In more complex cases, you might need to serialize an object in a particular way to suit a specific requirement or protocol. Writing custom toString methods can enable more control over the string representation.
Component Props in Frameworks like React: When passing data to child components in frameworks like React, you may find it useful to serialize data to ensure that it doesn't get unintentionally modified, providing better predictability in your application's behavior.
Object to String
- JSON.stringify: This method converts a JavaScript object into a JSON string.
const obj = { name: 'John', age: 30 }; const str = JSON.stringify(obj); // '{"name":"John","age":30}'
- toString Method: If the object has a custom toString method, you can call it to get a string representation.
const obj = { name: 'John', age: 30, toString: function() { return `{"name":"${this.name}","age":${this.age}}`; } }; const str = obj.toString(); // '{"name":"John","age":30}'
String to Object
JSON.parse: This method parses a JSON string and constructs the JavaScript value or object described by the string.
const str = '{"name":"John","age":30}'; const obj = JSON.parse(str); // { name: 'John', age: 30 }
Notes
JSON.stringify(value, replacer, space)
- value: The value to convert to a JSON string.
- replacer: Either a function that alters the behavior of the stringification process or an array of String and Number that serve as a whitelist for selecting/filtering the properties of the value object to be included in the JSON string. Passing null means that the entire object is included, without any changes.
- space: A String or Number object that's used to insert white space into the output JSON string for readability purposes.
Example:
const obj = { name: 'John', age: 30, friends: ['Alice', 'Bob'] }; const jsonString = JSON.stringify(obj, null, 2); // 2 is the number of spaces for indentation
Output:
{ "name": "John", "age": 30, "friends": [ "Alice", "Bob" ] }