Get string representation of an object in JavaScript
This post will discuss how to get the string representation of an object in JavaScript.
The string representation of an object can be useful for debugging, logging, or displaying the object’s properties and values. Here are some of the most common functions to get the string representation of an object in JavaScript:
1. Using JSON.stringify() function
The JSON.stringify() function is a built-in function that converts a JavaScript value or object to a JSON string. We can use this function to get the string representation of an object by passing the object as an argument. For example, the following code creates an object named person with three properties: name, age, and hobbies. The code then uses the JSON.stringify() function to convert the object to a JSON string, and prints it to the console. The output shows the object’s properties and values in a JSON format, enclosed by double quotes and separated by commas.
|
1 2 3 4 5 6 7 8 |
var person = { name: "Anna", age: 18, hobbies: ["reading", "chess", "surfing"] }; // {"name":"Anna","age":18,"hobbies":["reading","chess","surfing"]} console.log(JSON.stringify(person)); |
This function is useful if we want to store or transmit the object as a string, or if we want to see its contents in a compact and standardized format. However, it may not work for some objects that have circular references, functions, or symbols as properties.
2. Using console.log() function
Another way is to use the built-in function console.log(), that prints a message to the browser’s console or the standard output stream. We can use this function to print the object to the console in a human-readable format. For example, using the same object as before, we can print the string representation of the object using console.log() like this:
|
1 2 3 4 5 6 7 8 |
var person = { name: "Anna", age: 18, hobbies: ["reading", "chess", "surfing"] }; // { name: 'Anna', age: 18, hobbies: [ 'reading', 'chess', 'surfing' ] } console.log(person); |
This function is useful if we want to debug or inspect the object in a browser or a node.js environment. It can show more details about the object, such as its prototype and constructor. However, it may not work for some objects that have custom toString() functions or non-enumerable properties.
3. Using Object.toString() function
A third way is to use the Object.toString() function, which returns a string that represents the object. This function is useful if we want to get the default string representation of the object, which is usually its class name enclosed in square brackets. For example, using the same object as before, we can print it using toString() like this:
|
1 2 3 4 5 6 7 8 |
var person = { name: "Anna", age: 18, hobbies: ["reading", "chess", "surfing"] }; // [object Object] console.log(person.toString()); |
However, it may not show any information about the object’s properties or values, unless the object has a custom toString() function that overrides the default one. Since every JavaScript object inherits the toString() function from its prototype, we can override it to customize its behavior. For example, the following code defines a custom toString() function for the object, which returns a string containing its name, age, and hobbies separated by commas. The code then calls the toString() function on the object, which prints the custom string representation of the object on the console.
|
1 2 3 4 5 6 7 8 9 10 11 |
var person = { name: "Anna", age: 18, hobbies: ["reading", "chess", "surfing"], toString: function() { return this.name + ", " + this.age + ", [" + this.hobbies.join(", ") + "]"; } }; // Anna, 18, [reading, chess, surfing] console.log(person.toString()); |
4. Using for…in loop
A fourth way is to use a for…in loop, which iterates over the enumerable properties of the object and prints them one by one. For example, using the same object as before, we can print it using a for…in loop like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var person = { name: "Anna", age: 18, hobbies: ["reading", "chess", "surfing"] }; for (var key in person) { console.log(key + ": " + person[key]); } // name: Anna // age: 18 // hobbies: reading,chess,surfing |
This function is useful if we want to print each property and value of the object separately, or if we want to perform some operations on them. However, it may also include properties inherited from the prototype chain, unless we use the hasOwnProperty() function to filter them out.
That’s all about getting the string representation of an object in JavaScript.
Thanks for reading.
To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and support our growth. Happy coding :)