Back to JavaScript
2026-04-276 min read

JS toString() (JavaScript)

Learn JS toString() (JavaScript) step by step with clear examples and exercises.

Why This Matters

In this comprehensive JavaScript lesson, we will delve into the toString() method, a crucial tool for converting JavaScript objects into strings. Understanding and utilizing toString() effectively can significantly enhance your ability to manipulate data, debug issues, and excel in coding interviews.

The Importance of toString()

  1. Debugging: When dealing with complex objects, it can be challenging to understand their structure or content. The toString() method helps you visualize these objects as strings for easier debugging.
  2. Interview-ready one-liners: Mastering the toString() method will make you stand out in coding interviews and demonstrate your understanding of JavaScript's core features.
  3. Real-world applications: The toString() method is essential when working with APIs, databases, and other systems that require data to be represented as strings.
  4. Customizing object representation: By defining a custom toString() method, you can control how your objects are displayed, making debugging and logging more intuitive.
  5. Converting primitive values: Although less common, the toString() method can also be used to convert numbers into strings or perform other string manipulations on primitive values.
  6. Improving readability: Customizing the output of your objects makes it easier for others (and yourself) to understand and work with complex data structures.
  7. Consistency: By using toString() consistently across your codebase, you can ensure that all objects are displayed in a uniform manner, making it simpler to identify patterns and issues.
  8. Debugging nested objects: When dealing with deeply nested objects, the toString() method can help you quickly understand their structure without having to manually traverse them.

Prerequisites

To fully grasp this tutorial, you should have a solid understanding of:

  1. JavaScript syntax and variables
  2. Data structures like arrays and objects
  3. Basic concepts of object-oriented programming in JavaScript
  4. Understanding the differences between primitive values (e.g., numbers, strings) and objects
  5. Familiarity with common JavaScript debugging techniques
  6. Comprehension of the console.log() function and its capabilities
  7. Knowledge of various string manipulation methods in JavaScript (e.g., substr, indexOf, replace)
  8. Understanding of common object properties and methods, such as length, push, and pop

Core Concept

The toString() method is an inherent part of the Object class in JavaScript, making it available for all objects, including numbers, strings, dates, and custom objects.

Here's a basic example:

let myObj = { name: "John", age: 30 };
console.log(myObj.toString()); // Output: [object Object] (by default)

By default, the toString() method returns the string representation of an object's memory location. However, you can customize this behavior by defining your own toString() method within your objects.

Customizing toString()

To create a custom toString() method for an object, simply define it as a property of the object:

let myObj = {
name: "John",
age: 30,
toString: function () {
return this.name + " is " + this.age;
}
};
console.log(myObj.toString()); // Output: John is 30

In the example above, we've defined a toString() method for our object that returns a string containing the object's name and age properties.

toString() with numbers

The toString() method can also be used on numbers to convert them into strings:

let num = 123;
console.log(num.toString()); // Output: "123"

Worked Example

Let's create a custom object and use the toString() method to display its properties in a user-friendly format:

let person = {
name: "John",
age: 30,
city: "New York",
toString: function () {
return this.name + " is " + this.age + " years old and lives in " + this.city;
}
};
console.log(person.toString()); // Output: John is 30 years old and lives in New York

Common Mistakes

  1. Forgotten custom toString(): If you define a custom toString() method but forget to call it when logging an object, the default behavior will still apply:
let myObj = {
name: "John",
age: 30,
toString: function () {
return this.name + " is " + this.age;
}
};
console.log(myObj); // Output: [object Object] (without calling the custom `toString()` method)

To fix this issue, call the toString() method explicitly when logging the object:

let myObj = {
name: "John",
age: 30,
toString: function () {
return this.name + " is " + this.age;
}
};
console.log(myObj.toString()); // Output: John is 30
  1. Incorrect custom toString() implementation: If your custom toString() method doesn't properly access the object's properties, it may not return the desired result:
