Object to Primitive Conversion in JavaScript with Examples

Object to primitive conversion in JavaScript turns objects into primitive values. It happens with operators, comparisons, and functions.

What is Object to Primitive Conversion in JavaScript

Object to primitive conversion means JavaScript reduces an object into a primitive value. A primitive can be a string, number, or boolean.

You write it like this to trigger conversion in expressions. The engine checks the object, calls internal methods, and gives a primitive value.

JavaScript follows steps when it converts an object to a primitive.

Here’s the breakdown step-by-step.

1. The engine checks the hint type: string, number, or default.
2. The engine calls toString or valueOf based on the hint.
3. If no valid primitive comes back, it throws a TypeError.

What this means is simple. The context of the operation defines the hint type. Addition often calls the default hint. String contexts call toString. Math contexts call valueOf.

Object to primitive conversion matters in many parts of code. For example, it runs in object comparison, string concatenation, and numeric operations.

This use case matters when you pass custom objects into operators. Then you can control what value appears in the result. That gives predictable outcomes in expressions.

Use the toString and valueOf Methods

Objects have two main methods for conversion.

• toString returns a string form of the object.
• valueOf returns a numeric or primitive form.

You write it like this to set a custom rule.

const obj = {
  toString() {
    return "Hello";
  },
  valueOf() {
    return 10;
  }
};

This object can convert into "Hello" for string cases. It can also convert into 10 for number cases. The output depends on the operator in use.

Preferred Type Hints in Object Conversion

JavaScript uses hints to decide how to reduce the object.

• Hint string: expects toString.
• Hint number: expects valueOf.
• Hint default: can use both.

This shows it in action clearly.

const obj = {
  toString() {
    return "World";
  },
  valueOf() {
    return 99;
  }
};

console.log(String(obj)); // "World"
console.log(Number(obj)); // 99

You get different outputs based on the type hint. The result is simple and matches the operator context.

Examples of Object to Primitive in JavaScript

Custom valueOf for Math:

const money = {
  valueOf() {
    return 500;
  }
};

console.log(money + 100); // 600

This code defines an object with a custom valueOf. The addition operator forces conversion. The object becomes 500 before the operation. The final output equals six hundred.

Custom toString for Text:

const user = {
  toString() {
    return "Guest";
  }
};

console.log("Welcome " + user); // "Welcome Guest"

This example uses toString. The concatenation operator needs a string. The method returns "Guest". The final output is the full text "Welcome Guest".

Both Methods Together:

const account = {
  toString() {
    return "Account";
  },
  valueOf() {
    return 2500;
  }
};

console.log(account + 100);   // 2600
console.log(String(account)); // "Account"

This shows both methods. The numeric operator calls valueOf and returns two thousand six hundred. The string cast calls toString and gives "Account".

Error in Conversion:

const data = {
  toString() {
    return {};
  },
  valueOf() {
    return {};
  }
};

console.log(String(data));

This example forces both methods to return objects. Neither method gives a primitive. The engine throws a TypeError. The code stops because no primitive value appears.

Wrapping Up

You learned what object to primitive conversion means and how it works.

Here is a quick recap:

• JavaScript helps you reduce objects to primitive values in operations.
• The toString and valueOf gives you a way to control the result.
• The operator or context decides which method runs.
• Errors appear if no primitive comes back.

FAQs

let obj = {
  toString() { return "Hello"; },
  valueOf() { return 42; }
};

console.log(String(obj)); // "Hello"
console.log(Number(obj)); // 42

let obj = {
  toString() { return "5"; },
  valueOf() { return 10; }
};

console.log(obj + 1); // 11 (number conversion uses valueOf)
console.log(String(obj)); // "5" (string conversion uses toString)

let obj = {
  toString() { return "7"; },
  valueOf() { return 3; }
};

// Explicit conversion
console.log(Number(obj)); // 3
console.log(String(obj)); // "7"

// Implicit conversion
console.log(obj * 2); // 6
console.log("Value: " + obj); // "Value: 3"

Similar Reads