let myObj = {
name: "John",
age: 30,
toString: function () {
return this.toStr(); // Incorrect reference to non-existent property
}
};
console.log(myObj.toString()); // Output: undefined is undefined

To fix this issue, ensure that your custom toString() method correctly accesses the object's properties using the correct syntax (e.g., this.name, this.age):

let myObj = {
name: "John",
age: 30,
toString: function () {
return this.name + " is " + this.age;
}
};
console.log(myObj.toString()); // Output: John is 30
  1. Incorrect use of toString() with arrays: When using toString() on an array, it will return a string containing the array elements separated by commas. If you want to convert an array into a JSON string, use the JSON.stringify() method instead:
let myArray = [1, 2, 3];
console.log(myArray.toString()); // Output: 1,2,3
console.log(JSON.stringify(myArray)); // Output: [1,2,3] (using JSON.stringify())
  1. Incorrect chaining of toString(): When chaining methods with toString(), be aware that the result will be a string and subsequent method calls may not work as expected:
let myObj = { name: "John", age: 30 };
console.log(myObj.toString().toUpperCase()); // Output: [OBJECT OBJECT].TOUPPERCASE() (due to default behavior)

To fix this issue, define a custom toString() method that returns the object as a string and then chain other methods:

let myObj = {
name: "John",
age: 30,
toString: function () {
return this.name + " is " + this.age;
},
toUpperCase: function () {
return this.toString().toUpperCase();
}
};
console.log(myObj.toString().toUpperCase()); // Output: JOHN IS 30

Practice Questions

  1. Create a custom object with properties name, age, and city. Define a custom toString() method that returns the object's properties in the format "Name: [name], Age: [age], City: [city]".
  2. Given the following code, what will be the output of console.log(myObj)?
let myObj = {
name: "John",
age: 30,
toString: function () {
return this.name + " is " + this.age;
}
};

Answer: [object Object] (without calling the custom toString() method)

FAQ

  1. Can I use the toString() method on primitive values like numbers or strings?

Although it's not common, you can still call toString() on primitive values in JavaScript. However, they will automatically be wrapped as objects and their toString() method will be called before returning the result:

let num = 123;
console.log(num.toString()); // Output: "123" (same as String(num))
  1. What happens if I call toString() on an object that doesn't have a custom toString() method?

If an object doesn't have a custom toString() method, JavaScript will return the string representation of the object's memory location by default:

let myObj = { name: "John", age: 30 };
console.log(myObj.toString()); // Output: [object Object]
  1. Can I chain methods with toString() in JavaScript?

Yes, you can chain methods with toString() in JavaScript, but keep in mind that the result will be a string:

let myObj = { name: "John", age: 30 };
console.log(myObj.toString().toUpperCase()); // Output: [OBJECT OBJECT].TOUPPERCASE() (due to default behavior)

To avoid this issue, define a custom toString() method that returns the object as a string and then chain other methods:

let myObj = {
name: "John",
age: 30,
toString: function () {
return this.name + " is " + this.age;
},
toUpperCase: function () {
return this.toString().toUpperCase();
}
};
console.log(myObj.toString().toUpperCase()); // Output: JOHN IS 30
  1. What is the difference between toString() and valueOf() methods in JavaScript?

The toString() method converts an object to a string, while the valueOf() method returns the primitive value of an object (if it has one). The default behavior of both methods for objects without custom implementations is similar: they return the memory location as a string. However, you can define custom toString() and valueOf() methods to control their output.

  1. Can I use toString() with ES6 classes?

Yes, you can use the toString() method with ES6 classes by defining it within the class or a prototype:

class MyClass {
constructor(name, age) {
this.name = name;
this.age = age;
}
toString() {
return this.name + " is " + this.age;
}
}
let myObj = new MyClass("John", 30);
console.log(myObj.toString()); // Output: John is 30
JS toString() (JavaScript) | JavaScript | XQA Learn